html+css基础-2-盒子模型、选择器优先级、新增伪元素、display:none

一，块级元素和行内元素

行内元素：a b span img input select strong
块级元素：div ul li dl dt dd h1-h6 p
空元素：br hr img input link

二，盒子模型

盒子模型分两种，一种是符合W3C规范的标准例子模型，另一种是IE的盒子模型，IE的盒子模型也被叫怪异盒子。
和标准盒子模型不同的是：IE 盒子模型的宽，包含了 border 和 pading。
content-box（标准）
padding和border不被包含在width和height内，元素的实际大小为宽高+border+padding，此为标准模式下的盒模型。
即宽高只有content

border-box（怪异）
padding和border被包含在定义的width和height中，元素实际的大小为你定义了多宽就是多宽。此属性为怪异模式下的盒模型。
即只有margin不算在宽高内

三，css的选择符，哪些属性可以继承？优先级算法如何计算？

1，选择器
id选择器（ # myid）;
类class选择器（.myclassname）;
标签选择器（div, h1, p）;
相邻选择器（h1 + p）;
子选择器（ul > li）;
后代选择器（li a）;
通配符选择器（ * ）;
属性选择器（a[rel = “external”]）；
伪类选择器（a:hover, li:nth-child）；
可继承的样式： font-size font-family color, UL LI DL DD DT；
不可继承的样式：border padding margin width height
2、优先级比较
1）优先级就近原则，同权重情况下样式定义最近者为准；
2）载入样式以最后载入的定位为准；
3）!important>内联 > id >伪类> class > tag；
4）important 比内联优先级高，但内联比 id 要高；
5）权重计算：
（1）内联，如style=""——1000，
（2）id，如#content——100，
（3）类、伪类和属性选择器，如.content——10，
（4）标签选择器和伪元素选择器，如div p——1
（5）通配符、子选择器和相邻选择器，如*，>，+——0
3、CSS3新增的伪类

1）p:first-of-type 选择属于其父元素的首个 <p> 元素；
2）p:last-of-type  选择属于其父元素的最后 <p> 元素；
3）p:only-of-type  选择属于其父元素唯一的 <p> 元素；
4）p:only-child    选择属于其父元素的唯一子元素；
5）p:nth-child(2)  选择属于其父元素的第二个子元素；
6）:checked    单选框或复选框被选中

四，display:none 和 visibility:hidden的区别

一、空间占据
dispaly:none 隐藏后的元素不占据任何空间
visibility:hidden 隐藏的元素空间依然存在
二、回流与重绘
display:none 隐藏产生重绘 ( repaint ) 和回流 ( relfow )
visibility:hidden 不会产生重绘和回流
三、株连性
一旦父元素使用 display:none 父节点和子孙节点元素全都不可见
父元素使用 visibility:hidden ,子孙节点元素可以设置 visibility:visible 是可见
补充
（1）回流：当 render 树的一部分因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，叫做回流。

**（2）重绘：**当颜色、背景颜色等发生变化不会引起页面发生变化，只需要进行重新渲染的过程，叫做重绘。例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定伴随重排。