CSS display属性全面解析

发布时间：2023-05-23

CSS display属性用于定义HTML元素如何展示在页面上，是CSS中最常用的属性之一。本篇文章将从多个方面对CSS display属性做详细的阐述，包括display的基本用法、常见属性值、对盒模型的影响、与浮动、定位的关系等。

一、基本用法

display属性可以用于所有元素上，并且需要指定属性值。

/* 将元素的display属性设置为block */
div {
    display: block;
}

上述代码将将div元素的display属性设置为block，使其以块级元素的方式在页面上展示。

二、常见属性值

1. block

block属性值会使元素以块级元素的方式展示在页面上，即元素会从上至下独占一行，除非使用CSS进行样式覆盖。

/* 将元素的display属性设置为block */
div {
    display: block;
}

2. inline

inline属性值会使元素以内联元素的方式展示在页面上，即元素不会独占一行，会和其他元素在同一行内展示。

/* 将元素的display属性设置为inline */
span {
    display: inline;
}

3. inline-block

inline-block属性值会使元素以内联块级元素的方式展示在页面上，即元素在同一行内展示，但可以设置宽度、高度、上下边距和内边距等属性。

/* 将元素的display属性设置为inline-block */
button {
    display: inline-block;
    width: 120px;
    height: 40px;
    margin: 20px;
    padding: 10px;
    border-radius: 5px;
    background-color: #007aff;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}

4. none

none属性值会使元素在页面上不显示，一般用于动态控制元素的显示和隐藏。

/* 将元素的display属性设置为none */
div.warning {
    display: none;
}

三、对盒模型的影响

display属性对盒模型有一定的影响，这是因为不同的display属性会影响元素的尺寸计算方式。 在盒模型中，元素的尺寸由width、height、padding、border和margin这些属性共同决定。 下面以块级元素为例：

1. width

对于块级元素，设置width属性仅会影响元素的内容区域的宽度（不包括边框和内边距），而不会影响元素的外部尺寸。但是如果设置了box-sizing属性为border-box，则width属性会包括内边距和边框。

/* 将元素的width属性设置为100px */
div {
    display: block;
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 1px solid #000;
    margin: 20px;
    box-sizing: border-box;
}

2. height

对于块级元素，设置height属性会影响元素的内容区域的高度（不包括边框和内边距），并且会影响元素的外部尺寸。

/* 将元素的height属性设置为100px */
div {
    display: block;
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 1px solid #000;
    margin: 20px;
}

3. padding

对于块级元素，设置padding属性会影响元素的内容区域大小，会使内容区域缩小，从而影响元素的大小。

/* 将元素的padding属性设置为10px */
div {
    display: block;
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 1px solid #000;
    margin: 20px;
}

4. border

对于块级元素，设置border属性会影响元素的外部尺寸，从而影响元素的大小。如果元素本身没有设置宽度和高度，则边框会撑开元素的尺寸。

/* 将元素的border属性设置为1px solid #000 */
div {
    display: block;
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 1px solid #000;
    margin: 20px;
}

5. margin

对于块级元素，设置margin属性会影响元素与其他元素之间的距离。

/* 将元素的margin属性设置为20px */
div {
    display: block;
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 1px solid #000;
    margin: 20px;
}

四、与浮动、定位的关系

display属性与浮动和定位属性也有一定的关系。

1. 与浮动的关系

对于块级元素，如果设置了float属性为left或right，则会使元素以浮动的方式展示在页面上，从而影响后续元素的布局。在设置了float属性后，元素的display属性会自动变为block。

/* 将元素的float属性设置为left */
div {
    float: left;
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 1px solid #000;
    margin: 20px;
}

2. 与定位的关系

对于块级元素，如果设置了position属性为absolute，则会使元素以绝对定位的方式展示在页面上，从而脱离文档流并可以自由定位。在设置了position属性后，元素的display属性会自动变为block。

/* 将元素的position属性设置为absolute */
div {
    position: absolute;
    top: 100px;
    left: 100px;
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 1px solid #000;
}

五、总结

CSS display属性是CSS中最常用的属性之一，对HTML元素的展示方式产生了重要的影响。在使用display属性时，需要根据具体的需求选择合适的属性值，以达到最佳的展示效果。同时，display属性与盒模型、浮动、定位等属性之间也有一定的关系，需要在使用时注意它们之间的影响。

推荐文章