行内元素、块级元素和行内块元素区别

行内元素、块级元素和行内块元素区别

1、块级元素的特点
(1)每个块级元素都从新的一行开始,并且其后得元素也另起一行

(2)元素的 高 宽 行高顶和底边距离都可以设置

(3)元素宽度在不设置得情况下,是它本身父级元素得100% (和父元素得宽度一致),除非设定一个宽度。

(4)可以容纳内联元素和其他块元素

2、行内元素的特点
(1)和其他元素都在一行上

(2)元素的 高 宽 行高顶和底边距离都不可以设置,但是 marginpadding 可以设置,垂直方向的无效

(3)行内元素只能容纳文本或者其他行内元素

3、行内块元素
(1)和相邻行内元素(行内快)在一行上,但是之间会有空白缝隙

(2)元素的 高 宽 行高顶和底边距离都可以设置

(3)默认宽度就是它本身内容的宽度

常用的块状元素有:

...

      、、
      -- 引用 、

      常用的内联元素有:


      常用的内联块状元素有:

      4、行内元素 和块级元素的转换
      display : block;
      《大白话:将显示形式设置为块级元素》

      display : inline;
      《大白话:将显示形式设置为行内元素》

      display : inline-block;
      《大白话:inline-block 的元素(如input、img)既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性,比如 inline-block 元素也可以设置 vertical-align(因为这个垂直对齐属性只对设置了inline-block的元素有效) 属性。
      HTML 中的换行符、空格符、制表符等合并为空白符,字体大小不为 0 的情况下,空白符自然占据一定的宽度,使用inline-block 会产生元素间的空隙。》

      在简单一点说:就是具有了块级元素和行内元素的各自特点。
      1、可以设置宽高
      2、不换行

      你可能感兴趣的:(HTML/CSS)