display属性值block,inline和inline-block简单介绍

快乐打工仔 分类:实例代码

本章节简单介绍一下display三个重要的属性值的主特点,需要的朋友可以做一下参考。

一.block属性值:

当元素的display属性值为block的时候,说明此元素为块级元素,此种类型元素具有如下特点:

(1).元素会独占一行,多个block元素会各自新起一行。默认情况下,元素宽度自动填满其父元素宽度。

(2).元素可以设置width,height属性。

(3).元素可以设置margin和padding属性。

二.inline属性值:

当元素的display属性值为block的时候,说明此元素为内联元素,此种类型元素具有如下特点:

(1).元素不会独占一行,相邻的行内元素会排列在同一行里,直到排列不下,才会新换一行。

(2).元素宽度随元素的内容而变化。

(3).元素设置width,height属性无效。

(4).元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom边距效果会产生异常。

三.inline-block属性值:

当元素的display属性值为inline-block的时候,说明此元素为内联块级元素。

所谓内联块级元素,也就是兼具内联元素和块级元素的特点,主要特点如下:

(1).能够设置元素的width和height值。

(2).默认情况下,宽度不会填充父元素的宽度。

(3).能够在同一行排列。

(4).能够设置内外边距。

display属性值block,inline和inline-block简单介绍

回复

我来回复
  • 暂无回复内容