知识点1：重置样式
因不同浏览器对标签的解析各不相同，重置css样式可以让标签在不同浏览器下产生相同的效果，减少默认样式可能带来的问题。
通常将重置样式写在reset.css中，如：
/*去掉边界与修改默认字体*/
知识点2：元素水平居中
1.对于行内元素：对父元素设置text-align:center；
2.对于定宽块级元素：设置左右margin为auto；
3.对于不定宽块级元素：设置position:absolute, left:50%, transform:translate(-50%, 0);
4.flex布局，justify-content:center；
知识点3：元素垂直居中
1.对于行内元素：设置父元素的line-height为父元素高度；
2.对于定高块级元素：设置margin-top或margin-bottom为(父元素高度-子元素高度)/2；
3.对于不定高块级元素：设置position:absolute, top:50%，transform:translate(0, -50%);
4.flex布局，align-items:center；
知识点4：两栏布局
（假定左侧固定宽度，右侧自适应）
方法1：双inline-block。将左右两个div均设为display:inline-block;，用vertical-align:top;来实现顶端对齐，对父容器设置font-size:0;来消除div间的空格；
方法2：双float。将左右两个div均设为float:left;（或者另一个为right）。由于应用了浮动，父元素需要清除浮动；
方法3：左float+右margin-left。左div设为float:left;，右div的margin-left设为左div的宽度。注意清除浮动；
方法4：左absolute+右 margin-left。左div设为position:absolute;，右div的margin-left设为左div的宽度。需修改父容器position为relative。
知识点5：三栏布局
（假定左右两侧为固定宽度，中间宽度自适应）
方法1：自身浮动法。左div左浮动，右div右浮动，中div的左右margin分别设为左右div的宽度。需要在html中将中div放最后；
方法2：绝对定位法。左div绝对定位于左上角，右div绝对定位于右上角，中div的左右margin分别设为左右div的宽度；
方法3：margin负值法。三栏均向左浮动，左div设margin-left:-100%，右div设margin-left为负的自身宽度，中div设width:100%。需要在html中将中div放最前。
知识点6：圣杯布局
定义：
1. header和footer占屏幕全部宽度，高度固定；
2. 中间contaier部分是一个三栏布局，left和right宽度固定，middle宽度自适应。
实现：
1.header和footer设width:100%；
2.中间的三栏布局用margin负值法来实现。会发现中间栏被左右两栏各覆盖了一部分内容；
3.给container设置padding-left和padding-right分别为左栏和右栏的宽度；
4.将左右两栏设置为相对定位，并将左栏left设为负左栏宽度，右栏right设为负右栏宽度。
参考：
<!DOCTYPE html>
知识点7：双飞翼布局
定义：双飞翼布局和圣杯布局的区别在于如何处理中间栏被遮挡的问题。
实现：中间栏中再放置一个div用于显示内容，其margin-left设为左边栏宽度，margin-right设为右边栏宽度。
其他：圣杯布局和双飞翼布局都使得中间栏在DOM结构上优先，以便先行渲染。
知识点8：弹性布局flex
弹性布局flex是2009年W3C提出的一种新布局，可以简便、响应式地实现各种页面布局，较新版本浏览器均支持flex。
只需设置display:flex即可将某元素设为flex容器，其所有子元素自动成为容器成员，称为flex项。flex项沿着两个轴main axis（主轴）和cross axis（交叉轴）来布局。
弹性布局有以下特点：
1.弹性布局的项目（item）默认没有间隔；
2.弹性布局默认不改变项目的宽度；
3.弹性布局默认改变项目的高度。如果项目没有显式指定高度，就将占据容器的所有高度；
4.弹性布局将使得子元素的float、clear和vertical-align属性失效。
容器属性有：
1.flex-direction：指定主轴方向。默认为row（从左到右排成一排），其他值有column（从上到下排成一排）、row-reverse和column-reverse；
2.flex-wrap：当项目在一条轴线上排不下时如何换行。默认为nowrap（不换行），其他值有wrap（换行）、wrap-reverse（换行且第一行在下方）；
3.justify-content：控制flex项在主轴上的对齐方式。默认为flex-start（开始处对齐），其他值有flex-end（结束处对齐）、center（在主轴居中）、space-around（沿着主轴均匀分布，并在两端都留有一点空间）、space-between（均匀分布但不会在两端留下空间）；
4.align-items：控制flex项在交叉轴上的对齐方式。默认为stretch（所有flex项沿着交叉轴方向拉伸以填充父容器），其他值有center（保持原有高度但会在交叉轴居中）、flex-start（顶边对齐且不拉伸）、flex-end（底边对齐且不拉伸）、center（居中且不拉伸）。
项目属性有：
1.order：改变flex项的位置而不影响到dom树里元素的顺序。默认为0，order大的项在显示顺序中更靠后；
2.flex-grow：放大比例，默认为0（不拉伸宽度），如果所有项目都为1，则它们将等分剩余空间（如果有的话）；
3.flex-shrink：缩小比例，默认为1（如果空间不足，项目将缩小），如果一个项目为0而其他项目为1，则空间不足时前者不缩小；
4.flex-basis：指定项目最小值，剩余的可用空间将根据分配比例共享。默认为auto（项目本来大小）；
5.flex是上述三个值的缩写，默认为0 1 auto；
6.align-self：用于单独对项目设置对齐方式，可覆盖align-items。默认继承父元素align-items，没有父元素则为stretch（高度自动拉伸），其他值同样有flex-start、flex-end、center。
应用案例：使用flex实现三栏布局
#知识点9：块级格式化上下文BFC
BFC全称“Block Formatting Context”, 即“块级格式化上下文”。BFC可以看作是隔离了的独立容器（渲染区域），容器里面的元素不会在布局上影响到外面的元素，相当于建立了一个隐形的边界。
触发BFC的常见条件有：float值不为none；overflow值不为visible；display值为inline-block、flex等；position值为absolute或fixed。
BFC应用1：自适应两栏布局。利用BFC渲染规则：BFC的区域不会与float box重叠。实现方法：左div左浮动，右div设置overflow:hidden。
BFC应用2：清除浮动。利用BFC渲染规则：计算BFC高度时，浮动元素也参与计算。实现方法：父div设置overflow:hidden。
597
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
