HTML+CSS面试题（持续更新中）

1.BFC

1.1 什么是BFC？

 BFC（Block Formatting Context) 块级格式化上下文

BFC是CSS的一个隐含的属性 可以为一个元素开启BFC开启BFC元素会变成一个独立的布局区域

1.2 如何创建BFC?

        1.给元素添加float：right left

        2.给元素添加定位 positive absolute

        3.给元素添加overflow:hidden scroll auto （推荐）

        4.给元素添加display（设置为行内块）：table-cell、table-caption、inline-block、inline-flex、flex；

1.3 元素开启BFC后的特点

        1.开启BFC的元素不会被浮动元素所覆盖（可用于自适应两栏布局）

        2.开启BFC的元素子元素跟父元素的外边距不会重叠

        3.开启BFC的元素可以包含浮动的子元素

2.三栏布局

2.1 .流体布局（float布局）

左右栏浮动 float:left; float:right 中间左右margin

缺点：主要内容无法最先加载 ，当主要内容过多时影响用户体验

2.2 bfc布局

左右两栏元素浮动  利用BFC不会和浮动元素重叠的规则，把中间元素改成一个BFC

使用overflow:hidden或者display: flex达到中间栏自适应

缺点：主要内容无法最先加载 ，当主要内容过多时影响用户体验

2.3 flex布局

父元素display:flex

左右两栏固定宽度 中间栏flex:1  占据剩余空间

缺点：无法兼容所有浏览器

2.4 position定位

父元素相对定位

左右栏绝对定位 中间栏不做定位处理    

2.5 圣杯布局

圣杯布局的核心是浮动、负边距、相对定位、不添加额外标签
左、中、右 三栏都使用float进行浮动，然后通过负值margin进行调整

2.6 双飞翼布局

双飞翼布局前两步和圣杯布局一样，只是处理中间栏部分内容被遮挡的问题解决方案不同：
在mian内部添加一个content，通过设置左右margin（左右两栏的宽度+间距margin）来避开遮挡

3.固定长宽div,在屏幕上垂直水平居中

3.1 flex布局

3.2 定位+translate

3.3 绝对定位 + margin

  3.3.1 固定宽高的情况

  3.3.2 不需要固定宽高

 

 4. Google Chrome如何支持小于12px的文字  

4.1 使用zoom 

例如： td{font-size:12px;zoom:0.83}

4.2 -webkit-transform:scale()

针对 chrome 浏览器，加 webkit 前缀，用 transform:scale() 这个属性进行放缩

注意的是，使用 scale 属性只对可以定义宽高的元素生效，所以下面代码中将 span 元素转为行内块元素

  5. 盒子模型