盒模型扩充

• 边框盒（border-box）：由border，padding，content组成

• 填充盒（padding-box）：由padding，content组成

• 内容盒（content-box）：由content组成

  继承（inherit）

  是指子元素会自动拥有父元素的某些CSS属性

  继承须有传递性

• 文本类的样式都可以继承

  一个元素的某个CSS属性，只有满足下面两个条件，才会继承父元素：

• 满足继承条件的

• 没有特别声明的元素

  强制继承

• 强制继承，也叫显示继承，是指将CSS属性值设置为inherit

  这样做由两个原因：

• 为了继承有些不可继承的属性

• 为了继承已被声明过的属性

  溢出

   

• overflow-y：scroll

  超出内容显示可滚动区域（y轴可拉伸）

  visible（显示）

  hidden（隐藏）；此标签还可以禁止外边距合并；消除浮动

  scroll（滚动条显示）

  auto哪个方向（x/y溢出，相应的方向出现滚动条）

  段词规则

• 英文：空格，标点符号

• 中文：标点符号【空格】

• 数字：空格

  书写格式为：

  word-break：break-all；

  不断词，按照占满宽度在换行

  word-break：normal；

  按照段词规则执行

  引用背景图片

  书写格式：

  background-image: url（“图片地址”）

  设置背景的区域

• background-clip:背景颜色的剪切区域 取值：子盒子

• background-origin:背景区域的渲染区域 取值：子盒子

  普通盒模型与IE盒模型的区别

• 当设置元素宽高的时候（计算不同）

  IE盒模型的适用场景

• 宽度给100%的基础上，又添加了其他盒子的尺寸

  为了解决滚动条的问题，因此更改盒子的计算规则来实现效果

• 优点：不占像素

  缺点：不可以分别使适用4个方向的值