知识梳理——CSS篇
css引入方法
- 内嵌
<head> <meta charset="UTF-8"> <title>Document</title> <style> .... </style> </head>
- 行间
<body style="background:red;">
- 外联
<link rel="stylesheet" href="./css/main.css" />
- @import方法
@import url("css/mycss.css")
基础选择器
元素选择器：h1...
类选择器：.class
id选择器：#id
通配符选择器：*
子元素选择器：>
后代元素选择器：ul li
相邻元素选择器：+
属性选择器：[]
组合选择器：h1,h2,h3,h4,h5{}
复合选择器：div.test{} (注意：中间没有空格，否则就会被识别为后代选择器了)、
伪元素
:first-letter :first-line :before :after ::selection(css3中唯一引入的伪元素)
伪类
css2中只有:link、:visited、:hover、:active、:focus、:first-child、:lang等有限的几种伪类选择器；
css3中增加了大量的伪类选择器：
结构化伪类：:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()、:last-child、:first-of-type、:last-of-type、
:only-child、:only-of-type、:root :empty
目标伪类：:target
状态伪类：:enabled、:disabled、:checked、:indeterminate、:default
否定伪类：:not()
（css3中新增伪类的具体用法可参见《CSS高效开发实战》一书）
盒子模型
标准盒子模型中：内容区域的宽度和高度就是width和height
IE盒子模型中：内容区域的宽度包含了内容、内边距、边框的总和。
CSS3中的box-sizing属性可以定义要使用何种盒模型。
定位
static: 默认
absolute（绝对定位）：相对于与它最近的那个已经定位了的祖先元素进行定位，如果没有已定位的祖先元素，则它的位置相对于初始包含块。绝对定位使元素的位置与文档无关，因此不占据空间。
relative：相对于它原来在的位置进行定位，使用相对定位时，无论是否移动，元素仍然占据原来的空间。
fixed：总是以视口的左上角进行定位
清除浮动
1、float父元素
2、添加空标签clear
3、overflow:hidden或者auto;
4、after伪类{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
CSS hack--使css代码兼容不同的浏览器
常用的css hack方式：
①条件注释
如：<!--[if IE]> 这段文字只在IE浏览器中出现 <![end if]-->
②属性前缀
如：-webkit -o -moz -ms
③选择器前缀
如：*html
CSS3常用属性：
border-radius,box-shadow,text-shadow,transform(rotate,scale,skew,translate),transition,animation,@font-face,媒体查询@media
