boxModel

boxModel

boxModel – 盒模型

浏览器默认样式表

常见的块盒

• 容器元素：div、header、article、section、aside、footer
• h1 ~ h6
• p

常见的行盒：

• 与内容相关的元素：span、a、img、audio、video

盒子类型

块盒

display等于block的元素；块盒独占一行，会进行换行；

盒子的组成部分

无论是行盒还是块盒，都由以下几个部分组成，从内到外分别是：

1. 内容 – content
   内容部分通常叫做整个盒子的 内容盒 content-box

   • width 设置内容宽
   • height 设置内容区域高，当为百分比的时候，需要包含块高度固定，否则设置无效。

2. 填充(内边距) – padding – 默认情况为0
   盒子边框到盒子的距离， 填充区 + 内容区 = 填充盒(padding-box)

   • padding-left 左边距
   • padding-right 右边距
   • padding-top 上边距
   • padding-bottom 下边距
   • 简写属性
     • padding: 上 右 下 左
     • padding: 上下 左右
     • padding: 上下左右

3. 边框 – border – 默认情况为0
   边框 + 填充区 + 内容区 = 边框盒(border-box)

   • 边框样式 border-style
     默认为none，无样式
   • 边框宽度 border-width
     默认为0
   • 边框颜色 border-color
     默认为字体颜色

   上面这三种都是简写属性(速写属性)，每个都对应一组“上、右、下、左”的属性。

   • 速写属性 border: 1px solid black;

4. 外边距 – margin – 默认情况为0
   边框到其他盒子的距离；

   • margin-left 左外边距
   • margin-right 右外边距
   • margin-top 上外边距
   • margin-bottom 下外边距

使用

改变宽高范围

默认情况下，width和height设置的是内容盒宽高，内容盒的宽高是根据盒子中的内容计算出来的；
而设计过程中，往往使用的是边框盒，width和height设置的为内容盒，因此会有问题，解决方式如下：

• 精确计算：根据边框盒去手动计算内容盒大小，然后进行设置
• 基于CSS3属性：box-sizing: border-box指定width和height设置的是边框盒；设置这个之后，如果有需要设置单行文本居中，那就要计算内容区高度然后设置；line-height;

改变背景覆盖范围

默认情况下，背景(背景色和背景图)的背景显示范围为边框盒区域；可以使用background-clip: content-box;修改背景的覆盖范围；

溢出处理

默认情况下，不设置内容高度不会出现内容溢出的问题；设置了内容区宽高，然后内容需要的空间又超过了内容区设置，此时就会出现内容溢出情况，默认情况下，溢出的文本内容依旧可以正常看到；overflow属性(这个也是个简写模式，可以设置x，y不同方向的显示格式)可以设置内容溢出时要显示的效果，如直接显示，以滚动区显示等：

• overflow: auto;
  取决于用户代理。如果内容适应边距（padding）盒，它看起来与 visible 相同，但是仍然建立了一个新的块级格式化上下文。如果内容溢出，则浏览器提供滚动条。
• overflow: scroll;
  如果需要，内容将被裁减以适应边距（padding）盒。无论是否实际裁剪了任何内容，浏览器总是显示滚动条，以防止滚动条在内容改变时出现或者消失。打印机可能会打印溢出的内容。
• overflow: hidden;
  溢出内容隐藏

断词规则

word-break，指定可以在什么位置换行；可以理解为单词断点。

• normal：默认规则，中文类字符在以单个文字为单位进行截断显示；非中文类字符以单词为单位进行截断显示；
• break-all：以字母为单位进行截断显示，相对于normal，对英文有影响，他会对单词进行截断
• keep-all：以单词为单位进行截断显示，相对于normal，对中文有影响，他会保持一句话不换行，遇到空白字符才换行，此时认为连续的中文是一个单词；

空白处理

如何处理空白字符；

• white-space: nowrap;
  指定在面对空白字符时如何进行换行：可以不换行，也可设置进行换行；

• text-overflow: ellipsis;
  ellipsis – 省略符号，省略法；
  设定文本出现内容溢出时使用省略号的方式进行显示；

行盒

display等于inline的元素；行盒不会换行；
常见的行盒：包含具体内容的元素：span、strong、em、i、img、video、audio;

与块盒相比

1. width、height：
   行盒沿着内容延伸，无法设置宽高，调整行盒的宽高要使用字体大小、类型间接调整行盒大小
   行盒高度不会被可替换元素的高度撑高，宽度可以被可替换元素撑开。
   一行中所有行盒的最顶边为line-box的顶边，最底边为line-box的底边，line-box的顶边和底边就是该行的显示行高，所有这样的显示行高和就是块盒的自动计算高度。

2. 内边距
   水平方向有效，即设置后填充区会占据内边距设置的空间，文字会根据填充区大小进行移动；
   而垂直方向不会占据空间，仅会影响背景显示，文字的相对位置不会移动；
   要调整行盒的高度只能通过行高，而不是其他因素。

3. 边界
   和padding一样

4. margin
   和padding一样

多个行盒水平方向的对齐

给没有对齐的元素属性设置vertical-align：

• 预设值
• 数值，可为像素、百分比、em、rem

行盒中包含行块盒或可替换元素

行盒的高度与他内部的行块盒或可替换元素的高度无关；与字体大小、行高有关。

行块盒

display属性为inline-block的盒子；他的特点如下：

1. 不独占一行
2. 盒模型中所有尺寸都有效(与行盒对比)
3. 行块盒整体上可以理解为一个行元素，他会发生空白折叠，因此会有空格；这也是行块盒的一个缺点，即只要行块盒之间有空白字符，那就会发生空白折叠。
4. 默认行宽度基于内容生成；
   不同高度处于同一行的时候会在行的方向上居中；

可替换元素 与 非可替换元素 与 行盒和行块盒

• 非可替换元素
  大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素；如span、a等
• 可替换元素
  少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素；如img、video、audio等；
  可替换元素绝大部分为行盒；虽然是行块盒，但是使用上更像一个行块盒，width、heigth都有效，设置内容区大小后，可能会出现与图片本身大小、宽高比例不一样的情况，此时可以使用object-fit属性

object-fit

指定可替换元素（例如： 或 ）的内容应该如何适应到其使用高度和宽度确定的框；默认取值为fill。