重温css的一些知识点

1，块级元素：div h(1-6) p ul li ，块级元素父元素是body，所以与浏览器一样宽，始终占一行
　  行内元素：a span img
2，选择符：
　　1，上下文选择符
　　　　特殊上下文选择符：标签1 > 标签2 ：标签1不能是标签2的父元素之外的其他祖先元素
　　2，ID和类选择符
　　　　标签带类选择符：p.className   带这个className的段落
　　3，属性选择器
3，伪类:
　　1，链接伪类 a:link a:visited a:hover a:active
　　2，input:focus
　　3，:target
　　结构化伪类：
　　　　1，e:first-child e:last-child
　　　　2，e:nth-child(n) //n=数字/odd/even/
4，伪元素：
　　::first-letter 段落首字符
5，继承：与文本有关的大部分属性是可以继承的，比如颜色，字体，字号
6，层叠：行内样式>嵌入样式>链接样式>默认样式
　　!important 加重声明的权重
　　ID选择符>类选择符>标签选择器

7，每个元素都会在页面上生成一个盒子，即盒模型
8，左右外边距可以使用像素，上下外边距以em为单位可以让段间距随字号变化而相应增大或缩小
9，没有宽度的元素始终会扩展到填满其父元素的宽度为止，添加边框，内外边距会导致内容宽度减少
10，设定了宽度的盒子添加边框，内外边距会导致盒子扩展的更宽，盒子的width属性设定的只是盒子内容区的宽度，而非盒子要占据的水平宽度
11，浮动非图片元素时，必须给它设定宽度，以免布局混乱
12，清除浮动：
　　1，overflow：hidden 1 防止包含元素被超大内容撑大 2 迫使父元素包含其浮动的子元素
　　2，.clearfix:after {
　　　　　　content: ".";
　　　　　　display: block;
　　　　　　height: 0;
　　　　　　visibility: hidden;
　　　　　　clear: both; //清除浮动是指在盒子中新增的子元素会清除左右浮动元素，即位于左右浮动元素下方
　　　　}
13，定位：
　　relative:相对与元素原来在文档流中的位置，这个元素原来占据的空间没有动，其它元素也没动。
　　absolute:完全脱离文档流位置，这个元素之前占据的空间被“回收”了，相对于这个元素的祖先容器在定位。如果祖先元素没有相对定位元素，则采用默认的定位上下文body元素进行定位
14，dispaly:none 占据的位置会被回收
　　visibility：hidden 占据位置不会被回收
15，背景：
　　背景颜色--背景图片--前景层
　　background-repeat
　　background-position
16，VPS:厂商前缀
17，字体：
　　em: 该元素的字体大小要相对于最近的被设定过字体大小的祖先元素来确定（可以把body的font-size设定为62.5%，则1em即为10像素，便于换算）
　　rem: 字体大小相对与HTML根元素来确定（IE8+），对于不支持的浏览器多写一个绝对单位的声明即可
　　font-style:normal/italic(斜体)
　　font-weight:normal/bold
　　font: font-weight font-style(不分先后) font-size(必需，可与行高一起设置，如12px/1.5，表示行高为字体12px的1.5倍) font-family(必需)}
18，文本属性：
　　text-indent:文本缩进
　　text-decoration text-align
　　line-height:文本行之间增加间距
19，布局：
　　box-sizing:border-box 给盒子添加内边距或边框就不会导致盒子的宽度变化了（IE8+）