position(定位)
static(默认)：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分；行内元素则会创建一个或者多个框，置于其父元素中。
relative：元素框相对于之前正常的文档流中的位置发生偏移，并且原先的位置依旧被占据，发生偏移时，可能会覆盖其他的元素。
absolute：元素框不占有文档流的位置，并且相对于包含快进行偏移（这个包含快是指，最近一级外层元素position不为static的元素）。
fixed：元素框不占有文档流的位置，并且相对于视窗进行定位。
sticky：粘性定位，相当于relative和fixed的融合。
尺寸
%：百分比的参照物是父元素。
rem：相对于复杂的设计图相当有用。
em：是一个相对单位，相对于父元素的font-size。
盒子模型
每个元素都会形成矩形块。margin + border + padding + content
宽度默认的属性是auto，内部元素的长度自动充满父元素。
标准盒子模型：width = content的宽度
box-sizing：border-box时，width = border + padding + content
这里另外插入一个小小的居中内容，块级元素的水平居中只要将水平方向上的margin设置成auto就可以啦~垂直方向的居中就没有如此容易了，在后续的内容中，会有一篇关于居中的。
浮动
在我的理解中，浮动其实是为了实现文字的环绕特效，并不是为了布局而产生的。
这里介绍一些清除浮动的方法
1.将其的父级元素设置成：overflow:hidden;
2.after类：对于元素的after伪类进行设置；
3.写一个<div style="clear:both"></div>,置于改浮动元素之下。
布局
两栏布局：一栏定宽，一栏自适应。
三栏布局：两边定宽，中间width:auto，再加上margin来进行设定。
比如两边使用position：absolute来定位，width：200px；中间栏使用margin：0 200px来进行定位。
媒体查询
既然讲到布局，就不得不提媒体查询了，这是区别不同设备显示不同的利器
网友评论