第十七节：行盒盒模型
2020-04-11 本文已影响0人
EndPein
行盒的盒模型
常见的行盒：包含具体内容的元素
span、strong、em、i、img、video、audio等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p,span {
background-color: lightblue;
border: 2px solid;
line-height: 3;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam praesentium consequuntur totam qui perspiciatis! Neque animi maiores quod repudiandae officia omnis tempora tenetur perferendis necessitatibus in aliquam, nobis accusantium rerum!
</p>
<span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, pariatur. Assumenda, corporis, nemo repudiandae ipsum ipsam porro soluta enim fugit tempore sapiente illum similique libero aspernatur ex pariatur, quibusdam animi.
</span>
</body>
</html>
先看看这个样子：
行盒的显著特点
1、盒子沿着内容延伸,行盒存放的就是内容。
2、行盒不能设置宽高
调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整
3、内边距（填充区）
水平方向有效，垂直方向仅仅会影响背景，不会占据空间
4、边框
水平方向有效，垂直方向不会占据空间
5、外边距
水平方向有效，垂直方向不会占据空间
行块盒
display:inline-block 的盒子
1、不独占一行
2、盒模型中所有尺寸都有效
空白折叠
空白折叠，发生在行盒（行块盒）内部 或 行盒（行块盒）之间
可替换元素 和非可替换元素
大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素
少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素
可替换元素：img、video、audio
绝大部分可替换元素均为行盒。
可替换元素类似于行块盒，盒模型中所有尺寸都有效。
