CSS之块级元素、行内元素、行内块元素

148 阅读1分钟

块元素

独占一行 如h1-h6、p、div、ul、ol、li等;

​ 宽高内外边距可以调;

​ 宽度默认是父级宽度100%;

​ 都是容器盒子,里面可以放行内或块级元素。

注意点:文字类元素如p、h1-h6里面不能放块元素div

在这里插入图片描述

行内元素

(也叫内联元素)一行可以放多个 如 a、span、strong、b、em、i、del、s、ins、u等

​ 相邻行内元素在一行上,一行可以显示多个;

​ 宽高直接设置是无效的;

​ 默认宽度就是本身内容宽度;

​ 行内元素只能容纳文本或其他行内元素。

注意点:a里面不能放a,a里面可以放块级元素

  • 行内元素为了照顾兼容性,尽量只设置左右内外边距(一行有多个行内元素情况下),不设置上下内外边距,因为设置了上下也不生效,除非转化为行内块或块级元素才可以。 在这里插入图片描述

行内块元素

同时具有块元素和行内元素的特点,如img、inptut、td

​ 和相邻行内元素(行内块)在一行上,但是之间有空白缝隙。一行可以显示多个

​ 默认宽度是本身内容宽度

​ 高度、行高、内外边距都可以控制(块元素特点) 在这里插入图片描述

tip

  • 把行内元素转换为块元素 用 display:block;

  • 把块元素转换为行内元素 用 display:inline;

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