CSS笔记——行盒及行块盒

行盒

盒子内容多若需要换行显示，padding、border等也换行显示。而不是像块盒一样只换行显示内容而padding、border等作为块整体的边距显示在页面上。下图上下两部分分别为块盒和行盒。

行盒不能设置宽高。若要设置显示的行间距，使用字体大小、行高、字体类型来间接设置。

padding水平方向上有效，垂直方向上只影响背景，内容不动。
border、margin同上。

行块盒

设置行盒属性display: inline-block;行盒成为行块盒。

行块盒不独占一行（类行盒），上下左右的距离都有效（类块盒）。

将行盒的display属性改为inline-block，就可以调整padding等距离。

行盒或行块盒之间有空白折叠（盒内部也有），代码中的空行折叠为一个空格（并列的翻页a标签之间有空格）。若要去掉只能代码中不空行。

非可替换元素&可替换元素

1. 大部分元素，页面上显示的效果取决于元素内容，称为非可替换元素
2. 少部分元素，页面上显示的效果取决于元素属性，称为可替换元素。例如img显示src的内容。
   绝大部分可替换元素都是行盒。但是有行块盒的性质，可以直接设置宽高（img、video等）。

img元素的object-fit属性

1. object-fit: fill，宽高不符合图片比例时拉伸图片（default）。
2. object-fit: contain;
   用来保持图片比例，牺牲高或宽；
3. object-fit: cover;
   保持图片比例的同时不牺牲宽或高，牺牲图片内容。