（1）有两种， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
（3）区 别： IE的content部分把 border 和 padding计算了进去;
优先级:
同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）>外部样式表（外部文件中）。
!important > id > class > tag
important 比 内联优先级高
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素
::after 在元素尾部添加内容,也可以用来做清除浮动
::before 在元素头部添加内容
:enabled 匹配每个已启用的元素
:disabled 控制表单控件的禁用状态
:checked 单选框或复选框被选中
（1）水平居中：给div设置一个宽度，然后添加margin:0 auto属性
div{
width:200px;
margin:0 auto;
}
（2）让绝对定位的div居中
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink; /* 方便看效果 */
}
（3）水平垂直居中一
已知容器的宽高 宽500 高 300
设置层的 ‘margin‘
div {
position: relative; /* 相对定位或绝对定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px; /* 外边距为自身宽高的一半 */
background-color: pink; /* 方便看效果 */
}
（4）水平垂直居中二
未知容器的宽高
利用 ‘transform‘ 属性
div {
position: absolute; /* 相对定位或绝对定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink; /* 方便看效果 */
}
（5）水平垂直居中三
利用 ‘flex‘ 布局
实际使用时应考虑兼容性
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container div {
width: 100px;
height: 100px;
background-color: pink; /* 方便看效果 */
}
transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation
原理：把上、左、右三条边隐藏掉（颜色设为 transparent）
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
实现方式：
上面的div宽100%，
下面的两个div分别宽50%，
然后用float或者inline使其不换行即可
利用padding-bottom|margin-bottom正负值相抵；设置父容器设置超出隐藏（overflow:hidden），这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。
png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
浏览器默认的margin和padding不同。
解决方案：
最简单的方法，但是不建议使用，具体可以参照 第15条初始化样式
*{
margin:0;
padding:0;
}
#box{
float:left;
width:10px;
margin:0 0 0 100px;
}
这种情况之下IE会产生20px的距离
解决方案：
#box{
float:left;
_display:inline; // ‘_‘这个符号只有ie6会识别
width:10px;
margin:0 0 0 100px;
}
渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
.bb{
background-color:red; /*所有识别*/
background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff; /*IE6、7识别*/
_background-color:#1e0bd1; /*IE6识别*/
}
解决方案： 统一通过getAttribute()获取自定义属性。
解决方案： （条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
解决方法： 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
解决方案：
改变CSS属性的排列顺序: L-V-H-A
a:link {} a:visited {} a:hover {} a:active {}
行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
最简单的初始化方法： （强烈不建议）
* {
padding: 0;
margin: 0;
}
淘宝的样式初始化代码：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
margin:0; padding:0;
}
body, button, input, select, textarea {
font:12px/1.5tahoma, arial, \5b8b\4f53;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
}
address, cite, dfn, em, var {
font-style:normal;
}
code, kbd, pre, samp {
font-family:couriernew,
courier, monospace;
}
small{
font-size:12px;
}
ul, ol {
list-style:none;
}
a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
sup {
vertical-align:text-top;
}
sub{
vertical-align:text-bottom;
}
legend {
color:#000;
}
fieldset, img {
border:0;
}
button, input, select, textarea {
font-size:100%;
}
table {
border-collapse:collapse;
border-spacing:0;
}
以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100
/* 权重为1 */
div{ }
/* 权重为10 */
.class1{ }
/* 权重为100 */
#id1{ }
/* 权重为100+1=101 */
#id1 div{ }
/* 权重为10+1=11 */
.class1 div{ }
/* 权重为10+10+1=21 */
.class1 .class2 div{ }
如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现
why? 清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。
方式：
（1）父级div定义height；（要求能够详细计算出实际高度，否则容易布局混乱，不推荐使用。）
（2）父级div 也一起浮动；（与父元素相邻的元素的布局会受到影响，如果全部浮动的话，太麻烦也不利于后期维护，不推荐使用。）
（3）父级div定义 overflow: hidden；（无法显示溢出部分，会触发BFC，不推荐使用。）
（4）浮动元素的父级div定义伪类:after
div::after,div::before{
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
div {
*zoom: 1;
}
解析原理：
（1）display:block 使生成的元素以块级元素显示，占满剩余空间；
（2）height:0 避免生成内容破坏原有布局的高度；
（3）visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互；
（4）通过 content:" "生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:""，有些版本可能content里面内容为空,一丝冰凉是不推荐这样做的，firefox直到7.0 content:"" 仍然会产生额外的空隙；
（5）zoom：1 触发IE hasLayout。
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
原文：https://www.cnblogs.com/hongplum/p/14654535.html