行盒的盒模型
常見的行盒：包含具體內容的元素
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、內邊距（填充區(qū)）
水平方向有效，垂直方向僅僅會影響背景，不會占據(jù)空間
4、邊框
水平方向有效，垂直方向不會占據(jù)空間
5、外邊距
水平方向有效，垂直方向不會占據(jù)空間
行塊盒
display:inline-block 的盒子
1、不獨占一行
2、盒模型中所有尺寸都有效
空白折疊
空白折疊，發(fā)生在行盒（行塊盒）內部 或 行盒（行塊盒）之間
可替換元素 和非可替換元素
大部分元素，頁面上顯示的結果，取決于元素內容，稱為非可替換元素
少部分元素，頁面上顯示的結果，取決于元素屬性，稱為可替換元素
可替換元素：img、video、audio
絕大部分可替換元素均為行盒。
可替換元素類似于行塊盒，盒模型中所有尺寸都有效。
