第十七节（行盒盒模型）第十七节：行盒盒模型

行盒的盒模型常见的行盒：包含具体内容的元素
span、strong、em、i、img、video、audio等

Document - 锐客网p,span { background-color: lightblue; border: 2px solid; line-height: 3; }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! 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.

先看看这个样子：

文章图片
行盒的显著特点 1、盒子沿着内容延伸,行盒存放的就是内容。
2、行盒不能设置宽高
调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整
3、内边距（填充区）
水平方向有效，垂直方向仅仅会影响背景，不会占据空间
4、边框
水平方向有效，垂直方向不会占据空间
5、外边距
水平方向有效，垂直方向不会占据空间
行块盒 display:inline-block 的盒子
1、不独占一行
2、盒模型中所有尺寸都有效
空白折叠空白折叠，发生在行盒（行块盒）内部或行盒（行块盒）之间
可替换元素和非可替换元素 【第十七节（行盒盒模型）】大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素
少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素
可替换元素：img、video、audio
绝大部分可替换元素均为行盒。
可替换元素类似于行块盒，盒模型中所有尺寸都有效。