css中的属性值的计算过程

css的属性值的计算过程和盒模型（块盒）

属性值的计算过程

浏览器的渲染的核心内容

一个元素一个元素依次的渲染，按照树形目录结构进行渲染

渲染每个元素的前提条件:该元素的所有css属性必须有值。

一个元素从所有属性都没有值，到所有属性都有值的过程叫属性值的计算

过程

1. 确定声明值: 参考样式表中没有冲突的声明，包括作者样式表和浏览器默认的样式表。
2. 处理层叠冲突: 对样式表中有冲突的样式使用层叠规则，确定css属性。
3. 使用继承，对没有属性值的属性，若可以继承，则继承父属性的属性值。
4. 使用默认值，对没有属性的属性，使用默认值 ，每一属性值都有属性

盒模型

box: 每个元素都会在页面中生成一个矩形区域（盒）
盒子的类型

1. 行盒 : display 等于 inline 的元素，不独占一行
2. 块盒 : display 等于 block 的元素，独占一行

浏览器默认的块盒元素: h1~h6,容器元素,p
常见的行盒元素有又: span,a,img

盒子的组成部分

1. 内容 content
   width ,hight 内容部分通常叫做盒子的 内容盒 content-box
2. 填充 padding
   padding-left 左边距 padding-right 右边距 padding-top 上边距 padding-bottom 下边距
   简写属性 padding
   填充区加内容部分叫盒子的填充区 padding-box
3. 边框 border
   边框 = 边框样式（border-style） + 边框宽度(border-width) + 边框颜色(border-color)
   默认情况下边框样式为 none（没有样式） 因此边框不现实
   边框颜色默认为字体的颜色
   速写属性 ： border
   边框+填充区+内容区 = 边框盒 border
4. 外边框 margin
   边框到其他元素的距离

盒模型的应用

改变宽高范围

默认情况下，width和hight 是设置的内容盒的高度和宽度

页面重构师：将psd文件（设计稿）制作成静态页面

在衡量设计稿尺寸的时候，我们通常知道的是边框盒(内容 + 填充 + 边框)的大小，然而我们设计的是内容盒的width和hight
解决办法：

1. 精确计算
2. css3: boxsize 默认值是contand-box 可以设置成border-box

背景覆盖范围

默认情况下，背景覆盖边框盒
可以通过background-clip进行修改

溢出处理

当手动的设置内容的大小是可能盒子的内容超过盒子的大小，超出盒子的内容是默认是可以看到的，可以通过overflow属性控制内容溢出边框盒子后的显示效果，默认值为vistable（可见的），可以设置为hide(隐藏)，scroll(生成个滚动条), auto(自动，在需要的时候生成滚动条，不需要的时候不生成滚动条)

text-overflow: ellipsis 文本溢出以点的形式处理

断词规则

word-break,会影响文字在什么地方会被截断换行

normal: 普通。
break-all:截断所有
keep-all:所有文字都要按照单词截断（以空格间隔）

空白处理

white-space : nowrap 表示空白处不换行
white-space : pre 不会出现空白折叠

以后遇到文本溢出不换行的处理，并且使溢出的地方变成…,使用 （white-space: newrap;voreflow : hide; text-overflow : ellipsis)来处理。只能处理单行文本