共计 2419 个字符，预计需要花费 7 分钟才能阅读完成。
选择器的权重和优先级
选择器的类型：
id 选择器 (#myid)
类选择器 (.myclassname)
标签选择器 (div, h1, p)
相邻选择器 (h1 + p)
子选择器（ul > li）
后代选择器（li a）
通配符选择器（*）
属性选择器（a[rel=”external”]）
伪类选择器（a:hover, li:nth-child）
权重分为四级：
代表内联样式，如 style=”xxx”，权值为 1000；代表 ID 选择器，如 #content，权值为 100；代表类、伪类和属性选择器，如.content、:hover、[attribute]，权值为 10；代表元素选择器和伪元素选择器，如 div、p，权值为 1。
需要注意的是：通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为 0。权重值大的选择器其优先级也高，相同权重的优先级又遵循后定义覆盖前面定义的情况。
盒模型
标准盒子模型：宽度 = 内容的宽度（content）+ border + padding + margin
低版本 IE 盒子模型：宽度 = 内容宽度（content+border+padding）+ margin
box-sizing 属性：
content-box：一个标准模式下的盒模型的计算方式
border-box：一个怪异模式下的盒模型的计算方式
div 设置了 box-sizing:border-box 之后，width 的宽度是内容 + padding + 边框的宽度（不包括 margin），这样就比较符合我们的实际要求了。
浮动 float
float 被设计出来的初衷是用于文字环绕效果，即一个图片一段文字，图片 float:left 之后，文字会环绕图片.float 的破坏性 —— float 破坏了父标签的原本结构，使得父标签出现了坍塌现象。导致这一现象的最根本原因在于：被设置了 float 的元素会脱离文档流。其根本原因在于 float 的设计初衷是解决文字环绕图片的问题。大家要记住 float 的这个影响。
清除浮动
.clearfix:after {
content: ”;
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* 兼容 IE 低版本 */
}
<div class=”clearfix”>
<img src=”image/1.png” style=”float: left”/>
<img src=”image/2.png” style=”float: left”/>
</div>
如何实现水平居中
inline 元素使用
text-align: center
block 元素使用
margin: auto
绝对定位元素可结合 left 和 margin 实现，但是必须知道宽度。
.item {
width: 300px;
height: 100px;
position: absolute;
left: 50%;
margin: -150px;
}
如何实现垂直居中
inline 元素可设置 line-height 的值等于 height 值，如单行文字垂直居中：
.container {
height: 50px;
line-height: 50px;
}
绝对定位元素，可结合 left 和 margin 实现，但是必须知道尺寸。
优点：兼容性好
缺点：需要提前知道尺寸
.container {
position: relative;
height: 200px;
}
.item {
width: 80px;
height: 40px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -20px;
margin-left: -40px;
}
绝对定位可结合 transform 实现居中。
优点：不需要提前知道尺寸
缺点：兼容性不好
.container {
position: relative;
height: 200px;
}
.item {
width: 80px;
height: 40px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: blue;
}
绝对定位结合 margin: auto，不需要提前知道尺寸，兼容性好
.container {
position: relative;
height: 300px;
}
.item {
width: 100px;
height: 50px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
移动端的布局用过媒体查询吗?
<head> 里边 <link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:480px)”>
CSS : @media only screen and (max-device-width:480px) {/css 样式 /}
css 动画
首先，使用 @keyframes 定义一个动画，名称为 testAnimation，如下代码，通过百分比来设置不同的 CSS 样式，规定动画的变化。所有的动画变化都可以这么定义出来。
@keyframes myfirst
{
0% {background: red; left:0; top:0;}
25% {background: yellow; left:200px; top:0;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0; top:200px;}
100% {background: red; left:0; top:0;}
}
然后，针对一个 CSS 选择器来设置动画，例如针对 div 元素设置动画，如下：
div {
width: 100px;
height: 50px;
position: absolute;
animation-name: myfirst;
animation-duration: 5s;
}
