- 查看Demo
盒模型
- 一张图看懂盒模型
getImage.jpg
- 默认情况下，一个盒子宽度会由边框长度（border），内边距（padding）以及宽度（width）决定，而当我们把box-sizing设置为border-box以后，一个盒子的宽度，就会只由宽度（width）决定了
浮动 float
- 为什么使用float？
- 我们知道，如果在不使用定位的情况下，元素默认定位
static，即所有文档都在文档流以内，由上到下进行排列，而当我们想要创造出多列布局的时候，就必须要由元素脱离文档流进行排列，此时可以想到的要么改变其position，要么则用float，在css3属性当中，新增添的flex属性同样可以达到多列布局的效果。 - 有时候我们需要一个元素脱离文档流，然后把它安放在容器的左端或者右端，并且其他文本和行内元素围绕它安放。
- 可以取的值包括
left,right,none
- 我们知道，如果在不使用定位的情况下，元素默认定位
- 浮动元素如何定位？
- 当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移到碰到了所处的容器的边框，或者碰到了另外一个浮动的元素。
- 如果由多个元素浮动，例如向左，那么它们会从左到右依次排开，直到填满一整行，然后往下一行填。
- 清除浮动
- 什么是清除浮动？为什么要清除？我们知道当一个元素脱离文档流后，往往下一个元素会与之重叠，这个时候就需要加一点css属性来达到清除浮动的效果
-
clear:both会使得元素不再与浮动元素重叠，但是如果不符合块格式化上下文block formatting context的话，如包含多个浮动属性，就会使元素出现浮动元素的下方，但是假如我们的目的时创造多列布局，则应该使用另外一种属性overflow:auto或者overflow:hidden，利用这个可以达到容器伸展的效果 - 除此之外，我在网易云课堂学习的时候，由另外一种方法可以清除浮动，利用的时在元素后面的
:after创造一个不可见的内容只为一个小点的容器来清除浮动.clearfix:after{content:'.';display: block;clear: both;height: 0;overflow: hidden;visibility: hidden;}
创建多列布局的效果
-
利用BFC原理（即块级格式化上下文）
- 原理是，先渲染浮动在左右两边的block元素，最后再渲染中间的block元素，并设置为
overflow:hidden使得可以顺利撑开自适应并且插入其中。 -
html部分
getImage.png -
css部分
getImage-1.png
- 原理是，先渲染浮动在左右两边的block元素，最后再渲染中间的block元素，并设置为
-
双飞翼布局
- 双飞翼布局主要利用了浮动、负边距、相对定位三个布局属性，使三列布局就像小鸟一样，拥有中间的身体和两侧的翅膀，并且浏览器兼容性非常好，带IE6。
-
首先有如下所示布局
getImage-2.png -
首先我们将中间元素放在文档流最前面优先渲染，然后使其向左浮动，并设置 width 为 100%
getImage-3.png -
此时中间元素撑满整个页面，然后给小鸟加上双翼，将左右两列元素均设为左浮动，然后通过调整负边距将其定位在各自的位置上
getImage-4.png -
此时会发现，中间元素的虽然撑开了，但是会和左右两边重叠，那怎么办呢？只需要在中间裹上一层元素就可以解决这个问题了，完成以后，调整左右边距便可以达到我们想要的效果。
getImage-4
-
flex布局
- flex可以用来制作弹性布局，方法很简单，在主容器设置
display:flex，在需要自适应的部分依比例将flex值设置为1，2，3等整数即可，具体demo可以查看MDN - 缺点时兼容性不太好
- flex可以用来制作弹性布局，方法很简单，在主容器设置
