盒子模型的应用与css属性值的计算过程

盒子的组成:内容(content-box),内边距(padding-box),边框(border-box),外边距(margin)
盒子模型的应用与css属性值的计算过程

盒子的分类:
1、行盒:inline
一般和具体内容相关的元素都是行盒元素,行盒不能设置宽高,由里面的内容撑开,
2、块盒:block
块盒元素独占一行,可以设置宽高
块元素可以嵌套所有内联元素,内联元素不能嵌套块元素
3、行块盒:inline-block
不独占一行,可以设置宽高
每个块盒的总宽度,必须刚好等于包含块的宽度,宽度的默认值是auto
盒子模型的应用与css属性值的计算过程
元素的渲染
元素在渲染的过程中,每个css属性都必须有值,渲染的顺序为按照树形结构一次渲染每个属性值。
属性值的计算过程:
1、先确定声明值,没有冲突的声明作为属性值。
2、当发生层叠冲突时,先比较重要性(例如import属性的重要性最高),然后在根据权重值的计算来比较特殊性,最后比较代码顺序,后面代码的属性值优先级高于前面的同等级的属性值。
3、子类元素可以继承父类元素的属性值。
4、当还有属性没有属性值时就会使用浏览器默认值。