男做直播网站,泰安网络安全工程师培训,菜鸟网站编程,凡科网页版文章目录 CSS的值和单位属性值长度单位CSS和绝对单位CSS和相对单位百分比em rem视口 颜色单位 碎碎念 CSS的值和单位
我们知道#xff0c;CSS是由属性和属性值所组成的表
随着CSS的发展#xff0c;属性不说几千也有几百#xff0c;我从来不支持去背诵所有的可能性。… 文章目录 CSS的值和单位属性值长度单位CSS和绝对单位CSS和相对单位百分比em rem视口 颜色单位 碎碎念 CSS的值和单位
我们知道CSS是由属性和属性值所组成的表
随着CSS的发展属性不说几千也有几百我从来不支持去背诵所有的可能性。我们应该去了解底层的逻辑了解是什么导致我们最终看到了这样的样式从而在我们面对不同需求时给予我们以不同的思路
那不聊属性就先聊聊属性值吧 属性值
.content {max-width: 1080px;margin: 0 auto;
}css的属性值是很多样的 他可能是带有特殊含义的关键字就像 inherit、initial 或者 auto 这样的 也可以是不带单位的数字 用于表示距离和百分比的0可以不带单位因为就算带了单位他们的含义也没有区别 像这样 body {margin: 0;padding: 0;
}.A{height: 0;
}.B{position:absolute;top:0;left:0;bottom:0;right:0;
}一些属性也是允许无单位值的 比如 z-index、line-height、opacity等 最常见的他是一个带有单位的值 长度单位
CSS和绝对单位
CSS中的绝对单位其实一个词就能讲完——px 我们的屏幕的分辨率就是用像素做单位那用像素不是最好的选择吗
可惜答案是否定的 css中的px跟分辨率的像素是有所不同的严格来说CSS的1px并不等同于屏幕的1px更何况不同的的设备和用户设定更是会渲染出不同的结果 虽然上第一节前端课的时候老师就告诉我们 1 英寸这个是物理长度 96 p x 1英寸这个是物理长度 96px 1英寸这个是物理长度96px 但是现在我们知道了这就是个大概值如果你迷信他到时候会吃亏的。该用英寸的时候就直接用英寸 除了px以外其实CSS还允许很多绝对单位他们其中绝大多数都是印刷行业常用的单位。虽然在渲染网页的时候他们绝大多数情况下都帮不了你什么忙但如果你要渲染一个专门用于打印的页面时他们就会大显神威
单位名称等价换算cm厘米1cm 37.8px 25.2/64inmm毫米1mm 0.1 cmQ四分之一毫米1Q 0.25 mm 0.025 cmin英寸1in 2.54cm 96pxpc派卡印刷用1pc 1/6 in 12 ptpt点点1pt 1/72 in 在编辑排版工作中为了方便计算一行内能排多少字符往往使用“字符每派卡”cppcharacters per pica描述字体的大小。由于西文字体多为比例宽度多带有零碎的小数、分数数值比如某个版本 11 点大小的 Helvetica 会被记做 2.4 cpp意即“1派卡里可排 2.4 个字符”。有了这个数值排印人员就可以方便地计算在通常一本八开6×8 英寸的书籍里排5英寸长的字行5英寸30派卡可以容纳 2.4 × 30 72 个字 CSS和相对单位
在很多年前绘制一个HTML页面跟规划一张报纸的版面没有什么区别 也许这就是为什么CSS会支持这么多排版单位的原因吧。因为开发者们知道用户会用什么设备来访问这个页面画布是固定大小的所以所有元素的尺寸都可以写死他。哪怕屏幕分辨率在后来越来越大开发者们想出了类似前面的 .content 的解决方案既然画布一直在变大那我就自己定义一个画布规定他的最大值。然后让他居中显示把所有的内容都写到里面去即使在高分辨率的屏幕上整个页面看起来就像一根矗立在屏幕中央的棍子 直到iphone4诞生彻底改变人们对“上网”这个行为的思维方式。原来我们可以在一个方砖大小的设备上访问页面那我们将来是不是可以在一个几十上百寸的巨幕上访问页面在一张A4纸大小的板子上访问页面
人们用千奇百怪的设备访问你的网页这时候如果你依然墨守成规那就只能在用户糟糕体验之后的唾弃声中抱着你的电脑屏幕退场 百分比
这个应该不需要解释了吧就像这样
div classfdiv classAA/divdiv classBB/div
/divstyle.f {background: gray;}.f * {float: left;}.f::after {content: ;display: block;clear: both;}.A {width: 10%;/*占f的十分之一宽度*/background: red;}.B {width: 50%;/*占f的一半宽度*/background: yellow;}
/style这个其实不能属于相对单位那一类他甚至都不能算单位
但是最早前辈们刚开始想搞响应式布局的时候最先想到的就是用百分比 如果你用过一些前端样式框架比如说 bootstrap 、 layui 或者 Element-plus(Element-ui)。你就会发现他们在布局的时候基本都有一个栅格化类 就是把一个容器切割成N份N12的居多然后你根据调用不同的栅格类-数字来让子元素占据对应的宽度 在 flexbox 出现之前几乎全都是用类似上面那个例子一样的方式实现的 em rem 所谓相对单位说白了就是这个单位是依附于其他东西的 他不像绝对单位虽然我们说px在不同情况下的长度略有差异可是只要你定义了这个属性那么他就一定是这么长无论周围的东西怎么变动都不会影响 但相对单位是可能你没有变动他自身但是他相对的东西的长度变动了所以他就跟着变动了这个其实就跟百分比差不多 em和rem这俩就是正儿八经的相对单位了
其实也很简单一句话也能说完
em是相对于父元素的字体大小的倍数rem是相对于根元素的字体大小的倍数(r代表root)
但这是针对你用em来设定字体大小的时候如果你用em设定的不是字体大小那么他的参照物就会变成 当前元素的字体大小 em
em最直接的用法是当你想要在一段文字中突出某个大字号标题的时候使用就像这样
div classwordp classtitle我是标题/p巴拉巴拉 巴拉巴拉 巴拉巴拉 巴拉巴拉
/divstyle.word{font-size: 16px;}.title{font-size: 2em;}
/style我们通过2em这个设定让 title类 字体大小变成 word类 字体的两倍这种写法是有意义的当我们修改整段文字的字体大小的时候可以只修改外层的word类的大小 通常我们用这种方式设定所有元素的字体大小然后根据实际的分辨率来设定根元素的字体大小已实现对整个页面的字体大小的动态控制 如果对根元素使用em呢 你知道浏览器有个标准字体大小的伐 如果你对根元素使用em就会以浏览器标准字体来计算 不过事实上现在我们最常见的对em的用法不是用他来设定字体而是用他来设定边距就像这样
div classbox AA
/div
div classbox BB
/divstyle.box{display: inline-block;padding: 2em;}.A {font-size: 16px;background: red;}.B {font-size: 32px;background: green;}
/style这样一来无论我把这两个方块的字体大小如何设定他们的边距都会是当前字体大小的两倍 rem
rem跟em几乎是一样的区别在于他的参照物永远都是根元素。在html文档中这个根元素其实就是html标签
不过除此之外CSS还提供了一个叫 :root 的伪类选择器让你选择根元素我个人建议你用这个伪类选择器来选中根元素
就像这样
p这是标准器默认字体大小的一句话/p
p stylefont-size: 1.5em1.5em/p
div stylefont-size: 2emp stylefont-size: 1em父元素2em时的1em/p
/div
p stylefont-size: 1.5rem1.5rem/p
div stylefont-size: 2emp stylefont-size: 1rem父元素2em时的1rem/p
/divstyle:root{font-size: 8px;}
/style视口
视口就是指浏览器窗口里网页可见部分的边框区域
JavaScript中的视口inner- 和 outer-
在JavaScript里面我们可以通过 inner- 和 outer- 来获取html渲染区域尺寸和浏览器窗口尺寸就像这样
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
button idbtn打印窗口尺寸/button
/body
/htmlscript(function () {document.getElementById(btn).onclick function () {console.log(innerHeight, window.innerHeight, innerWidth, window.innerWidth);console.log(outerHeight, window.outerHeight, outerWidth, window.outerWidth);console.log(**************************************);};})()
/script这里发生了很有意思的事情
在一开始我拉动了F12弹出的调试工具的大小这时候innerWidth变小了但是outerWidth无动于衷。但是当我让调试工具弹出来同时缩小浏览器窗口大小时我们看到outerWidth变小了但是innerWidth反而变大了
会出现这样的情况只有一种解释那就是inner-返回的是html页面当前可用的渲染区域的尺寸而outer-返回的是整个浏览器窗口的尺寸就像这样 显然inner- 所代表的就是我们说的视口 值得注意的是 inner- 的尺寸是包含滚动条的尺寸的所以如果你用这个属性让某个容器占满整个页面的高度/宽度那么在滚动条出现的情况下可能会出现很诡异的情形就像这样 div idtestdiv styleheight: 10px;width: 10000px/div
/divstylebody{margin: 0;padding: 0;}div{width: 200px;background: green;}
/stylescript(function(){document.getElementById(test).style.height window.innerHeight px;})()
/script如我们所料横向的滚动条出现了这是因为我们有一个宽度为10000px的div这远远超过我们的视口所以横向滚动条出现了 但是纵向滚动条为什么会出现呢明明test的高度等同于视口啊 因为我们的视口是包含滚动条的也就是说这样 横向滚动条刚好挡住了一部分test的内容所以纵向滚动条出现了而且可以滚动的距离刚好等于横向滚动条的高度 vh vw
在今天的网页开发里如果你想要用视口尺寸不一定要使用JavaScriptCSS也推出了四个用于操作视口的单位就像这样
值说明1vh视口高度的1%1vw视口宽度的1%1vmax视口高度和宽度中的较大值的1%1vmin视口高度和宽度中的较小值的1%
div idAA/div
div idBB/divstylebody{margin: 0;padding: 0;}#A{background: green;width: 90vw; /*占90%的宽度*/}#B{background: blue;height: 50vh; /*占50%的高度*/}
/style颜色单位
聊完了字体大小长度单位那么我们最常用的CSS单位就还有一个颜色
虽然颜色有非常多的枚举值可以选但是在实际开发中基本都是用不上的毕竟得是审美多诡异的设计师才会喜欢这些大红大紫
CSS最常用的一些颜色单位其实打开PS的调色盘你就知道了 看右下角这堆输入框其实这里有五种表示颜色的方式 HSB 这个在CSS里面用 hsl 来表示hsl的四个参数分别代表这里的 H、S、B以及透明度 这是给人理解的颜色表示方式通过色度饱和度的方式帮助你确认自己挑的颜色 一般来说如果看两个相近颜色的RGB/十六进制代码我们是看不出来这俩有多相似的但是如果是hsl数值的话就会很明显 RGB 十六进制 RGB模式应该是大家最熟悉也是最常见的表示方式了四个参数分别是红色、绿色、蓝色以及透明度 三种原色的最大值是255所以RGB(255,255,255)是纯白色 而RGB和十六进制是可以互相转换的255刚好等于16进制的FF所以颜色的十六进制是固定位数的六位八位的那种是加上透明度的 Lab 这个很少用但是CSS里也可以用对应的函数是 lab() 尽量别用因为这玩意兼容性目前不太行 CMYK 这个在网页上不怎么用但是如果你绘制一个需要用来打印的页面时会用到这个东西 在CSS里这样写device-cmyk() 碎碎念
css是属性属性值的键值对表。属性值是多样的可以是枚举关键字、可以是不带单位的数字但是更多时候他是带单位的值长度单位分绝对单位和相对单位绝对单位最常用的px其他基本是印刷时用的单位长度相对单位主要为响应式服务最常用的有emrem、还有vhvw视口就是指浏览器窗口里网页可见部分的边框区域虽然不包含标题、地址、开发者窗口等等浏览器组件但是包含滚动条颜色的各种单位基本上打开PS的调色盘就明白了 万分感谢您看完这篇文章如果您喜欢这篇文章欢迎点赞、收藏。还可以通过专栏查看更多与【CSS笔记】有关的内容
