css常见面试题总结

1、语义化

语义化标签 <h1></h1> <p></p><table></table>
**增加代码可读性**
**让搜索引擎更容易读懂**

2、块状元素&内联元素

块状元素 div、h1、p、 table、ul
内联元素 span、img、input、button

3、盒模型宽度计算

border*2+padding*2（内边距）+content
**如果加box-sizing：border-box；那么就是border*2+padding*2（内边距）+content**

4、margin纵向重叠问题

相邻元素的marginTop和marginBottom也会重叠**取最大的margin值**
空白的p标签也会重叠

5、margin负值的问题

marginTop和marginLeft设置负值会向上或向左移动
marginBottom和marginRight设置负值 本身不移动 相邻的元素会向上或向左移动

6、BFC理解与应用

6.1、Block format context,块级格式化上下文
6.2、一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
6.3、形成BFC的常见条件(父元素)
    6.3.1、float不是none
    6.3.2、position是absolute或者fixed
    6.3.3、overflow不是visible
    6.3.4、display是flex、inline-block等
6.4、BFC的常见应用
    6.4.1、清除浮动

7、圣杯布局与双飞翼布局(float)

7.1、三栏布局，中间一栏最先 加载和渲染 （中间最重要 所以先写中间）
7.2、两侧内容固定，中间内容随着宽度自适应（两侧内容留出和宽度对应的padding）
7.3、 圣杯布局和双飞翼布局技术总结
    7.3.1、使用float布局
    7.3.2、两侧使用margin负值 以便和中间内容横向重叠 （两侧负百分之百（父元素的宽度）margin）
    7.3.3、防止中间内容被两侧覆盖 一个用padding 一个用margin
    **圣杯布局通过padding为两边留白双飞翼布局通过margin为两边留白**

8、flex布局

align-self 子项目交叉轴对其方式 

9、定位

    **absolute定位是根据父元素定位的 如果找不到父元素 就根据body定位**
9.1、水平居中
    inline元素：text-align：center
    block元素：margin：auto
    absolute元素：left：50% ；marginLeft：-本身的1/2
9.2、垂直居中
    inline元素：line-height：height
    absolute元素：top：50% ；marginTop：-本身的1/2 （**必须知道宽度**）
    absolute元素：top：50% ； left：50%；transforn（-50%,-50%）
    absolute元素：top,left,bottom,right=0;margin:auto
    flex定位：justify-content：center；aligin-item：center

10、图文样式

10.1、line-height继承：
    如果父元素的line-height为具体的尺寸值：继承父元素的line-height值
    如果父元素的line-height为百分比：继承父元素的font-size*父元素的lineHeight
    如果父元素的line-height为比例值：继承自身的font-size*父元素的line-height

11、响应式

11.1、常见的几种长度单位
    rem是一个长度单位 ，相对于根元素，常用于响应式布局 （**根元素html的font-size设置多少 就是1rem有多少**）
    px 绝对单位 最常用
    em 相对长度单位 相对于父元素 不常用
11.2、响应式布局的常用方案
    media-query，根据不同的屏幕设置根元素font-size
    rem，基于根元素的相对单位
    **rem弊端：阶梯型（374<fontsize：86px ,375px<fontsize：100px <413px,大于414px的fontsize:110px）**

12 响应式vw/vh

vh 网页视口高度的1/100 window.innerHeight===100vh
vw 网页视口宽度的1/100 window.innerWidth===100vw

13、手写clear fix

.clearfix:after{
    content:'';
    display:table;
    clear:both;
}
.clearfix{
     *zoom:1
}