一、块状元素的特点
(1)比较霸道,自己独占一行。
(2)高度、宽度、外边距以及内边距都可以自定义。
(3)宽度默认是容器(父级宽度)的100%
(4)可以当做容器使用,里面可以放文本,可以放其它块状元素和内联元素。
附:常见的块元素有<h1>~<h6>
、<p>
、<div>
、<ul>
、<ol>
、<li>等,
其中<div>
标签是最典型的块元素。
二、行内元素(内联元素)的特点
(1)相邻的行内元素像文本一样,自左向右依次排列。
(2)高、宽直接设置是无效的。
(3)默认宽度就是它本身内容的宽度。
(4)行内元素只能容纳文本或者其它行内元素。
附:常见的行内元素有<a>
、<strong>
、<b>
、<em>、
、<del>、<u>、<span>
等,其中<span>
标签是最典型的行内元素。
三、行内块元素的特点
(1)和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙,一行可以显示多个。
(2)默认宽度就是它本身内容的宽度。
(3)高度,行高,内外边距都是可以控制。
四、三种模式区别总结
元素类型 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
---|---|---|---|---|
块状元素 | 单行只能放一个块状元素 | 可以设置高宽度 | 父级宽度100% | 可以包括所有标签 |
行内元素 | 单行可以放多个行内元素 | 不能直接设置高宽度 | 自身宽度 | 容纳其它行内元素 |
行内块元素 | 单行可以多个行内块元素 | 可以设置高宽度 | 自身内容的宽度 |
逆战 -杨佳铭