一、display属性概述
display属性是CSS中常用的一个属性，它定义了一个元素的盒模型类型，以及其在页面上的布局形式。在HTML文档中，每个HTML标签都有一个默认的display值，具体值随标签而异。除了设置这个默认的内部样式，也可以用CSS来设置 display 属性进行样式覆盖，可以将一个元素的display属性设置为“none”来使它从文档流中完全删除，或者将所有的元素设置为inline-block，可以将它们变成行内块元素。display属性在建立布局的过程中扮演着重要的角色。
二、display值详解
1. block
该值使元素成为一个块级元素，即该元素会新起一行并且尽可能撑满容器。通常用于页面布局的容器元素，如div, p等。
div {
display: block;
}
2. inline
该值使元素成为一个内联元素，即元素会在一行内，尽可能占据自身内容的宽度空间。通常用于文字、链接等行内元素。
span {
display: inline;
}
3. inline-block
该值使元素既具有内联元素的特性，又具有块级元素的特性，既可以设置宽高，又可以保持在一行内显示。通常用于菜单、按钮等元素。
button {
display: inline-block;
}
4. none
该值使元素不显示在页面上，相当于在页面中删除该元素。通常用于实现某些交互效果、动态控制元素显示/隐藏等。
.hidden {
display: none;
}
5. flex
该值使元素成为一个伸缩容器，可以通过flex容器中的flex项目的伸缩来改变其尺寸来填充可用空间。通常用于实现复杂的页面布局。
.container {
display: flex;
}
三、display属性在页面布局中的应用
1. 列表布局
利用display属性，我们可以很方便地实现列表布局。比如，将一些按钮放在一行中，并通过设置inline-block的display值，使它们在同一行显示。或者，将一个元素列表放在一列中，并通过设置block的display值，使它们一个下一个地垂直排列。
/* 列表按钮 */
ul {
padding: 0;
margin: 0;
}
li {
display: inline-block;
margin-right: 20px;
}
/* 列表元素 */
ul {
padding: 0;
margin: 0;
}
li {
display: block;
margin-bottom: 10px;
}
2. 页面布局
除了列表布局，我们还可以利用display属性进行页面布局。比如，使用block的display值，设置容器元素的宽度，并通过margin属性使其水平居中。再使用inline-block的display值，设置该容器中的每个元素，使这些元素水平排列。
.container {
width: 960px;
margin: 0 auto;
}
.item {
display: inline-block;
width: 200px;
height: 200px;
}
3. 弹性布局
display:flex属性提供了一种弹性布局的模式，使得我们可以更便捷地实现完整的页面布局。在一个父元素被赋予display:flex之后，它的子元素自身布局就可以随着弹性容器的伸展方便地对齐，并且可以根据需要重新进行布局以适应不同的屏幕尺寸。
.container {
display: flex;
justify-content: space-around;
align-items: center;
}
.item {
width: 200px;
height: 200px;
}
四、不同display值的特性
1. block
块级元素会占据父元素的全部宽度，并且它们会预留一定的空间让其后续元素能够放置在新起的一行上。
2. inline
行内元素不会换行，只会继续填充空余的位置。
3. inline-block
行内块级元素有和行内元素相同的特点，但其也可以控制自身的宽度和高度。
4. none
该元素不会占据任何空间，并且它会完全从文档流中删除，无法再渲染出来。
5. flex
在弹性盒模型中，元素可以在任何方向中进行伸缩，并且它们可以沿着一个轴线进行排列。
五、总结
display属性是CSS中一个非常重要的属性，它决定了网页中元素的布局方式。掌握不同display值的特点和使用方法，能够帮助我们更好地实现各种网页布局。
原创文章，作者：SHFNQ，如若转载，请注明出处：https://www.506064.com/n/371818.html
微信扫一扫 
支付宝扫一扫 