【前端面试 | css面试题整理】
层叠
层叠：对一个元素多次设置同一个样式，程序只会使用最后一次设置的属性值。
优势
多个文档的样式可以通过使用一个站点来控制
多个html元素可以包含许多文档，可以在其中创建类
对样式进行分组，最好使用选择器和分组方法
缺点
无法通过选择器升序
垂直控制的局限性
没有表情
没有列声明
伪类不受动态行为的控制
规则、样式、无法定位特定文本
ID和Class的区别
ID属性的值在整篇文档中必须是唯一的。ID属性可用于设置单个元素的样式规则。包含ID属性的选择器称为ID选择器。ID选择器的标志符是散列符号（#）
CLASS属性可声明一组在CLASS属性上具有相同值的元素。BODY内的所有元素都有CLASS属性。类选择器以标志符（.）开头。
CSS盒模型
属性：外边距（margin）、边框（border）、内边距（padding）以及实际的内容（content）。
标准盒子模型：宽度=内容的宽度（content）；总宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=border + padding + 内容（content）；总宽度=内容宽度（content+border+padding）+ margin
z-index
z-index ：设置元素的堆叠顺序。较高堆叠顺序的元素会处于堆叠顺序较低的元素的前面
值说明
auto——默认。堆叠顺序与父元素相等。
number——设置元素的堆叠顺序。
inherit——规定应该从父元素继承 z-index 属性的值。
雪碧图（Sprites）
作用：把网页中一些背景图片整合到一张图片文件中。
优点：减少网页的http请求，提高页面性能
伪元素
CSS伪元素：添加到选择器的关键字，可用于设置所选元素的特定部分的样式。
“first-line” 伪元素用于向文本的首行设置特殊样式，只能用于块级元素！下面的属性可应用于 “first-line” 伪元素：font，color，background，word-space，letter-space，text-decoration，text-transform，line-height，clear。
设置标签相同样式
通过用逗号（，）分隔符来定位多个元素
float属性
定义元素在哪个方向浮动
float: none;
float: left;
float: right;
插入图片不重复：
background-repeat: none;
margin：0 auto;
该对象将位于其父容器的中央
background-attachment：
设置图像附着位置
值：
scroll：背景图片附着在背景容器上，它是相对于背景容器（元素）固定，它会随着背景容器的滚动，而不是随着它的内容滚动（也可以看成是对元素边框固定）。
fixed： 背景图片附着在浏览器的可视区域。因为浏览器的可视区域不具备滚动的性格，所以它是不滚动的
local：CSS3新增的属性值。背景图片附着在背景容器的内容区域。它会随着内容的滚动而滚动。
{visibility：hidden}和{display：none}
display:none 表示标签不会出现在页面上（可以通过DOM与之交互）。与其他标签之间将没有分配空间。
visibility:hidden 表示该标签不可见，但在页面上为其分配了空间。
box-sizing
context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽
display
inline（默认）–内联
none–隐藏
block–块显示
table–表格显示
list-item–项目列表
inline-block
设置元素浮动后，display值为block
显示间隙
有空格时候会有间隙 解决：移除空格
margin正值的时候 解决：margin使用负值
使用font-size时候 解决：font-size:0、letter-spacing、word-spacing
position
static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。
position跟display、overflow、float这些特性相互叠加
display属性规定元素应该生成的框类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。
优先级机制：position：absolute/fixed优先级最高，有它们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。
浮动与清除浮动
浮动
浮动元素碰到包含它的边框或者浮动元素的边框停留。浮动元素不在文档流中，会漂浮在文档流的块框上。
问题：1、父元素的高度无法被撑开，影响与父元素同级的元素；
2、与浮动元素同级的非浮动元素（内联元素）会跟随其后
3、除非第一个元素浮动，否则该元素之前的元素也需要浮动，否则会影响页面显示的结构
清除浮动
1、父级div定义height或者zoom（zoom的作用就是设置放大为原来的几倍，如：zoom：2）
2、最后一个浮动元素后加空div标签 并添加样式clear:both。
3、包含浮动元素的父标签添加样式overflow为hidden或auto。
css优化
避免过度约束
避免后代选择符
避免不必要的命名空间
避免！important，可以选择其他选择器
元素竖向的百分比设定是相对于容器的高度吗
当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
伪类与伪元素
伪类：存在DOM文档中，逻辑上存在但在文档树中却无须标识的“幽灵”分类，用于向某些选择器添加特殊的效果，伪类的效果可以通过添加实际的类来实现。
伪元素/伪对象：在DOM文档中不存在，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中，用于将特殊的效果添加到某些选择器。伪元素的效果可以通过添加实际的元素来实现。
::before 和 :after
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。
line-height
line-height值设置为height一样大小的值可以实现单行文字的垂直居中
多行文本垂直居中：需要设置display属性为inline-block。
水平居中一个元素
弹性盒子
.box{
display: flex;
justify-content: center;
align-items: center;
}
定位
.box{
position: relative;
}
.box .sub{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*margin-left: 负的宽度的一半*/
/*margin-top: 负的高度的一半*/
}
实现一个三角形
.triangle{
width: 0;
height: 0;
border: 100px solid transparent;
border-left-color: red;
}
选择器
id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=“external”]）、伪类选择器（a:hover, li:nth-child）
内嵌样式>内部样式>外部样式>导入式
！important > 内嵌 1000 >Id 100 > class=[]=伪类 10 > tag=伪元素 1 > ( * + > ~) 0
预处理器
CSS预处理器是用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。
优点
CSS变得更易于维护
易于编写嵌套选择器
用于一致主题的变量。可以跨不同项目共享主题文件
Mixins生成重复的CSS
诸如循环，列表和映射之类的Sass功能可以使配置更容易且更省力
将您的代码分成多个文件。CSS文件也可以拆分，但是这样做需要HTTP请求才能下载每个CSS文件。
缺点
需要进行预处理的工具。重新编译时间可能很慢。
不编写当前和潜在可用的CSS。例如，通过将诸如 postcss-loader之类的内容 与 webpack一起使用，可以编写可能与将来兼容的CSS，从而使您可以使用CSS变量（而不是Sass变量）之类的东西