（1）盒模型（普通盒模型、怪异盒模型）
1、元素的content（内容）、padding(内边距)、border（边框）、margin（外边距）构成了CSS盒模型 2、IE盒模型和W3C盒模型 1）IE盒模型是怪异模式下的盒模型，W3C盒模型是标准模式下的盒模型； 2）IE盒模型的width/height包含了content的width/heigh+padding+border W3C盒模型的width/height只是content的width/height 3、CSS3中的box-sizing 不同的人有不同的习惯，在css3中增加了box-sizing：content-box（遵循W3C盒模型）| border-box（遵循ie盒模型）|inherit（该属性的值从父元素继承）
（2）如何让元素水平居中
1、绝对定位实现水平垂直居中：
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;注意： 1>对父元素要使用 position: relative; 对子元素要使用 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 缺一不可。 2>如果只要垂直居中，可以不写right: 0；left: 0; margin: auto; 可以换成 margin-top: auto; margin-bottom: auto; 3>如果只需要水平居中，top: 0; bottom: 0; 可以省略不写 margin: auto; 可以换成 margin-rihgt: auto; margin-left: auto; 。
2、确定高度的块级元素居中：
position：absolute;
top:50%;
margin-top:(自身高度的值的一半的负值)3、对不定高的div实现垂直居中 a、利用css3的弹性布局实现 在父元素的css样式中加入以下代码：
display：flex；
justify-center:center;
align-items：center；b、利用平移实现 在子组件中加入以下代码：
position：relative：
left:50%；
top:50%;
transform:translate(-50%,-50%);
-weikit-transform: translate(-50%,-50%);4、一段文本、一张图片水平居中 text-content:center; 图片是行内元素，在 ie, edge, chrome, firefox, opera 中对于 img 的默认显示方式是： display: inline; 5）块级元素水平居中，使用margin：auto； 6）单行文本垂直居中 ，让height和line-height相等 注意：当box-sizing:content-box时，line-height和height相等； 当box-sizing:border-box时，line-height=height-(padding-top)-(padding-bottom)-(border-top)-(border-bottom)四个值，也就是说line-height等于content的有效高度。
（3）浮动&清浮动
1、是什么浮动？ 浮动的元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。 2、为什么要清浮动？ 浮动会导致父元素的高度塌陷。当父元素不设置高度，由内容撑开时，浮动元素脱离了文档流，并不占据文档流的位置，父元素就不能被撑开，也就没有了高度。所以需要通过清浮动来解决父元素高度坍塌的问题。 3、清浮动的方式： 1）clear清除浮动 在浮动元素后面添加一个空的div，设置clear属性为both。 clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素，原理在被清除浮动的元素上面或者下面添加足够的清除空间。 2）clear清除浮动的最佳实践：利用伪类元素来清除有浮动的标签 IE8和非ie浏览器才支持：after，相当于在该元素后面添加了一个空元素，利用clear：both清除浮动。zoom可解决ie6、ie7的浮动问题。
<div class="box clearfix">
<div class="red"></div>
<div class="green"></div>
</div>
<style>
.clearfix::after{ //向元素的内容之后添加新内容
display: block;
content:'';
clear:both;
visibility:hidden;
height:0
}
.clearfix{
zoom:1;
}
</style>3）父级div定义overflow：hidden 原理：必须要定义width或zoom：1，同时不能定义高，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。
（4）圣杯布局和双飞翼布局
圣杯布局和双飞翼布局都是三栏布局，两边的盒子宽度固定，中间盒子宽度自适应。 1)圣杯布局 写结构时优先写中间盒子，因为中间盒子优先被渲染，设置其自适应，宽度设为100%。中间栏放在文档流前面以优先渲染。 注意：最好给body加一个最小宽度min-width 圣杯布局有个问题，就是当面板的main部分比两个子面板宽度小的时候，布局就会乱掉。
<body>
<div id="header">header</div>
<div id="container">
<div id="center">center</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
body{
min-550px;
}
#header{
background: black;
}
#footer{
background: black;
clear:both;
}
#center{
background: pink;
100%;
float:left;
}
#left{
background: greenyellow;
200px;
float:left;
margin-left: -100%;
position: relative;
left:-200px;
}
#right{
background: yellow;
150px;
float:left;
margin-left:-150px;
position: relative;
right:-150px;
}
#container{
padding-left:200px;
padding-right:150px;
}2）双飞翼布局
<body>
<div class="box">
<div class="main">
<div class="center">center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
<style>
*{margin:0;padding:0;}
body{
min-500px;
}
.main{
100%;
background: palevioletred;
float:left;
}
.left{
150px;
background: greenyellow;
float:left;
margin-left:-100%;
}
.right{
200px;
background: yellow;
float:left;
margin-left:-200px;
}
.center{
margin:0 200px 0 150px;
}
</style>