HTML元素都被CSS赋予了一定的结构属性,我们称之为 display,常见的有三种类型:
display: inline; // 行内元素
display: inline-block; // 行内块元素
display: block; // 块元素
display: none; // 隐藏不可见
我们来解释下这三种有什么区别?分别代表什么意义?
// 行内元素
1、默认元素宽度和元素内容宽度保持一致
2、默认可以和其他行内元素同处一行
3、不能设置宽度(width)、高度(height)、上下外边距(margin-top;margin-bottom)
// 块元素
1、默认元素宽度和父元素保持一致,即占一整行 100%
2、默认从新的一行开始,并且独占一行,所以其他元素只能从新一行开始布局
3、可以设置盒子模型的所有属性,包括宽度、高度、外边距
// 行内块元素
行内块元素具有行内元素和块元素的共同特点
1、默认元素宽度和元素内容宽度保持一致
2、默认可以和其他行内元素同处一行
3、可以设置盒子模型的所有属性,包括宽度、高度、外边距
常见的行内元素有哪些:
常见的块元素有哪些:
其实这些结构属性是可以相互转换的,只要通过设置 display 为相应的值就可以
领取专属 10元无门槛券
私享最新 技术干货