2021-10-26

CSS的显示模式

块级元素：

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

特点：

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

注意：

只有文字才能组成段落，因此p里面不能放块级元素，特别是p不能放div
同理还有这些标签h1-h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
因为有时候会解析混乱且不符合语义化

行内元素

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

特点：

（1）相邻行内元素在一行上，一行可以显示多个。
（2）高、宽直接设置是无效的。
（3）宽度、高度就是它本身内容的宽度和高度，
（4）行内元素只能容纳文本或则其他行内元素。

注意：

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

行内块元素：

它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点：

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

标签显示模式转换display

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

注意：

对于这点我一直以为是行内块元素除了能够设置宽高以外与行内元素相同，知道我写项目的时候遇到了这种情况才发现他们的不同。