boxModel
boxModel – 盒模型
浏览器默认样式表
常见的块盒
- 容器元素:div、header、article、section、aside、footer
- h1 ~ h6
- p
常见的行盒:
- 与内容相关的元素:span、a、img、audio、video
盒子类型
块盒
display
等于block
的元素;块盒独占一行,会进行换行;
盒子的组成部分
无论是行盒还是块盒,都由以下几个部分组成,从内到外分别是:
-
内容 – content
内容部分通常叫做整个盒子的 内容盒 content-box
- width 设置内容宽
- height 设置内容区域高,当为百分比的时候,需要包含块高度固定,否则设置无效。
-
填充(内边距) – padding – 默认情况为0
盒子边框到盒子的距离, 填充区 + 内容区 = 填充盒(padding-box)
- padding-left 左边距
- padding-right 右边距
- padding-top 上边距
- padding-bottom 下边距
- 简写属性
- padding:
上
右
下
左
- padding:
上下
左右
- padding:
上下左右
-
边框 – border – 默认情况为0
边框 + 填充区 + 内容区 = 边框盒(border-box)
- 边框样式 border-style
默认为none,无样式
- 边框宽度 border-width
默认为0
- 边框颜色 border-color
默认为字体颜色
上面这三种都是简写属性(速写属性),每个都对应一组“上、右、下、左”的属性。
- 速写属性
border: 1px solid black;
-
外边距 – 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,对中文有影响,他会保持一句话不换行,遇到空白字符才换行,此时认为连续的中文是一个单词;
空白处理
如何处理空白字符;
行盒
display
等于inline
的元素;行盒不会换行;
常见的行盒:包含具体内容的元素:span、strong、em、i、img、video、audio
;
与块盒相比
-
width、height:
行盒沿着内容延伸,无法设置宽高,调整行盒的宽高要使用字体大小、类型间接调整行盒大小
行盒高度不会被可替换元素的高度撑高,宽度可以被可替换元素撑开。
一行中所有行盒的最顶边为line-box的顶边,最底边为line-box的底边,line-box的顶边和底边就是该行的显示行高,所有这样的显示行高和就是块盒的自动计算高度。
-
内边距
水平方向有效,即设置后填充区会占据内边距设置的空间,文字会根据填充区大小进行移动;
而垂直方向不会占据空间,仅会影响背景显示,文字的相对位置不会移动;
要调整行盒的高度只能通过行高,而不是其他因素。
-
边界
和padding一样
-
margin
和padding一样
多个行盒水平方向的对齐
给没有对齐的元素属性设置vertical-align
:
行盒中包含行块盒或可替换元素
行盒的高度与他内部的行块盒或可替换元素的高度无关;与字体大小、行高有关。
行块盒
display属性为inline-block的盒子
;他的特点如下:
- 不独占一行
- 盒模型中所有尺寸都有效(与行盒对比)
- 行块盒整体上可以理解为一个行元素,他会发生空白折叠,因此会有空格;这也是行块盒的一个缺点,即只要行块盒之间有空白字符,那就会发生空白折叠。
- 默认行宽度基于内容生成;
不同高度处于同一行的时候会在行的方向上居中;
可替换元素 与 非可替换元素 与 行盒和行块盒
- 非可替换元素
大部分元素,页面上显示的结果,取决于元素内容,称为非可替换元素;如span、a等
- 可替换元素
少部分元素,页面上显示的结果,取决于元素属性,称为可替换元素;如img、video、audio等;
可替换元素绝大部分为行盒;虽然是行块盒,但是使用上更像一个行块盒,width、heigth都有效,设置内容区大小后,可能会出现与图片本身大小、宽高比例不一样的情况,此时可以使用object-fit
属性
object-fit
指定可替换元素(例如: 或 )的内容应该如何适应到其使用高度和宽度确定的框;默认取值为fill。