<div> </div>本身是HTML4的标签，因其特殊性而一直作为CSS布局的核心标签。
<div> </div>本身默认样式极少(只有默认块级元素这一项)本身不具有太多默认的样式或属性，对CSS来说，可塑性极强，可以实现任何想要的效果。比如布局的一部分，或者模块之类的。
CSS会把所有标签都当成一个个的“盒子”，通过CSS所提供的相关属性能够实现任意标签的尺寸设置以及定位，由这些属性构成的体系就是盒模型。
width：设置盒子的内容宽度height：设置盒子的内容高度border：设置盒子的边框padding：设置内边距，即内容和border的距离。四个内边距可统一设置也可分别设置。margin：设置外边距，即设置盒子和另一个挨着的盒子之间的距离。同样，四个外边距可统一设置也可分别设置。
overflow:hidden即可防止给紧挨块级父元素的子标签设置margin-top时带跑其父标签。需要注意的是，盒子的总宽高不只是width或height，还包括padding、border和margin。这些属性也不仅可以作用于盒子，也可以作用于盒子中的元素。
和标准盒模型一样，使用一样的5个css属性来设置盒子的尺寸以及位置。
IE盒模型的padding和border是计 算在width和height中的，盒子的总宽高是width或height和margin。
在现代浏览器中，大多数标签都是默认用的标准盒模型，但仍可以用box-sizing 属性来切换，content-box为标准盒模型，border-box为IE盒模型。
需要注意的是，大部分元素都默认是content-box，但input、button元素默认border-box ，会导致尺寸问题。
传统的盒模型不能处理固定的标签或者带有层叠效果的标签布局，借助CSS中的position属性能够实现标签处于任意的位置，并且可以实现标签的层叠效果，在div+CSS布局中，CSS定位起到一个辅助作用。
static：默认定位，表示标签按照页面默认的布局方式进行定位。
fixed：固定定位
body作为位置参考，分别以top、left、right和bottom设置距离body标签上下左右的距离。absolute：绝对定位
与固定定位相比，绝对定位会随着页面滚动而滚动。
与固定定位相同，绝对定位标签会被视为“不占空间”，即类似播放器固定在最上层。
绝对定位的标签以已定位父标签作为位置参考，分别以top、left、right和bottom设置距离已定位父标签上下左右的距离(已定位父标签指postion为非static的父级标签或祖先标签。如果没有已定位父标签则会直接参考body标签进行定位)。
特殊用法
margin:auto;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
relative：相对定位
top、left、right和bottom设置距离原来位置上下左右的距离。z-index：用于控制定位标签的显示顺序，以数字为单位。默认级别为0，数字越大，层级越高，层级高的优先显示，可以设置为负数，但只对非static 的定位标签有效果，且子元素的显示层级受限于父元素的显示层级。
</body>之前。子绝父相
指HTML页面中标签的默认排列方式(从上往下、从左往右，行内和行内块级会同行显示，块级元素会独行显示)，默认情况下所有标签都处于文档流。
当我们给标签设置固定定位或绝对定位或浮动时，该标签会脱离文档流，不受文档流的限制，也不属于文档流。文档流的标签会忽略脱离文档流的标签，当成不存在。在页面中脱离文档流的标签会表现为浮在文档流上面，就可能会挡住文档流中的标签。
需要注意的是，相对定位没有脱离文档流，只不过可以借助top等四个位置属性改变自己的位置，也可以有层叠的效果。
90年代设计了CSS属性float来实现文字围绕图片的效果，译为浮动。目前在页面中表现为设置勒浮动的标签具有很多额外的特性，配合div可以实现页面布局，20年在国内普及的布局方式就是盒模型+浮动。
float: left | right |none(默认);
给受影响的非浮动标签设置CSS属性:clear。clear专门用于清除浮动标签带来的影响。
clear:left | right |both;
通过空白div添加clear属性将浮动元素和非浮动元素给分隔开。
通过< br clear="all" >将浮动元素和非浮动元素分隔开。
父元素添加伪元素可以动态添加一个子元素，完成清除浮动的操作。
当父标签高度自适应，子标签浮动时，因子标签脱离文档流，父标签认为没有该子标签，高度会塌陷。给父标签设置overflow:hidden;。
dispaly:inline-block和float的异同相同点：
不同点：
dispaly:inline-block需要考虑行内块级元素之间的空隙、垂直对齐。
display:inline-block标签会留在文档流，float标签会脱离文档流(因脱离文档流，float需注意父标签高度塌陷问题)。
float标签需考虑对其他非浮动标签的影响问题。
float标签换行需注意float标签高度要一致，不然有换行问题。
float可以直接实现右对齐或左对齐。
以CSS盒模型为核心，以div来设计和实现页面的一种布局技术。把页面所有内容都换分到不同的盒子中借助CSS盒模型完成页面布局。
对psd原稿进行切片
进行框架分析，确定页面大致有几个模块
实现框架
宽高
边框或背景
间距
从上往下依次填充模块内容以及对应的样式
细微调节
div+CSS布局没有自适应、大量时间花在水平或垂直居中、需要清理浮动。弹性布局是CSS第三代布局技术，具有自适应特点，用于替代div+CSS布局或起到辅助作用。弹性布局能够使元素适应不同的容器宽度，比如浏览器宽度，且可以实现内容快速的居中。
margin。给容器标签设置display:flex |inline-flex都可以将该容器变为弹性容器，通过设置弹性布局提供的CSS属性能够对弹性容器的直接子标签进行布局的控制。直接子标签也称为弹性子项目。
display:flex：其兄弟标签会将该弹性容器视作一个普通的块级元素。display:inline-flex：其兄弟标签会将该弹性容器视作一个普通的行内块级元素。另外，一般不会对弹性容器设置高度，因为自适应。
默认情况下，水平方向为其主轴，垂直方向为其侧轴。也可通过相关属性进行设置。
flex-direction：设置弹性容器的主轴，默认是row，即水平。
flex-direction:row | row-reserve | column | column-reserve;
row和row-reserve将主轴设置为水平，row-reserve是水平向左，侧轴是主轴的垂直方向。flex-wrap：对弹性容器设置是否允许直接子标签换行。
flex-wrap:nowrap | wrap;
justify-content：设置弹性子项目在主轴上的对齐方式(是给弹性容器设置)。
justify-content:center | flex-start | flex-end | space-between | space-around | space-evenly;
center：水平居中。flex-start：从主轴开头进行排列。flex-end：从主轴结尾处进行排列。space-between：弹性子项目中间均分主轴上的空余空间。space-around：弹性子项目两边均分主轴上的空余空间。space-evenly：弹性子项目所有空隙均分主轴上的空余空间。align-content：设置弹性子项目在侧轴上的对齐方式(是给弹性容器设置)。
align-content:center | flex-start | flex-end | space-between | space-around | space-evenly | stretch;
stretch，弹性子项目的默认高度就是弹性容器的高度。align-items：设置弹性子项目之间的对齐方式。
align-items:stretch | baseline | flex-end | flex-start | center;
stretch：当弹性子项目高度为auto或没设高度时，会自动拉伸高度，高度会刚好容得下内容。弹性空间指的是一个弹性子项目本身的尺寸与通过分配所得到的富余空间的总和。对主轴或侧轴的富余空间的处理不再是对齐，而是直接分配给弹性子项目作为其空间的一部分，间隙可使用margin。
相关CSS属性
flex-grow：弹性子项目的成长因子，简称弹性因子，指的是分配到赋予空间的 比例。弹性因子越大，分配的空间越多。给弹性子项目设置。如果因子都为1，那么富余空间平均分配。 如果因子不一样，那么直接按比例进行分配。order：能够改变某个弹性子项目的显示顺序。数字越小，显示越靠前。flex-shrink：控制弹性子项目的收缩比例，如果弹性子项目所需要的宽度超过了弹性容器的宽度，那么默认情况下，弹性子项目会收缩同样的尺寸来匹配弹性容器的宽度。如果某个子项目收缩比例大，那么被分摊的尺寸也更多，即会让出更多的空间(是给弹性子项目设置)。flex-basis：弹性子项目的默认宽度。