em布局
em是相对长度单位。相对于当前标签文本样式的字体尺寸（不仅限于字体大小，包括当前盒子的宽高也是根据当前标签字体大小设置的）。如当前对文本的字体尺寸未被人为设置，则会向上追溯到设置字体大小的祖先元素，直至追溯到浏览器的字体尺寸。
一般浏览器的默认尺寸为16px
<body>
<div class="box1">box1
<div class="box11">box11</div>
</div>
</body>
css样式：
.box11 {
font-size: 2em;
}
盒子宽高：
.box1 {
font-size: 30px;
width: 200px;
height: 200px;
background-color: pink;
}
.box11 {
width: 0.5em;
height: 0.5em;
background-color: rebeccapurple;
font-size: 2em;
}
padding值：
padding-left: 2em;
margin值：
margin-left: 2em;
border：
border: 0.5em solid red;
rem布局
rem单位
rem同em一样，表示倍数关系。不同的是，rem是直接追溯到根标签的font-size值。从而使每一个元素都以根标签为参照进行大小的设定。
html {
font-size: 20px;
}
div {
width: 2rem;
height: 2rem;
background-color: rosybrown;
}
设置根标签的大小为20px，父盒子的宽高为4rem=204=80px，子盒子的宽高为2rem=202=40px。
直接都以根标签为参照物省去了层层追溯进行计算的麻烦。
rem布局
rem布局的原理：动态修改html根标签中的font-size值。所有后代元素由根标签字体大小决定（通过rem）。根标签字体大小由显示设备宽度决定（通过js或vw：下文解释）。
在移动端上，每个设备的宽度不同（分辨率不同），导致元素的大小不能以固定的px值进行显示，否则会造成同样的100px在不同的移动端显示效果不同。
所以，为解决这个问题，每个元素的大小不是固定的（px值），变为每个元素占据屏幕的比例是固定的（“屏占比”固定）（vw值）。
实现方式：
1.通过js:使用命令获取到屏幕的宽度并反馈出来，使根标签html中的字体大小得到修改。在此不做说明。
2.通过vw
vw：1vw = 屏幕宽度的百分之一。
vh: 1vh = 屏幕高度的百分之一。
看起来和百分比布局很像，都是用百分数来表示，但是单位书写方式不同、参照物也不同。
但这两者的本质区别是：百分比参照的其父盒子的大小，而vw/vh参照的是屏幕大小。
当用百分比参照父盒子大小时，会造成多层嵌套的后代元素的尺寸一直要向上追溯祖先元素的尺寸，非常不方便。并且用百分比设置根元素的字体大小是在浏览器默认字体16px的基础上进行百分比的计算。并不能解决不同屏幕宽度元素的“屏占比”不同的问题。
但使用vw/vh根据屏幕大小定好根元素的字体大小，再用rem直接追溯到根字体大小，使所有盒子的大小都参照屏幕大小来书写，省去了中间的换算。
举例：
移动端的常见设计稿的宽度为375px。设计稿中有一个盒子宽为100px，换算成用vw表示为：26.67vw（=100占375的百分比=100/375）。在盒子屏幕占比永远是26.67%。在移动端显示屏宽度为375px时，26.67vw即为100px。在屏幕宽为414时，显示为110.41px=414*26.67vw。
因此设计根字体大小为26.67vw（100px）时，后代元素用26.67vw（100px）的倍数进行计算会比较方便。
比如：
当设计稿宽为375px，盒子宽为200px时，需要如何表示使该盒子在不同宽度的屏幕上“屏占比”固定？
html {
font-size: 26.67vw;
}
div {
width: 2rem;
height: 2rem;
background-color: rosybrown;
}
解释：
设置html的字体大小为26.67vw，实际显示为375px0.2667=100px。盒子的宽/高为2rem，实际显示为100px2=200px。
在代码书写的过程，我们需要对元素单位px换算成rem。不过可以通过安装VScode中的一个插件：px to rem，并在扩展设置中将number of pixels per 1rem 的值设为100.(屏幕宽度375：26.67vw=100px ，1rem=100px；26.67vw=1rem)
通过这个插件，我们就可以照常使用100px来表示大小，只需在代码完成后全选（ctrl+a）然后用alt+z进行替换就可以了。
sass
为解决样式代码的重复书写以及维护，引入了SASS扩展语言。它引入了一些css原本没有的功能，比如：变量，Mixin,运算，函数，嵌套。比css功能更全面。
举例，当项目测试阶段想要更改某一个背景颜色，用CSS时可能就需要找到该背景颜色所在的所有标签样式，再进行更改。但在SASS中，会将同样的背景颜色定义为一个变量，在不用的标签样式中进行引用。需要修改的时候只要改这个变量就可以了。
后代元素
针对以上嵌套CSS的表示：
.box1 .box1111{
width: 100px;
height: 100px;
background-color: blue;
}
更精确表示为：
.box1 .box11 .box111 .box1111{
width: 100px;
height: 100px;
background-color: blue;
}
在SASS中，书写后代不再像原来CSS利用空格进行后代选择，而是利用换行缩进。这样在结构上也会更明朗。
占位符 &
当同一个标签想要表示不同状态样式时，比如悬停样式，同样用换行缩进，但需要用**&占位符表示**。
变量（属性值） $
当同一个标签使用了同一种样式时，可以通过定义样式的方式。
定义方式：用$命名：属性值；
引用方式：在属性值得位置引用 $命名。
复合属性中变量 #{$ }
复合属性——含有变量的属性的代替 margin-left/ right border-style/color
定义方式：KaTeX parse error: Expected 'EOF', got '#' at position 29: …方式：在是变量的属性的位置用 #̲{}包裹命名
继承 @extend
可以让一个选择器继承另一个选择器的所有样式。
连同father下的后代的所有样式也都继承，一般当两个标签的结构几乎一模一样时可以使用
.father2 {
@extend.father
}
公共样式 @mixin @include
用@mixin定义一个可以在整个样式表中重复使用的样式，用@include进行引用。
自定义样式在前，通用样式在后
计算
div{
padding: 2px * 4;
margin: 20px + 2px;
font-size: 16px - 2;
// 除法必须加小括号
border: (10px / 2) solid;
// 取绝对值
margin: abs(-10px);
// 四舍五入
margin: round(3.6px);
// 向上取整
margin: ceil(3.2px);
// 向下取整
margin: floor(3.999px);
width: percentage(650px/1000px);
}
颜色
// 改变颜色的深浅：颜色号，变换深浅的百分比
background-color: lighten(#cc3,30%);
background-color: darken(#cc3,40%);
注释格式
单行注释：// 不会保留到编译后的css文件中。
多行注释：/* / 会保留到编译后的css文件，压缩文件则没有。
重要注释：/！ */ 会保留到编译后的css文件，压缩文件也会保留，一般用于版权声明。
扫一扫
550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
