首页 > 其他分享 >9.行盒的盒模型

9.行盒的盒模型

时间:2022-10-30 19:35:30浏览次数:40  
标签:## 模型 元素 行块 行盒 替换

# 行盒的盒模型
常见的行盒:包含具体内容的元素
span、strong、em、i、img、video、audio
## 显著特点
1. 盒子沿着内容沿伸 2. 行盒不能设置宽高
调整行盒的宽高,应该使用字体大小、行高、字体类型,间接调整。
3. 内边距(填充区)
水平方向有效,垂直方向不会实际占据空间。
4. 边框
水平方向有效,垂直方向不会实际占据空间。
5. 外边距
水平方向有效,垂直方向不会实际占据空间。

## 行块盒
display:inline-block 的盒子
1. 不独占一行 2. 盒模型中所有尺寸都有效
## 空白折叠
空白折叠,发生在行盒(行块盒)内部 或 行盒(行块盒)之间
## 可替换元素 和 非可替换元素
大部分元素,页面上显示的结果,取决于元素内容,称为**非可替换元素**
少部分元素,页面上显示的结果,取决于元素属性,称为**可替换元素**
可替换元素:img、video、audio
绝大部分可替换元素均为行盒。
可替换元素类似于行块盒,盒模型中所有尺寸都有效。

标签:##,模型,元素,行块,行盒,替换
From: https://www.cnblogs.com/zm227447/p/16841977.html

相关文章