1.css选择器及其优先级

！important>内联选择器>ID选择器（#name，100）>

类别选择器（.name，10）=属性选择器=伪类选择器（:last-child，10）> 伪元素选择器（::after,1） =标签选择器（head,1）>通配符选择器(*)>继承选择器

2. 伪类和伪元素的区别

伪元素：例如::after和::before,在内容元素的前后插入额外的元素或样式，但是这些元素实际并不在文档中生成。只在外部显示可见，不会在文档的源代码中找到他们。

伪类：例如：hover，:first-child，将特殊的效果添加到特定的选择器上，是在已有元素上添加类别的，不会产生新的元素。

3. display的block、inline和inline-block的区别

（1）block：会独占一行，多个元素会另起一行。width、height、margin和padding属性均可设置；

（2）inline：元素不会独占一行。设置width、height属性无效，padding和margin可设置水平不可竖直方向；

（3）inline-block：将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。

4. 行内元素和块级元素的区别

（1）行内元素

设置宽高无效；
可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；
不会自动换行；

（2）块级元素

可以设置宽高；
设置margin和padding都有效；
可以自动换行；
多个块状，默认排列从上到下

5. display:none和visibility:hidden的区别

（1）渲染树中

display:none会让元素完全从渲染树中消失，渲染时不会占据任何空间；

visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。

（2）是否继承

display：none是非继承属性，改变子元素属性也无法显示 Visibility：hidden是继承属性，通过给子元素设置visibility：visible可以使子元素显示

6. 盒模型

（1）盒模型都是由四个部分组成的，分别是margin、border、padding和content。

（2）标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同：

标准盒模型的width和height属性的范围只包含了content，
IE盒模型的width和height属性的范围包含了border、padding和content。

（3）可以通过修改元素的box-sizing属性来改变元素的盒模型：

box-sizing: content-box表示标准盒模型（默认值）
box-siing: border-box表示IE盒模型（怪异盒模型）

7. position定位

aolute：绝对定位，相对于父元素定位，如果没有满足条件的父元素，则相对于浏览器窗口定位；
relative:相对定位，元素相对于自身正常位置进行定位，不会脱离文档流；
fixed:固定定位，元素相对于浏览器窗口位置进行定位，无论如何滚动浏览器窗口，元素的位置固定不变；
sticky：粘性定位，是relative和fixed的结合体，能够实现吸附效果

8. flex：1的含义

（1）flex：1即为等同于 flex: 1 1 auto;经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。

（2）flex：1是flex-grow: 1; flex-shrink: 1 flex-basis: auto的缩写

flex-grow：表示在当前元素占多少份的意思
flex-basis：用于设置或检索弹性盒伸缩基准值
flex-shrink：指定了flex元素的收缩规则。

flex元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据flex-shrink的值，如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。

9. BFC——块级格式化上下文

（1）创建BFC的条件：

根元素：body；
元素设置浮动：float 除 none 以外的值
元素设置绝对定位：position (absolute、fixed)；
display 值为：inline-block、table-cell、table-caption、flex等；
overflow 值为：hidden、auto、scroll；

（2）BFC的特点：

垂直方向上，自上而下排列，和文档流的排列方式一致。
在BFC中上下相邻的两个容器的margin会重叠
计算BFC的高度时，需要计算浮动元素的高度 -BFC区域不会与浮动的容器发生重叠
BFC是独立的容器，容器内部元素不会影响外部元素
每个元素的左margin值和容器的左border相接触

（3）BFC的作用：

margin的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就决了margin重叠的问题。
高度塌陷的问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden。
自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。

前端面试自用版-CSS篇