CSS面试题八股文总结

1.css选择器

• 来源：内联样式>内部样式>外部样式>浏览器自定义>自定义样式
• 种类：id选择器（1000）>类选择器>伪类选择器（:hover等、属性选择器>标签选择器、伪元素（1）>通配符选择器，子选择器、相邻选择器
  补充：
• ！important优先级最高
• 优先级相同，最后出现的生效
• 继承的优先级低

2.css的盒模型

• 标准盒模型（W3C）
  box-sizing:content-box（默认值）
  标准盒模型总宽度/高度：margin+border+padding+内容区宽度/高度（ 即 width/height 不包含 padding 和 border 值 ））
  

• 怪异盒模型（IE盒模型)
  box-sizing:border-box
  IE盒子总宽度/高度 == (内容区宽度/高度 + padding + border) + margin。（ 即 width/height 包含了 padding 和 border 值 ））

3.css可继承性属性

• 字体系列：font-family，font-weight，font-size，font-style
• 文本系列：text-align,line-height,color
• 元素可见：visibilty
• 列表布局属性：list-style

4.布局方式

静态布局：
自适应布局:
流式布局：
响应式布局：
弹性布局：

5.css属性的position的属性？

文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列，并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。【脱离文档流即是元素打乱了这个排列】，或是从排版中拿走。

css的定位机制有三种：分别是文档流；浮动(float)；定位(position)。

A: position: absolute 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位；由于绝对定位，脱离了文档流。

B: position: fixed 生成绝对定位的元素，相对于浏览器窗口进行定位，和正常顺序排下来无关。

C: position: relative 生成相对定位的元素，相对于其正常位置进行定位。没有能脱离文档流。

D: float: left 浮动出去，无法保持原位置。
position定位

• static:默认值，没有定位，元素出现正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
• absolute：生成绝对定位的元素相对于static定位以外的第一个父元素进行定位，元素经过"left", “top”, “right” 以及 “bottom” 属性进行规定
• flxed:生成固定定位的元素，相对于浏览器窗口进行定位
• relative：生成相对定位，相对于其他的正常位置进行定位
• sticky：粘性定位，该定位基于用户滚动的位置

6.display：none和visibility:hidden区别

• 作用不同 visibility: hidden----将元素隐藏,但是在网页中该占的位置还是占着。 display: none----将元素的显示设为无,即在网页中不占任何的位置。
• 定义不同 visibility 属性指定一个元素是否是可见的。 display这个属性用于定义建立布局时元素生成的显示框类型。

7.CSS度量单位

1. rem 相对于根字体大小的单位，比如可以设置 1rem=50px
2. em 相对于font-size，比如font-size：16px（浏览器默认），则2em=32px
3. vm 即viewpoint width，视窗宽度，比如1vm的宽度为相对于视窗的宽度的百分之一
4. vh 即viewpoint height ，视窗高度，比如1vm的高度为相对于视窗的高度的百分之一

8. 重排和重绘

浏览器渲染页面
● 通过 HTML解析器，解析 HTML 解析成 DOM 树。
● 通过 CSS解析器，解析 CSS文件构成层叠样式表模型 CSSOM 树。
● 结合 DOM树 和 CSSOM树 合并为渲染树(rendering tree)
● 布局，浏览器在屏幕中画出渲染树的每一个节点，被称之为布局（ Layout ）
● 绘制，将渲染树的各个节点绘制到屏幕上，这一步被称为绘制（ Paint ）

重排（回流）
重排就是浏览器在第一次渲染完页面布局以后，后续引起页面各节点位置重新计算或者重新布局的行为

• 因为元素的位置或者尺寸发生了变化，浏览器会重新计算渲染树，导致渲染树的一部分或者全部发生变化，需要重新绘制页面上影响的元素
• 能触发重排的行为有：改变页面尺寸，涉及元素尺寸或位置的操作等
  重绘
  重绘就是布局计算完毕后，页面会重新绘制，这时浏览器会遍历渲染树，绘制每个节点，当元素外观变化但没有改变布局的时候，重新把元素绘制的过程
  ● 重绘不一定出发重排，但重排一定会出发重绘
  ● 如：vidibility、outline、背景色等属性的改变
  我们常常说HTML是网页的结构，CSS是网页的外观，JS是网页的动作，那么一般涉及到网页的HTMl改变的（也即是DOM元素改变）的就是重排，而涉及到CSS的比如改变颜色等就是重绘（对于会影响到DOM的不算，比如使用了display：flex）
  减少和避免
  ● 避免重排和重绘的话就需要减少或者和合并多次DOM操作为一次DOM操作
  ● 因为绝对定位可以让元素脱离文档流，只会出发局部重排而不会影响外界
  ● 样式集中改变
  面试回答
  当影响页面的布局，比如改变大小，位置之类的，就会触发重排，而当改变背景颜色这一类就是重绘。

9.CSS盒子居中显示

1.定位 子绝父相

• 1.1 margin设置为auto

.child {
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
margin: auto; }

• 1.2 transform使子盒子往“回”移动自己宽高的一半

.child {
position: absolute;
top: 50%;
left: 50%；
transform: translate(-50%, -50%);

2.flex布局
将父盒子设置成弹性盒容器
让子元素水平居中，垂直居中

.parent {
display: flex;
justify-content: center;
align-items: center;
}

• 3.inline-block行内块元素
  text-align: center; 只对行内元素和行内块元素有用

.parent {
text-align: center;
line-height: 500px;
}
.child {
display: inline-block;
vertical-align: middle; vertical-align 属性设置一个元素的垂直对齐方式。middle把此元素放置在父元素的中部。
}

CSS盒子右边固定，左边自适应
1.固定盒子浮动+ 自适应盒子width: 100%;//宽度等于百分之百

.left {
float: left;
width: 200px;
height: 400px;
background: red;
}
.right {
width: 100%;//宽度等于百分之百
height: 400px;
margin-left: 200px;
background: blue;
}

2.flex布局父容器设置 display：flex；Right部分设置 flex：1

.box{ display: flex;}

.left{width:200px;background: red;}

.right{width:%;flex:1;background: blue;}/等于左边栏宽度/

3.左右两边都绝对定位

.left{width:200px;background: red; position: absolute;left:;}

.right{width:100%;background: blue;position: absolute;left:200px;}/等于左边栏宽度/

10.CSS样式隐藏元素

定位到屏幕外边、透明度变换、display、opacity、

• opacity 属性的效果是给背景颜色添加透明度,取值范围是0~1, 但也会让处于背景颜色中的字体一同透明, 单用效果很好
• visibility给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。
• display如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失

补充：
visibility和display的区别

• visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别
• visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样
• CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。

11.CSS样式display

• block”可将元素将显示为块级元素
• none 与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间，它就会消失在网页中，但元素并没有在文档中删除，只是隐藏在网页结构中，不在网页中显示而已。不占据物理空间，网页中不显示，但是DOM结构还在
• inline”主要是用来将块级元素转换成行内元素

12.CSS中的伪类

链接伪类：link visited hover active
结构伪类：first-child last-child nth-child(n) nth-last-child(n)
N: even odd n 2n等
目标伪类：:target { }

13.CSS动画

动画常见属性 ：
animation帧动画
animation-name ：动画名称
animation-duration：持续时间
animation-timing-function ：动画速度曲线
animation-delay：动画开始时间
animation-iteration-count：规定动画播放次数默认是1
animation-direction:规定动画在下一个周期逆向播放，默认是nomal