1.0 margin塌陷研究

当第一个子盒子作用在父盒子上，会形成高度的塌陷，使其脱离标准流。 解决margin塌陷问题方式：

给父元素加上 overflow:hidden
给父元素加上 border
给父元素加上 padding

2.0 盒模型大小

2.1 标准盒模型

盒子的大小由 border + padding + content

大部分的现代浏览器所默认的解析方式：box-sizing: content-box

2.2 IE盒模型（怪异盒模型）

盒子的大小 只有content => box-sizing: border-box；

<style>
  * {
     margin: 0;
 }
  
div {
     box-sizing: border-box;
}

div {
    margin:10px;
    border: 10px solid #ccc;
    padding:10px;
    width: 200px;
    height: 200px;
    background-color: orange;
 }
</style>

3.0 元素的显示与隐藏

3.1 重绘

由于节点的几何属性发生改变或者由于样式发生改变而不会影响布局的，称为重绘

例如outline, visibility, color、background-color等。

3.2 回流

是布局或者几何属性需要改变就称为回流

回流是影响浏览器性能的关键因素，因为其变化涉及到部分页面（或是整个页面）的布局更新

一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流

注意： 重绘不一定会影响回流，但是回流一定会影响重绘。

4.0 iconfont

iconfont就是字体图标的意思，通常在页面上使用一些小型图标的时候

我们就可以使用它，好处在于，它跟font系列的字体一样，可以设置大小,颜色等。

网页中，一些场景不需要我们耗费额外的网络请求去请求图片资源，使用小的图标就可以代替。

比如，京东的购物车图标以及查找的图标

现在最出名，使用最多的是阿里的iconfont

使用步骤：

打开阿里iconfont
注册一个账号
搜索你想要使用的图标并添加入库
点击右上角购物车
添加到项目，新建项目文件夹即可
下载到本地，并且将iconfont.css + tts + woff + woff2文件放到你得目录中
使用i标签加上class类名来调用icon, iconfont这个类名是固定的
使用link引入文件夹种的iconfont.css文件即可

i标签主要用于设置iconfont字体，且该标签是一个行内元素

iconfont和字体一样，具备颜色、大小等属性，可修改

注意： 如果要修改，则一定得保障link引入的资源前置

<body>
    <i class="iconfont icon-shanchu"></i>
    <i class="iconfont icon-icon"></i>
    <i class="iconfont icon-lajitong"></i>
</body>

5.0 布局

5.1 水平布局

如果子元素是 行内/行内块元素，给父元素加 text-align:center 就可以实现水平居中

如果子元素是块元素,则给子元素加 margin:0 auto;

如果子元素是块元素,则给子元素加 margin:0 auto;

总结：

如果想让最外层容器在页面中水平居中，因为属于body的儿子，所以使用margin:0 auto也可以

5.2 垂直布局

如果子元素是行内元素、行内块元素，可以在父元素身上添加 line-height 属性，可以实现子元素垂直居中

.container {
            width: 200px;
            height: 200px;
            background-color: pink;
            text-align: center;
            line-height: 200px;
        }

如果子元素是块元素，则给子元素加上 margin-top,

( 值为父元素的高度 - 子元素的高度) / 2就可以实现垂直居中 + margin: auto水平居中 => 水平+垂直居中的实现

5.3 空白问题

行内元素和行内块元素，换行的时候会产生一个空白的间隙

解决方式：

给父元素设置 font-size: 0, 再给需要显示的元素，单独设置字体大小即可

什么是盒模型？全攻略(上)