CSS布局所需的显示类型

一、块级元素

块级元素是指在HTML文档中单独占据一行的元素。通常情况下，块级元素的宽度是默认设置为父容器的宽度。我们可以通过设置元素的width样式来改变元素的宽度。另外，块级元素的高度也是可以设置的，可以通过设置元素的height样式来改变元素的高度。

块级元素具有默认的盒模型：

<div>
  <p>这里是块级元素</p>
</div>

块级元素还有一个重要的属性display属性，可以设置为block或者inline-block，如果设置为block的话元素会被显示为块级元素，如果设置为inline-block的话元素会以内联块的形式展示。

<div style="display:block;width:100px;height:100px;background-color:red">
  这里是一个div元素
</div>

二、内联元素

内联元素是指在HTML文档中不独占一行的元素。一般情况下，内联元素的宽度是默认的，会根据元素的内容自适应调整。但是，内联元素的高度是不可设置的，因为其高度是由元素的内容撑起的。

内联元素也有默认的盒模型：

<a href="#">链接地址</a>

内联元素同样具有display属性，可以设置为inline或者inline-block。如果设置为inline-block的话元素会以内联块的形式展示。

<a style="display:inline-block;width:100px;height:100px;background-color:red">链接地址</a>

三、浮动元素

浮动元素是指元素脱离普通文档流并向左或向右浮动。浮动元素主要用于图文混排和布局，可以让文本环绕在元素周围。但是，需要注意的是，浮动元素没有固定宽高，因为宽高是由浮动的内容决定的。

浮动元素可以通过CSS的float属性来设置。可以设置为left、right或none。设置为left和right就是让元素向左或向右浮动，设置为none时则是取消浮动。

<div style="float:left;width:200px;height:100px;background-color:red">
这里是浮动元素
</div>

四、定位元素

定位元素是指根据自身的位置属性来定位的元素，通过CSS中的position属性来设置。

定位元素可以脱离文档流，并且可以通过z-index属性来设置元素在页面中的层次关系。可以设置为static、relative、absolute和fixed。其中，static是默认值，表示不进行定位；relative表示相对于自身所在的位置进行定位；absolute表示相对于其父元素进行定位；fixed则是相对于浏览器窗口进行定位。

<div style="position:relative;left:50px;top:50px;width:100px;height:100px;background-color:red">
这里是定位元素
</div>

五、弹性布局元素

弹性布局是CSS3中新增的一种布局方式，可以快速实现响应式布局。弹性布局的容器中可以包含多个弹性元素，通过设置元素的flex属性来控制元素的排列方式。flex容器的主轴和副轴位置可以根据内容的需求进行调整，使得布局更加灵活。

弹性布局元素需要设置为display:flex或者display:inline-flex。其中，display:flex通常用于容器元素，而display:inline-flex则是用于内联元素的情况。

<div style="display:flex;justify-content:space-between;font-size:20px">
  <span>这里是弹性元素1</span>
  <span>这里是弹性元素2</span>
  <span>这里是弹性元素3</span>
</div>

六、栅格布局元素

栅格布局是一种基于栅格系统的响应式布局方式，可以简单快速地进行页面布局。栅格布局元素需要设置为display:grid，栅格元素则需要设置为grid-column和grid-row。

<div style="display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);grid-gap:10px">
  <div style="grid-column:1/2;grid-row:1/2;background-color:red"></div>
  <div style="grid-column:2/3;grid-row:1/2;background-color:yellow"></div>
  <div style="grid-column:3/4;grid-row:1/2;background-color:blue"></div>
  <div style="grid-column:1/2;grid-row:2/3;background-color:green"></div>
  <div style="grid-column:2/4;grid-row:2/3;background-color:black"></div>
  <div style="grid-column:1/4;grid-row:3/4;background-color:gray"></div>
</div>

七、总结

CSS布局所需的显示类型可以从多个维度进行分类。块级元素和内联元素是最基本的两种显示类型，分别代表着单独占据一行以及不独占一行的元素。而浮动元素和定位元素则更多地用于布局中，可以使得页面元素具有更加灵活的呈现效果。弹性布局和栅格布局是近年来受到广泛关注和应用的布局方式，可以快速实现响应式布局，适用于各种屏幕尺寸。选择适合自己的布局方式能够让页面在视觉上更加美观并提高用户体验。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/254486.html