CSS选择器和写法
1 常用选择器--为元素绘画效果
ID：选择器,class选择器，标签选择器
ID写法 #test {
width: 100px;
height: 100px;
background-color: lightgreen;
}
class写法 .test {
width: 100px;
height: 100px;
background-color: lightgreen;
}
标签写法 div {
width: 100px;
height: 100px;
background-color: lightgreen;
}
2 伪类选择器--CSS伪类是用来添加一些选择器的特殊效果。
a:link {color:#FF0000;} /* 未访问的链接 /
a:visited {color:#00FF00;} / 已访问的链接 /
a:hover {color:#FF00FF;} / 鼠标划过链接 /
a:active {color:#0000FF;} / 已选中的链接 */
:lang 伪类使你有能力为不同的语言定义特殊的规则
注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。伪类的名称不区分大小写。
3 子类选择器
p::nth-child(an+b)
1 li:nth-child(3){background:blue;}
2 li:nth-child(3n){background:blue;}
3 li:nth-child(an+b) 与 :nth-child(an-b)
4 :nth-child(odd) 与 :nth-child(even) 奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。
4 伪元素
p:before；p:after
5 选择器优先级
（1） 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
（2） 作为style属性写在元素内的样式
（3） id选择器
（4） 类选择器
（5） 标签选择器
（6） 通配符选择器
（7） 浏览器自定义或继承
总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
同一级别中后写的会覆盖先写的样式
权值
内联样式表的权值为 1000
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1
CSS盒模型
box-sizing: content-box;
指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
1 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
2总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
box-sizing: border-box;
指定宽度和高度（最小/最大属性）确定元素边框box。也就是说，对元素指定宽度和高度包括padding和border的指定。内容的宽度和高度减去各自双方该边框和填充的宽度从指定的"宽度"和"高度"属性计算
CSS常用的布局
1 块级元素：div p form ul ol li 等(块级元素独自占一行且宽度会占满父元素宽度)；
A 居中对起
a知道宽度和高度
.box {
height: 500px;
width: 500px;
border: 1px saddlebrown solid;
}
.test {
width: 100px;
height: 100px;
background-color: lightgreen;
margin-top: 200px;
margin-left: 200px;
}
b不知道宽度和高度
flex居中
.box {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 50%;
border: 1px saddlebrown solid;
}
.test {
width: 100px;
height: 100px;
background-color: lightgreen;
}
transform居中
.box {
width: 500px;
height: 500px;
border: 1px saddlebrown solid;
position: relative;
}
.test {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: lightgreen;
}
margin居中
.box {
width: 500px;
height: 500px;
border: 1px saddlebrown solid;
position: relative;
}
.test {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: 100px;
height: 100px;
background-color: lightgreen;
}
c table居中
.box {
width: 500px;
height: 500px;
display: table-cell;
border: 1px saddlebrown solid;
vertical-align: middle;
}
.test {
margin: auto;
width: 100px;
height: 100px;
background-color: lightgreen;
}
2 行内元素：span strong em等(行内元素不会独占一行,没有宽度和高度);
水平居中：text-align:center
ul水平居中:加
display:table;
margin:0 auto;
此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
垂直居中：line-height:父元素的height
CSS float闭合
.box {
border: 1px saddlebrown solid;
}
.test1 {
width: 100px;
height: 100px;
background-color: lightgreen;
float: left;
}
.clearfix:after {
content: '.';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
给需要闭合的div加上 class=”clearfix” 即可
<div class="box clearfix">
<div class="test1 "></div>
</div>
CSS 动画
一在CSS 3引入Transition（过渡）这个概念之前，CSS是没有时间轴的。也就是说，所有的状态变化，都是即时完成。
1Transition 加上时间
.box {
width: 100px;
height: 100px;
background-color: lightgreen;
}
.box:hover {
background-color: black;
width: 200px;
height: 300px;
}
.box {
transition: 2s;
}
2 Transition 确认范围
.box {
width: 100px;
height: 100px;
background-color: lightgreen;
}
.box:hover {
background-color: black;
width: 200px;
height: 300px;
}
.box {
transition: 2s height;
}
3 Transition，可以分别指定多个属性。
.box {
width: 100px;
height: 100px;
background-color: lightgreen;
}
.box:hover {
background-color: black;
width: 200px;
height: 300px;
}
.box {
transition: 2s height, 5s width, 3s background-color;
}
4 Transition，添加延迟参数。
.box {
width: 100px;
height: 100px;
background-color: lightgreen;
}
.box:hover {
background-color: black;
width: 200px;
height: 300px;
}
.box {
transition: 2s height, 5s width,5s 3s background-color;
}
5 Transition，添加动画函数。
（1）linear：匀速
（2）ease-in：加速
（3）ease-out：减速
（4）cubic-bezier函数：自定义速度模式
.box {
width: 100px;
height: 100px;
background-color: lightgreen;
}
.box:hover {
background-color: black;
width: 200px;
height: 300px;
}
.box {
transition: 2s height, 5s width,5s 3s background-color ease;
}
6 Transition 完整写法
.box {
transition-property: height;
transition-duration: 1s;
transition-delay: 1s;
transition-timing-function: ease;
/*transition: 2s height cubic-bezier(.83,.97,.05,1.44), 5s width,5s 3s background-color ease;*/
}
7 Transition使用注意
（1）目前，各大浏览器（包括IE 10）都已经支持无前缀的transition，所以transition已经可以很安全地不加浏览器前缀。
（2）不是所有的CSS属性都支持transition，完整的列表查看这里，以及具体的效果。
（3）transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。比如，height从0px变化到100px，transition可以算出中间状态。但是，transition没法算出0px到auto的中间状态，也就是说，如果开始或结束的设置是height: auto，那么就不会产生动画效果。类似的情况还有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。
8 Transition使用局限
（1）transition需要事件触发，所以没法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
二CSS Animation
1 CSS Animation需要指定动画一个周期持续的时间，以及动画效果的名称。
@keyframes changeBG {
0% {
background: #c00;
}
50% {
background: orange;
}
100% {
background: yellowgreen;
}
}
.box {
width: 100px;
height: 100px;
background-color: lightgreen;
}
.box:hover {
animation: 1s changeBG;
}
2 指定动画播放次数(加入infinite关键字，可以让动画无限次播放)
.box:hover {
animation: 1s changeBG 3;
}
3animation-fill-mode还可以使用下列值。确定动画结束时的状态
（1）none：默认值，回到动画没开始时的状态。
（2）backwards：让动画回到第一帧的状态。
（3）forwards表示让动画停留在结束状态
（4）both: 根据animation-direction（见后）轮流应用forwards和backwards规则。
.box:hover {
animation: 1s changeBG 3 forwards;
}
4animation-direction指定了动画播放的方向（最常用的值是normal和reverse）
.box:hover {
animation: 1s changeBG 3 forwards reverse;
}
5完整写法
.box:hover {
animation-name: rainbow;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-fill-mode:forwards;
animation-direction: normal;
animation-iteration-count: 3;
}
CSS兼容性
-webkit- ，针对safari，chrome浏览器的内核CSS写法
-moz-，针对firefox浏览器的内核CSS写法
-ms-，针对ie内核的CSS写法
-o-，针对Opera内核的CSS写法
网友评论