详解HTML块级元素内联元素和内联块元素

Posted 2021-04-04 精讲编程语言

html中的标签元素大体被分为三种不同的类型：块级元素、内联元素(又叫行内元素)和内联块元素。

1、块级元素

（1）块级元素特点

①每个块级元素都从新的一行开始，并且其后的元素也另起一行

（一个块级元素独占一行）；

②元素的高度、宽度、行高以及顶和底边距都可设置；

③元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）；

④可以容纳其他内联元素或者其他块元素。

（2）常用的块状元素有：

（3）设置display:block；可以将元素转换块级元素。

2、内联元素

（1）内联元素特点

①和其他元素都在一行上，遇到父级元素边界会自动换行；

②元素的高度、宽度及顶部和底部边距不可设置；

③元素的宽度就是它包含的文字或图片的宽度，不可改变；

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

对于行内元素，需要注意的是：设置宽度width无效，设置高度无效，可以通过设置line-height来设置，设置margin只有左右有效，上下无效，设置padding只有左右有效，上下无效

（2）行内元素的间距问题

两个行内元素在一起，会出现一定的间距，即使将border、padding、margin都设置为零也无济于事，那么怎么才能去除这些间距呢？

将行内元素的直接父级设置font-size=0px;再给行内元素设置字体大小就可以解决。

（3）常用的内联元素有：

（4）设置display:inline;可以将块状元素转换为内联元素

3、内联块元素

内联块元素，也叫行内块元素，现有元素没有归于此类别的，它同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。

（1）它们在布局中表现的行为：

①支持全部样式；

②如果没有设置宽高，宽高由内容决定；

③元素的高度、宽度、行高以及顶和底边距都可设置；

④子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。

（2）常用的内联块元素有：