CSS边框-显示模式

显示模式介绍

---

『说明』HTML标签分为3种：块级元素(block-level)、行内元素(inline-level)、行内块元素(inline-block)

常见块级元素：<hx>、<p>、<div>、<ul>、<ol>、<li>等
常见行内元素：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等
常见行内块元素：<img>、<input>、<td>等

元素模式	元素排列	设置样式	默认宽度	可包含的元素
块级元素	独占一行或多行	可以设置宽/高	水平占满父容器	文本、任何元素
行内元素	与行内/行内块元素共占一行	不可设置宽/高	自身内容的宽度	文本、行内元素
行内块元素	与行内/行内块元素共占一行	可以设置宽/高	自身内容的宽度	文本、任何元素

【注意】<p>、<hx>、<dt>等文字类块元素中不能容纳其他块级元素；<a>链接中不能嵌套链接

显示模式转换

---

『说明』通过CSS的display属性可实现块级元素、行内元素、行内块元素间的转换，其用于规定元素边框的类型

/* 将元素转为块级元素 */
display: block;
/* 将元素转为行内元素 */
display: inline;
/* 将元素转换为行内块元素 */
display: inline-block;