1.文档流： 1.1 原始文档流，也叫自然文档流。按照HTML结构来自然排版。 1.2 浮动文档流：通过float属性来控制布局。 1.3 定位文档流：通过定位CSS来控制布局。 2.浮动布局方式： 原始文档流布局，浮动文档流布局，定位文档流布局，盒模型布局。 3.浮动的原理： 3.1 一个元素添加float属性后，宽度变成实际内容的大小宽度。 3.2 一个元素浮动后，它在原来的位置，直接脱离了原始的文档流，变成了浮动的文档流，并且显示在原始文档流的上一层，会遮挡住原始文档流。 3.3 原始文档流中的文本内容，会受浮动元素的影响，跟随浮动元素显示（紧挨着浮动元素与浮动方向相反的一侧） 3.4 当所有子元素都浮动后，会导致父元素下没有原始文档流，父元素就没有内容撑起它的高度，那么高度就为0。 3.5 浮动塌陷会导致后面的内容，显示在父元素所在的位置，也就是显示在浮动元素的下层，被遮挡住。 4. 浮动的目的:让纵向排版的内容，实现横向排版。 5. 如何处理浮动塌陷的问题? 5.1 给父元素设置一个高度:height。 5.2让父元素也变成浮动元素;(float),同时后面一个原始文档流，需要使用clear来清楚浮动的影响。clear：left，right，both 5.3 父元素加overflow: hidden;（溢出隐藏，但浏览器是把父级高度修正为子元素高度） 5.4 让浮动元素后面的内容，加一个clear: left /right /both;浮动子元素的父元素仍然没有高度，还是塌陷状态，只是纠正了浏览器的显示问题。 6. 盒模型之padding:内留白，内边距 7. padding:top right bottom left; padding-top: padding-right: padding-bottom: padding-left: 8.display属性: 8.1none:隐藏元素; 8.2block:显示元素，转换成块级元素; 8.3inline:转换成内联元素;（不能设置width,height），不会独占一行 8.4inline-block:转换成内联的块级元素（能设置width,height） 9.盒子模型: 盒子模型是CSS布局一种布局的概念;它把一个块（容器）理解为以下CSS属性的构成: width，height， padding， border， margin这五个属性 计算公式:width+(padding+border+margin)*2 =总宽度 height+(padding+border+margin)*2=总高度 10．外边距离:设置元素与元素之间的距离，背景色和背景图片不会显示在margin所在区域。 margin:top right bottom lgft; margin:1参数（top right bottom left） margin:1参数参数;参数1(top bottom）参数2:(rightleft） margin:1参数（top）2参数(right）3参数(bottom);left ===> right margin:1参数（top）2参数(right)3参数(bottom）4参数（left） ; 11. border:边框 border: border-widthborder-style border-color; border-width:边框粗细， border-style:边框的样式，实线solid，虚线:dashed，点线:dotted 述框的大小，会影响盒模型的总宽度和总高度。 12.轮廓:渲染出边框的效果，但是不影响盒模型。 outline：1px solid red;
