1、display: none; 与 visibility: hidden; 的区别
- 联系：它们都能让元素不可见
- 区别：
- `display:none`;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；`visibility: hidden`;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
- `display: none`;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；`visibility:hidden`;是继承属性，子孙节点消失由于继承了`hidden`，通过设置`visibility: visible`;可以让子孙节点显式
- 修改常规流中元素的`display`通常会造成文档重排。修改`visibility`属性只会造成本元素的重绘
- 读屏器不会读取`display: none;`元素内容；会读取`visibility: hidden`元素内容
2、css hack原理及常用hack
原理：利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。
- 常见的hack有
- 属性hack
- 选择器hack
- IE条件注释
3、link 与 @import 的区别
`link` 是`HTML`方式， `@import` 是`CSS`方式
- `link `最大限度支持并行下载，` @import` 过多嵌套导致串行下载，出现FOUC
- `link` 可以通过 `rel="alternate stylesheet"` 指定候选样式
- 浏览器对 `link` 支持早于` @import` ，可以使用 `@import` 对老浏览器隐藏样式
- `@import` 必须在样式规则之前，可以在`css`文件中引用其他文件
- 总体来说：`link`优于`@import`
4、CSS有哪些继承属性*
- 关于文字排版的属性如：
- `font`
- `word-break`
- `letter-spacing`
- `text-align`
- `text-rendering`
- `word-spacing`
- `white-space`
- `text-indent`
- `text-transform`
- `text-shadow`
- `line-height`
- `color`
- `visibility`
- `cursor`
5、display,float,position的关系
- 如果 `display` 为`none`，那么`position`和`float`都不起作用，这种情况下元素不产生框
- 否则，如果`position`值为`absolute`或者`fixed`，框就是绝对定位的，`float`的计算值为`none`，`display`根据下面的表格进行调整
- 否则，如果`float`不是`none`，框是浮动的，`display`根据下表进行调整
- 否则，如果元素是根元素，`display`根据下表进行调整
- 其他情况下`display`的值为指定值 总结起来：绝对定位、浮动、根元素都需要调整 `display`
6、外边距折叠(collapsing margins)
- 毗邻的两个或多个 `margin` 会合并成一个`margin`，叫做外边距折叠。规则如下：
- 两个或多个毗邻的普通流中的块元素垂直方向上的`margin`会折叠
- 浮动元素或`inline-block`元素或绝对定位元素的`margin`不会和垂直方向上的其他元素的margin折叠
- 创建了块级格式化上下文的元素，不会和它的子元素发生margin折叠
- 元素自身的`margin-bottom`和`margin-top`相邻时也会折
7、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
- 有两种， IE 盒子模型、W3C 盒子模型；
- 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
- 区 别： IE的content部分把 border 和 padding计算了进去;
8、CSS选择符有哪些？哪些属性可以继承？
- id选择器（ # myid）
- 类选择器（.myclassname）
- 标签选择器（div, h1, p）
- 相邻选择器（h1 + p）
- 子选择器（ul > li）
- 后代选择器（li a）
- 通配符选择器（ * ）
- 属性选择器（a[rel = "external"]）
- 伪类选择器（a:hover, li:nth-child）
- 可继承的样式： `font-size font-family color, UL LI DL DD DT`
- 不可继承的样式：`border padding margin width height `
9、CSS优先级算法如何计算？
- 优先级就近原则，同权重情况下样式定义最近者为准
- 载入样式以最后载入的定位为准
- 优先级为: `!important > id > class > tag` important 比 内联优先级高
10、CSS3新增伪类有那些？
```
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:after 在元素之前添加内容,也可以用来做清除浮动。
:before 在元素之后添加内容
:enabled
:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中
```
10、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
- 给`div`设置一个宽度，然后添加`margin:0 auto`属性
```
div{
width:200px;
margin:0 auto;
}
```
- 居中一个浮动元素
```
//确定容器的宽高 宽500 高 300 的层
//设置层的外边距
.div {
width:500px ; height:300px;//高度可以不设
margin: -150px 0 0 -250px;
position:relative; //相对定位
background-color:pink; //方便看效果
left:50%;
top:50%;
}
```
- 让绝对定位的div居中
```
position: absolute;
width: 1200px;
background: none;
margin: 0 auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
```
11、display有哪些值？说明他们的作用
- block 象块类型元素一样显示。
- none 缺省值。象行内元素类型一样显示。
- inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
- list-item 象块类型元素一样显示，并添加样式列表标记。
- table 此元素会作为块级表格来显示
- inherit 规定应该从父元素继承 display 属性的值
12、一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度
- 方案1：
`.sub { height: calc(100%-100px); }`
- 方案2：
`.container { position:relative; }`
`.sub { position: absolute; top: 100px; bottom: 0; }`
- 方案3：
`.container { display:flex; flex-direction:column; }`
`.sub { flex:1; }`
13、overflow: scroll 时不能平滑滚动的问题怎么处理？
- 监听滚轮事件，然后滚动到一定距离时用 jquery 的 animate 实现平滑效果。
14、display:inline-block 什么时候会显示间隙？
* 相邻的 inline-block 元素之间有换行或空格分隔的情况下会产生间距
* 非 inline-block 水平元素设置为 inline-block 也会有水平间距
* 可以借助 vertical-align:top; 消除垂直间隙
* 可以在父级加 font-size：0; 在子元素里设置需要的字体大小，消除垂直间隙
* 把 li 标签写到同一行可以消除垂直间隙，但代码可读性差
15、如果需要手动写动画，你认为最小时间间隔是多久？
- 16.7ms 多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔: 1s / 60 * 1000 ＝ 16.7ms
17、font-style 属性 oblique 是什么意思？
- font-style: oblique; 使没有 italic 属性的文字实现倾斜
18、让页面里的字体变清晰，变细用CSS怎么做？（IOS手机浏览器字体齿轮设置）
```css
-webkit-font-smoothing: antialiased;
```
19、怎么让Chrome支持小于12px 的文字？
```css
.shrink{
-webkit-transform:scale(0.8);
-o-transform:scale(1);
display:inline-block;
}
```
20、设置元素浮动后，该元素的 display 值会如何变化？
- 设置元素浮动后，该元素的 display 值自动变成 block
21、line-height 三种赋值方式有何区别？（带单位、纯数字、百分比）
* 带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
* 纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
* 百分比：将计算后的值传递给后代
22、你对 line-height 是如何理解的？
* line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离
* 如果一个标签没有定义 height 属性，那么其最终表现的高度是由 line-height 决定的
* 一个容器没有设置高度，那么撑开容器高度的是 line-height 而不是容器内的文字内容
* 把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中
* line-height 和 height 都能撑开一个高度，height 会触发 haslayout，而 line-height 不会
23、iOS safari 如何阻止“橡皮筋效果”？
```javascript
$(document).ready(function(){
var stopScrolling = function(event) {
event.preventDefault();
}
document.addEventListener('touchstart', stopScrolling, false);
document.addEventListener('touchmove', stopScrolling, false);
});
```
24、input [type=search] 搜索框右侧小图标如何美化？
```css
input[type="search"]::-webkit-search-cancel-button{
-webkit-appearance: none;
height: 15px;
width: 15px;
border-radius: 8px;
background:url("images/searchicon.png") no-repeat 0 0;
background-size: 15px 15px;
}
```
25、网站图片文件，如何点击下载？而非点击预览？
`<a href="logo.jpg" download>下载</a>`
`<a href="logo.jpg" download="网站LOGO" >下载</a>`
26、如何修改Chrome记住密码后自动填充表单的黄色背景？
- 产生原因：由于Chrome默认会给自动填充的input表单加上 input:-webkit-autofill 私有属性造成的
- 解决方案1：在form标签上直接关闭了表单的自动填充：autocomplete="off"
- 解决方案2：input:-webkit-autofill { background-color: transparent; }
27、::before 和 :after 中双冒号和单冒号有什么区别？
* 在 CSS 中伪类一直用 : 表示，如 :hover, :active 等
* 伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after
* 后来在CSS3中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类
* 由于低版本IE对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素
* 综上所述：::before 是 CSS3 中写伪元素的新语法； :after 是 CSS1 中存在的、兼容IE的老语法
28、伪元素和伪类的区别和作用？
- 伪元素 -- 在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。
- 它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：
```
p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}
```
- 伪类 -- 将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：
```
a:hover {color: #FF00FF}
p:first-child {color: red}
```
29、a标签上四个伪类的执行顺序是怎么样的？
```link > visited > hover > active```
- L-V-H-A love hate 用喜欢和讨厌两个词来方便记忆
30、什么是视差滚动效果，如何给每页做不同的动画？
* 视差滚动是指多层背景以不同的速度移动，形成立体的运动效果，具有非常出色的视觉体验
* 一般把网页解剖为：背景层、内容层和悬浮层。当滚动鼠标滚轮时，各图层以不同速度移动，形成视差的
* 实现原理
- 以 “页面滚动条” 作为 “视差动画进度条”
- 以 “滚轮刻度” 当作 “动画帧度” 去播放动画的
- 监听 mousewheel 事件，事件被触发即播放动画，实现“翻页”效果
31、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
* 响应式设计就是网站能够兼容多个终端，而不是为每个终端做一个特定的版本
* 基本原理是利用CSS3媒体查询，为不同尺寸的设备适配不同样式
* 对于低版本的IE，可采用JS获取屏幕宽度，然后通过resize方法来实现兼容：
```javascript
$(window).resize(function () {
screenRespond();
});
screenRespond();
function screenRespond(){
var screenWidth = $(window).width();
if(screenWidth <= 1800){
$("body").attr("class", "w1800");
}
if(screenWidth <= 1400){
$("body").attr("class", "w1400");
}
if(screenWidth > 1800){
$("body").attr("class", "");
}
}
```
32、全屏滚动的原理是什么？ 用到了CSS的那些属性？
* 原理类似图片轮播原理，超出隐藏部分，滚动时显示
* 可能用到的CSS属性：overflow:hidden; transform:translate(100%, 100%); display:none;
33、元素竖向的百分比设定是相对于容器的高度吗？
- 元素竖向的百分比设定是相对于容器的宽度，而不是高度
34、抽离样式模块怎么写，说出思路？
- CSS可以拆分成2部分：公共CSS 和 业务CSS：
- 网站的配色，字体，交互提取出为公共CSS。这部分CSS命名不应涉及具体的业务
- 对于业务CSS，需要有统一的命名，使用公用的前缀。可以参考面向对象的CSS
35、margin和padding分别适合什么场景使用？
* 需要在border外侧添加空白，且空白处不需要背景（色）时，使用 margin
* 需要在border内测添加空白，且空白处需要背景（色）时，使用 padding
36、在网页中的应该使用奇数还是偶数的字体？
- 在网页中的应该使用“偶数”字体：
* 偶数字号相对更容易和 web 设计的其他部分构成比例关系
* 使用奇数号字体时文本段落无法对齐
* 宋体的中文网页排布中使用最多的就是 12 和 14
37、CSS如何计算选择器优先？
* 相同权重，定义最近者为准：行内样式 > 内部样式 > 外部样式
* 含外部载入样式时，后载入样式覆盖其前面的载入的样式和内部样式
* 选择器优先级: 行内样式[1000] > id[100] > class[10] > Tag[1]
* 在同一组属性设置中，!important 优先级最高，高于行内样式
38、CSS3新增伪类有哪些？
- :root 选择文档的根元素，等同于 html 元素
- :empty 选择没有子元素的元素
- :target 选取当前活动的目标元素
- :not(selector) 选择除 selector 元素意外的元素
- :enabled 选择可用的表单元素
- :disabled 选择禁用的表单元素
- :checked 选择被选中的表单元素
- :after 在元素内部最前添加内容
- :before 在元素内部最后添加内容
- :nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n
- :nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数
- :nth-child(odd)
- :nth-child(even)
- :nth-child(3n+1)
- :first-child
- :last-child
- :only-child
- :nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n
- :nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数
- :nth-of-type(odd)
- :nth-of-type(even)
- :nth-of-type(3n+1)
- :first-of-type
- :last-of-type
- :only-of-type
- ::selection 选择被用户选取的元素部分
- :first-line 选择元素中的第一行
- :first-letter 选择元素中的第一个字符
39、请列举几种隐藏元素的方法
* visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在
* opacity: 0; CSS3属性，设置0可以使一个元素完全透明
* position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外
* display: none; 元素会变得不可见，并且不会再占用文档的空间。
* transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留
* `<div hidden="hidden">` HTML5属性,效果和display:none;相同，但这个属性用于记录一个元素的状态
* height: 0; 将元素高度设为 0 ，并消除边框
* filter: blur(0); CSS3属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中
40、rgba() 和 opacity 的透明效果有什么不同？
* opacity 作用于元素以及元素内的所有内容（包括文字）的透明度
* rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果
41、css 属性 content 有什么作用？
- content 属性专门应用在 before/after 伪元素上，用于插入额外内容或样式
42、CSS3有哪些新特性？
- 新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
- 弹性盒模型 display: flex;
- 多列布局 column-count: 5;
- 媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
- 个性化字体 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
- 颜色透明度 color: rgba(255, 0, 0, 0.75);
- 圆角 border-radius: 5px;
- 渐变 background:linear-gradient(red, green, blue);
- 阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
- 倒影 box-reflect: below 2px;
- 文字装饰 text-stroke-color: red;
- 文字溢出 text-overflow:ellipsis;
- 背景效果 background-size: 100px 100px;
- 边框效果 border-image:url(bt_blue.png) 0 10;
- 转换
- 旋转 transform: rotate(20deg);
- 倾斜 transform: skew(150deg, -10deg);
- 位移 transform: translate(20px, 20px);
- 缩放 transform: scale(.5);
- 平滑过渡 transition: all .3s ease-in .1s;
- 动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
43、请解释一下 CSS3 的 Flexbox（弹性盒布局模型）以及适用场景？
- Flexbox 用于不同尺寸屏幕中创建可自动扩展和收缩布局
44、经常遇到的浏览器的JS兼容性有哪些？解决方法是什么？
* 当前样式：getComputedStyle(el, null) VS el.currentStyle
* 事件对象：e VS window.event
* 鼠标坐标：e.pageX, e.pageY VS window.event.x, window.event.y
* 按键码：e.which VS event.keyCode
* 文本节点：el.textContent VS el.innerText
45、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
* 外边距重叠就是 margin-collapse
* 相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。
这种合并外边距的方式被称为折叠，结合而成的外边距称为折叠外边距
* 折叠结果遵循下列计算规则：
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
- 两个外边距一正一负时，折叠结果是两者的相加的和
46、请写出多种等高布局
* 在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假像
* 模仿表格布局等高列效果：兼容性不好，在ie6-7无法正常运行
* css3 flexbox 布局： .container{display: flex; align-items: stretch;}
47、css垂直居中的方法有哪些？
* 如果是单行文本, line-height 设置成和 height 值
```
.vertical {
height: 100px;
line-height: 100px;
}
```
* 已知高度的块级子元素，采用绝对定位和负边距
```
.container {
position: relative;
}
.vertical {
height: 300px; /*子元素高度*/
position: absolute;
top:50%; /*父元素高度50%*/
margin-top: -150px; /*自身高度一半*/
}
```
* 未知高度的块级父子元素居中，模拟表格布局
* 缺点：IE67不兼容，父级 overflow：hidden 失效
```
.container {
display: table;
}
.content {
display: table-cell;
vertical-align: middle;
}
```
* 新增 inline-block 兄弟元素，设置 vertical-align
- 缺点：需要增加额外标签，IE67不兼容
```
.container {
height: 100%;/*定义父级高度，作为参考*/
}
.extra .vertical{
display: inline-block; /*行内块显示*/
vertical-align: middle; /*垂直居中*/
}
.extra {
height: 100%; /*设置新增元素高度为100%*/
}
```
* 绝对定位配合 CSS3 位移
```
.vertical {
position: absolute;
top:50%; /*父元素高度50%*/
transform:translateY(-50%, -50%);
}
```
* CSS3弹性盒模型
```
.container {
display:flex;
justify-content: center; /*子元素水平居中*/
align-items: center; /*子元素垂直居中*/
}
```
48、圣杯布局的实现原理？
* 要求：三列布局；中间主体内容前置，且宽度自适应；两边内容定宽
* 好处：重要的内容放在文档流前面可以优先渲染
* 原理：利用相对定位、浮动、负边距布局，而不添加额外标签
```css
.container {
padding-left: 150px;
padding-right: 190px;
}
.main {
float: left;
width: 100%;
}
.left {
float: left;
width: 190px;
margin-left: -100%;
position: relative;
left: -150px;
}
.right {
float: left;
width: 190px;
margin-left: -190px;
position: relative;
right: -190px;
}
```
49、什么是双飞翼布局？实现原理？
- 双飞翼布局：对圣杯布局（使用相对定位，对以后布局有局限性）的改进，消除相对定位布局
- 原理：主体元素上设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位，消除相对定位。
```css
.container {
/*padding-left:150px;*/
/*padding-right:190px;*/
}
.main-wrap {
width: 100%;
float: left;
}
.main {
margin-left: 150px;
margin-right: 190px;
}
.left {
float: left;
width: 150px;
margin-left: -100%;
/*position: relative;*/
/*left:-150px;*/
}
.right {
float: left;
width: 190px;
margin-left: -190px;
/*position:relative;*/
/*right:-190px;*/
}
```
48、在CSS样式中常使用 px、em 在表现上有什么区别？
* px 相对于显示器屏幕分辨率，无法用浏览器字体放大功能
* em 值并不是固定的，会继承父级的字体大小： em = 像素值 / 父级font-size
49、为什么要初始化CSS样式？
* 不同浏览器对有些标签样式的默认值解析不同
* 不初始化CSS会造成各现浏览器之间的页面显示差异
* 可以使用 reset.css 或 Normalize.css 做 CSS 初始化
50、解释下什么是浮动和它的工作原理？
* 非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。
此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。
* 工作原理：
- 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
- 浮动元素碰到包含它的边框或者其他浮动元素的边框停留
51、浮动元素引起的问题？
* 父元素的高度无法被撑开，影响与父元素同级的元素
* 与浮动元素同级的非浮动元素会跟随其后
52、列举几种清除浮动的方式？
* 添加额外标签，例如 `<div style="clear:both"></div>`
* 使用 br 标签和其自身的 clear 属性，例如 `<br clear="all" />`
* 父元素设置 overflow：hidden; 在IE6中还需要触发 hasLayout，例如zoom：1;
* 父元素也设置浮动
* 使用 :after 伪元素。由于IE6-7不支持 :after，使用 zoom:1 触发 hasLayout
53、清除浮动最佳实践（after伪元素闭合浮动）：
```
.clearfix:after{
content: "\200B";
display: table;
height: 0;
clear: both;
}
.clearfix{
*zoom: 1;
}
```
54、什么是 FOUC(Flash of Unstyled Content)？ 如何来避免 FOUC？
* 当使用 @import 导入 CSS 时，会导致某些页面在 IE 出现奇怪的现象：
没有样式的页面内容显示瞬间闪烁，这种现象称为“文档样式短暂失效”，简称为FOUC
* 产生原因：当样式表晚于结构性html加载时，加载到此样式表时，页面将停止之前的渲染。
* 等待此样式表被下载和解析后，再重新渲染页面，期间导致短暂的花屏现象。
* 解决方法：使用 link 标签将样式表放在文档 head
55、介绍使用过的 CSS 预处理器？
* CSS 预处理器基本思想：为 CSS 增加了一些编程的特性（变量、逻辑判断、函数等）
* 开发者使用这种语言进行进行 Web 页面样式设计，再编译成正常的 CSS 文件使用
* 使用 CSS 预处理器，可以使 CSS 更加简洁、适应性更强、可读性更佳，无需考虑兼容性
* 最常用的 CSS 预处理器语言包括：Sass（SCSS）和 LESS
56、CSS优化、提高性能的方法有哪些？
* 多个css合并，尽量减少HTTP请求
* 将css文件放在页面最上面
* 移除空的css规则
* 避免使用CSS表达式
* 选择器优化嵌套，尽量避免层级过深
* 充分利用css继承属性，减少代码量
* 抽象提取公共样式，减少代码量
* 属性值为0时，不加单位
* 属性值为小于1的小数时，省略小数点前面的0
* css雪碧图
57、浏览器是怎样解析CSS选择器的？
- 浏览器解析 CSS 选择器的方式是从右到左
58、谈一谈你对CSS盒模型的认识
> 专业的面试，一定会问 `CSS` 盒模型。对于这个题目，我们要回答一下几个方面：
1. 基本概念：`content`、`padding`、`margin`
2. 标准盒模型、`IE`盒模型的区别。不要漏说了`IE`盒模型，通过这个问题，可以筛选一部分人
3. `CSS`如何设置这两种模型（即：如何设置某个盒子为其中一个模型）？如果回答了上面的第二条，还会继续追问这一条。
4. `JS`如何设置、获取盒模型对应的宽和高？这一步，已经有很多人答不上来了。
5. 实例题：根据盒模型解释**边距重叠**。
> 前四个方面是逐渐递增，第五个方面，却鲜有人知。
6. `BFC`（边距重叠解决方案）或`IFC`。
> 如果能回答第五条，就会引出第六条。`BFC`是面试频率较高的。
**总结**：以上几点，从上到下，知识点逐渐递增，知识面从理论、`CSS`、`JS`，又回到`CSS`理论
接下来，我们把上面的六条，依次讲解。
**标准盒模型和IE盒子模型**
标准盒子模型：
`IE`盒子模型：
上图显示：
> 在 `CSS` 盒子模型 (`Box Model`) 规定了元素处理元素的几种方式：
- `width`和`height`：**内容**的宽度、高度（不是盒子的宽度、高度）。
- `padding`：内边距。
- `border`：边框。
- `margin`：外边距。
> `CSS`盒模型和`IE`盒模型的区别：
- 在**标准盒子模型**中，**width 和 height 指的是内容区域**的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
- **IE盒子模型**中，**width 和 height 指的是内容区域+border+padding**的宽度和高度。
**CSS如何设置这两种模型**
代码如下：
```javascript
/* 设置当前盒子为 标准盒模型（默认） */
box-sizing: content-box;
/* 设置当前盒子为 IE盒模型 */
box-sizing: border-box;
```
> 备注：盒子默认为标准盒模型。
**JS如何设置、获取盒模型对应的宽和高**
> 方式一：通过`DOM`节点的 `style` 样式获取
```js
element.style.width/height;
```
> 缺点：通过这种方式，只能获取**行内样式**，不能获取`内嵌`的样式和`外链`的样式。
这种方式有局限性，但应该了解。
> 方式二（通用型）
```js
window.getComputedStyle(element).width/height;
```
> 方式二能兼容 `Chrome`、火狐。是通用型方式。
> 方式三（IE独有的）
```javascript
element.currentStyle.width/height;
```
> 和方式二相同，但这种方式只有IE独有。获取到的即时运行完之后的宽高（三种css样式都可以获取）。
> 方式四
```javascript
element.getBoundingClientRect().width/height;
```
> 此 `api` 的作用是：获取一个元素的绝对位置。绝对位置是视窗 `viewport` 左上角的绝对位置。此 `api` 可以拿到四个属性：`left`、`top`、`width`、`height`。
**总结：**
> 上面的四种方式，要求能说出来区别，以及哪个的通用型更强。
**margin塌陷/margin重叠**
**标准文档流中，竖直方向的margin不叠加，只取较大的值作为margin**(水平方向的`margin`是可以叠加的，即水平方向没有塌陷现象)。
> PS：如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有`margin`重叠的现象的。
> 我们来看几个例子。
**兄弟元素之间**
如下图所示：
**子元素和父元素之间**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
background: green;
}
/* 给儿子设置margin-top为10像素 */
.son {
height: 100px;
margin-top: 10px;
background: red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
```
> 上面的代码中，儿子的`height`是 `100p`x，`magin-top` 是`10px`。注意，此时父亲的 `height` 是`100`，而不是`110`。因为儿子和父亲在竖直方向上，共一个`margin`。
儿子这个盒子：
父亲这个盒子：
> 上方代码中，如果我们给父亲设置一个属性：`overflow: hidden`，就可以避免这个问题，此时父亲的高度是110px，这个用到的就是BFC（下一段讲解）。
**善于使用父亲的padding，而不是儿子的margin**
> 其实，这一小段讲的内容与上一小段相同，都是讲父子之间的margin重叠。
我们来看一个奇怪的现象。现在有下面这样一个结构：（`div`中放一个`p`）
```html
<div>
<p></p>
</div>
```
> 上面的结构中，我们尝试通过给儿子`p`一个`margin-top:50px;`的属性，让其与父亲保持50px的上边距。结果却看到了下面的奇怪的现象：
> 此时我们给父亲`div`加一个`border`属性，就正常了：
> 如果父亲没有`border`，那么儿子的`margin`实际上踹的是“流”，踹的是这“行”。所以，父亲整体也掉下来了。
**margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。**
> 所以，如果要表达父子之间的距离，我们一定要善于使用父亲的padding，而不是儿子的`margin。
**BFC（边距重叠解决方案）**
> `BFC（Block Formatting Context）`：块级格式化上下文。你可以把它理解成一个独立的区域。
另外还有个概念叫`IFC`。不过，`BFC`问得更多。
**BFC 的原理/BFC的布局规则【非常重要】**
> `BFC` 的原理，其实也就是 `BFC` 的渲染规则（能说出以下四点就够了）。包括：
1. BFC **内部的**子元素，在垂直方向，**边距会发生重叠**。
2. BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。（稍后看`举例1`）
3. **BFC区域不与旁边的`float box`区域重叠**。（可以用来清除浮动带来的影响）。（稍后看`举例2`）
4. 计算`BFC`的高度时，浮动的子元素也参与计算。（稍后看`举例3`）
**如何生成BFC**
> 有以下几种方法：
- 方法1：`overflow`: 不为`visible`，可以让属性是 `hidden`、`auto`。【最常用】
- 方法2：浮动中：`float`的属性值不为`none`。意思是，只要设置了浮动，当前元素就创建了`BFC`。
- 方法3：定位中：只要`posiiton`的值不是 s`tatic`或者是`relative`即可，可以是`absolute`或`fixed`，也就生成了一个`BFC`。
- 方法4：`display`为`inline-block`, `table-cell`, `table-caption`, `flex`, `inline-flex`
**BFC 的应用**
**举例1：**解决 margin 重叠
> 当父元素和子元素发生 `margin` 重叠时，解决办法：**给子元素或父元素创建BFC**。
比如说，针对下面这样一个 `div` 结构：
```html
<div class="father">
<p class="son">
</p>
</div>
```
> 上面的`div`结构中，如果父元素和子元素发生`margin`重叠，我们可以给子元素创建一个 `BFC`，就解决了：
```html
<div class="father">
<p class="son" style="overflow: hidden">
</p>
</div>
```
> 因为**第二条：BFC区域是一个独立的区域，不会影响外面的元素**。
**举例2**：BFC区域不与float区域重叠：
针对下面这样一个div结构；
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father-layout {
background: pink;
}
.father-layout .left {
float: left;
width: 100px;
height: 100px;
background: green;
}
.father-layout .right {
height: 150px; /*右侧标准流里的元素，比左侧浮动的元素要高*/
background: red;
}
</style>
</head>
<body>
<section class="father-layout">
<div class="left">
左侧，生命壹号
</div>
<div class="right">
右侧，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，
</div>
</section>
</body>
</html>
```
效果如下：
> 上图中，由于右侧标准流里的元素，比左侧浮动的元素要高，导致右侧有一部分会跑到左边的下面去。
**如果要解决这个问题，可以将右侧的元素创建BFC**，因为**第三条：BFC区域不与`float box`区域重叠**。解决办法如下：（将right区域添加overflow属性）
```html
<div class="right" style="overflow: hidden">
右侧，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，
</div>
```
上图表明，解决之后，`father-layout`的背景色显现出来了，说明问题解决了。
**举例3：**清除浮动
现在有下面这样的结构：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
background: pink;
}
.son {
float: left;
background: green;
}
</style>
</head>
<body>
<section class="father">
<div class="son">
生命壹号
</div>
</section>
</body>
</html>
```
效果如下：
上面的代码中，儿子浮动了，但由于父亲没有设置高度，导致看不到父亲的背景色（此时父亲的高度为0）。正所谓**有高度的盒子，才能关住浮动**。
> 如果想要清除浮动带来的影响，方法一是给父亲设置高度，然后采用隔墙法。方法二是 BFC：给父亲增加 `overflow=hidden`属性即可， 增加之后，效果如下：
> 为什么父元素成为BFC之后，就有了高度呢？这就回到了**第四条：计算BFC的高度时，浮动元素也参与计算**。意思是，**在计算BFC的高度时，子元素的float box也会参与计算**
54、