深入css布局
深入css布局（1）—— 盒模型
在css的发展历程中，有两种版本的盒模型，一个叫IE盒模型（又叫怪异盒模型），一个叫W3C标准盒模型，在早期的微软出的IE浏览器中采用的是自己的盒模型标准成为IE盒模型或者叫怪异盒模型(此模型只会出现在IE5.5及其更早的版本中。只要为文档设置一个DOCTYPE，就会使得IE遵循标准兼容模式的方式工作
)。
IE5.5及更早的版本使用的是IE盒模型，后来微软也慢慢转向了W3C的标准，在IE6以后支持了W3C标准盒模型。在我们现在的主流浏览器里面默认都是使用w3c标准盒模型。
1、css盒子模型概念
CSS css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。
1.1标准盒子模型
图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框（border），然后最外层是外边距（margin），整个构成了框模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其他元素。
元素框的总宽度 = 元素（element）的width + padding + margin +border；
元素框的总高度 = 元素（element）的height + padding +margin +border。
CSS中的宽（width）=内容（content）的宽
CSS中的高（height）=内容（content）的高
1.2 IE盒子模型
CSS中的宽（width）=内容（content）的宽+（border+padding）
CSS中的高（height）=内容（content）的高+（border+padding）
2、css 外边距合并（叠加）
两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值，如图：
比较容易理解，所以在页面中有时候遇到实际情况是需要考虑这个因素的。当然外边距合并其实也有存在的意义，如下图：
需要注意的是：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
注意点：许多浏览器都有自己默认的margin和padding值，我们可以通过将元素的margin和padding设置为0来覆盖原本的浏览器样式。
* {
margin: 0;
padding: 0;
}
3、box-sizing属性介绍
box-sizing属性是用户界面属性里的一种，之所以介绍它，是因为这个属性跟盒子模型有关，而且在css reset中有可能会用到它。
box-sizing : content-box|border-box|inherit;
(1) content-box ,默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。
即总宽度=margin+border+padding+width
(2) border-box , 设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容
即总宽度=margin+width
很多CSS框架，都会对盒子模型的计算方法进行简化。
(3) inherit , 规定应从父元素继承 box-sizing 属性的值
关于border-box的使用：
1 一个box宽度为100%，又想要两边有内间距，这时候用就比较好
2 全局设置 border-box 很好，首先它符合直觉，其次它可以省去一次又一次的加加减减，它还有一个关键作用——让有边框的盒子正常使用百分比宽度。
深入css布局（2）——元素分类
1.1块级元素 & 行内元素 & 行内块级元素
元素除了自己的盒模型外还有自己的分类。从元素的布局特性来分，主要可以分为三类元素：块级元素，行内元素，行内块级元素。
接下来看下他们的定义：
块级元素：display属性取block、table、flex、grid和list-item的元素。
行内级元素：display属性取inline的元素。
行内块级元素：display属性取inline-block、inline-table、inline-flex和inline-grid的元素
每个元素初始都会带有一些样式属性，例如：div默认的display是block，span的display是inline。我们可以在css中设置他们的display属性去改变他们的类型。
1.1.1块级元素
1.独占一行显示（width默认为100%，height为0）；
2.可以设置尺寸属性（width、height等）；
常见的块级元素有：div、p、h1~h6、ul、li、ol、dd、dt、dl、table、hr、blockquote、address、pre、menu
1.1.2 行内元素
1.一行可以显示多个；
2. 元素的高度、宽度及顶部和底部边距不可设置；
3. 元素的宽度就是它包含的文字或图片的宽度，不可改变
4. 内联元素之间的间距问题：当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。解决方法：写在一行，之间不要有空格之类的符号。
常见的行内元素有：span、img、input、a、label、button、select、textarea、sup、sub、abbr、s、i、em、u、strong、small
1.1.3行内块级元素
1、和其他元素都在一行上；（而块状元素是另起一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
如果想让一个元素可以设置宽度高度，又让它以行内形式显示，我们可以设置display的值为inline-block。
在CSS中是有三种定位机制的：普通文档流、浮动和绝对定位
深入css布局（3）—— 元素的定位与浮动
上篇我们讲解了不同类型元素的特点，我们可以随意的排列组合他们来达到我们想要的效果。但是他们都是基于一个二维平面的，如果我们想在布局中有遮挡，重叠之类的更丰富效果，我们就需要使用到定位和浮动的相关知识。
1.文档流
文档流就是按照页面元素书写的顺序，将页面元素按从左到右，从上至下的一般顺序行排列。那么也就可以理解成我们刚才所说的一个二维平面的概念。
那么如果我想要实现更丰富的效果，就需要脱离文档流，在一个新的平面上去显示，这样我们就可以在屏幕上有多个平面叠加显示的效果了，那么这就是浮动和定位的工作了。
2.定位描述
用position属性将一个元素相对于它或者它的祖先元素甚至是浏览器窗口通过top、left、right、bottom属性进行偏移，根据position属性的值，元素可以分为静态定位元素static（默认值）、相对定位元素relative、绝对定位元素absolute和固定定位元素fixed。
2.1相对定位
1.元素根据其在当前文档流所在位置作为参考系，进行偏移。
2.设置相对定位之后原来元素在文档流中的位置会被空出来，不会被其他元素所占据。
2.2绝对定位
1.元素会将其带有position为非static的祖先元素作为参考系进行偏移。
2.如果祖先元素里没有带有position为非static的，则会以body作为参考系。
3.定位后，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
2.3 fixed固定定位
1. 固定的参照对像是可视窗口而并非是body或是父级元素，fixed定位的元素不会随着窗口的滚动而滚动。
2.跟absolute定位一样，定位后，原来在文档流中占据的位置，会被其他元素所占据。
3.浮动
3.1什么是 CSS Float（浮动）？
CSS的Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
float: left | right | none | inherit
当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
3.2清除浮动
首先为什么要清除浮动？
由于浮动元素会脱离文档流显示，所以在浮动元素后面的块级元素会默认占据这些元素的位置，就会造成这些块级元素会在浮动元素的下层显示，出现浮动元素盖住后面正常文档流元素的效果，但这往往不是我们想要的结果。
其作用是改变 使用清除浮动的这个元素 与 前一个声明的浮动元素 之间的默认布局规则，让 使用清除浮动的这个元素 在新的一行中显示。
如何清除浮动？
clear属性，其值为left | right | both。
浮动元素或者非浮动元素的块级元素都可以使用这个属性来清除浮动（我们之前说inline和inline-block元素可以自动识别浮动，所以他们不需要清除浮动）， 他们的作用对象是前一个声明的浮动元素。如果使用 clear:left | right 则是清除前一个float为left或者right的元素的浮动，clear：both则是清除前一个浮动元素，无论它是向哪边移动。那么使用clear属性的元素会在浮动元素的下方新开一行显示。
清除浮动的特殊作用
清除浮动可以解决父元素高度塌陷问题。当一个元素包裹了一些float元素的时候，由于float元素脱离文档流显示，所以父元素无法被这些元素撑开高度，导致父元素高度为0。
那么最常用的一种解决方案是：设置父元素的after伪元素的clear属性 来让其撑开父元素的高度。
.clearfix:after,
.clearfix::after{
content: " ";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
· 当我们没有设置clearfix的after伪元素时，会发现clearfix的高度为0，只有边框会显示出来。我们通过设置clearfix的after伪元素来让我们在不需要新增标签的情况下就可以清除掉浮动，并且clearfix类还可以复用。
注意点：
· content和display属性会将after伪元素渲染出来，加上clear: both实现一个真实标签清除浮动的效果。
· 在一般浏览器中不设置visibility和height是没有问题的，但为了增加代码健壮性和规范性，建议加上。
· :after 和 ::after的区别：:after的写法是css2的，可以兼容到IE8，::after的写法是css3中规定的，用以区分伪类(:hover)和伪元素(::before)。
在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点
相关学习站点：
https://www.runoob.com/css/css-boxmodel.html
http://www.w3school.com.cn/
