CSS碎碎念

CSS的元素显示模式

作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解它们的特点可以更好的布局网页

---

元素显示模式就是元素(标签)以什么方式进行显示，比如<div>自己独占一行

HTML元素一般分为块元素和行内元素两种类型

块元素

常见的块元素有<h1>~<h6>, <p>, <div>, <ul>, <li>等，其中<div>标签是最典型的块元素

块元素的特点：

• 自己独占一行
• 高度、宽度、外边距以及内边距都可以控制
• 宽度默认是容器（父级宽度）的100%
• 是一个容器及盒子，里面可以放行内或者块级元素

注意点：

• 文字类的元素内不能使用块级元素
• <p>标签主要用于存放文字，不能放块级元素
• <h1>~<h6>等都是文字类块级标签

行内元素

常见的行内元素有有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

特点：

• 相邻行内元素在一行上，一行可以显示多个
• 高、宽直接设置是无效的
• 默认宽度就是它本身内容的宽度
• 行内元素只能容纳文本或其他行内元素

注意点：

• 链接里面不能再放链接
• 特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

行内块元素

在行内元素中有几个特殊的标签 —— <img />、<input />、<td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点：

• 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
• 默认宽度就是它本身内容的宽度（行内元素特点）。
• 高度，行高、外边距以及内边距都可以控制（块级元素特点）
  

元素显示模式转换

特殊情况下，需要元素模式的转换

• 转换为块元素：display:block;
• 转换为行内元素：display: inline;
• 转换为行内块：display: inline-block;

单位

绝对单位

不随浏览器或设备改变

• px（像素）：基于屏幕的最小显示单位
• pt
• pc
• in
• cm

相对单位

• em：相对于元素的字体尺寸，如果用于字体大小，是相对于父元素的字体大小
• rem：相对于根元素（html）的字体大小
• vm（视口宽度的1%）：当前屏幕的大小
• vh（视口高度的1%）
• %：相对于父元素的高度或宽度