CSS 布局2（显示方式、水平居中、左侧固定、垂直居中、左右固定）

最新推荐文章于 2024-06-02 17:14:20 发布

转载最新推荐文章于 2024-06-02 17:14:20 发布 · 1.6k 阅读

前端-HTML、CSS、Javascript 专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了CSS布局中的元素显示方式，包括隐藏、块级、内联等，并探讨了水平和垂直居中的方法。此外，还提供了如何实现左右固定、中间自适应布局的实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS 布局显示方式

元素的diplay显示方式有多种，隐藏、块级、内联、内联-块级

1.隐藏
在隐藏章节已经使用过通过display的方式隐藏一个元素
display:none; 使得被选择的元素隐藏，并且不占用原来的位置
```
<style>
div.d{
  display:none;
}
 
</style>
  
<div>可见的div1</div>
<div class="d">隐藏的div2,使用display:none隐藏</div>
<div>可见的div3</div>
```
2.块级
display:block; 表示块级元素
块级元素会自动在前面和后面加上换行，并且在其上的width和height也能够生效

div默认是块级元素
span默认是内联元素(不会有换行,width和height也不会生效)
```
<style>
div,span{
   border: 1px solid lightgray;
   margin:10px;
   width:200px;
   height:100px;
}
 
.d{
  display:block;
}
</style>
  
<div>普通的div块</div>
<span>这是普通span</span> <span>这是普通span</span> <span>这是普通span</span>
<span class="d">这是span,被改造成了块级元素</span>
```
3.内联
display:inline; 表示内联元素
内联元素前后没有换行，并且在其上的width和height也无效。其大小由其中的内容决定

div默认是块级元素
span默认是内联元素
```
<style>
div,span{
   border: 1px solid lightgray;
   margin:10px;
   width:200px;
   height:100px;
}
 
.s{
  display:inline;
}
</style>
 
<span>这是普通span</span> <span>这是普通span</span> <span>这是普通span</span>
  
<div class="s">这是div，被改造成了内联元素</div>
```
4.内联-块级
内联是不换行，但是不能指定大小
块级时能制定大小，但是会换行

有时候，需要元素处于同一行，同时还能指定大小，这个时候，就需要用到内联-块级 inline-block
```
<style>
span{
   display:inline-block;
   border: 1px solid lightgray;
   margin:10px;
   width:100px;
}
</style>
像这样 ，每个都能设置宽度 ，同时还能在同一行。
<br>
 
<span>盖伦</span>
<span>梦多医生</span>
<span>奈德丽</span>
<span>蒸汽机器人</span>
```
5.其他
其他的显示方式像
list-item 显示为列表
table 显示为表格
inline-table 显示为前后无换行的表格
table-cell 显示为单元格
这些就不太常见了

CSS 布局水平居中

1.内容居中

<style>
div{
  border:1px solid lightgray;
  margin:10px;
}
</style>
<div align="center">
通过设置属性align="center" 居中的内容
</div>
 
<div  style="text-align:center">
通过样式style="text-align:center" 居中的内容
</div>

2.元素居中

<style>
  div{
     border: solid 1px lightgray;
     margin: 10px;
  }
  span{
     border: solid 1px lightskyblue;
  }
</style>
<div> 默认情况下div会占用100%的宽度,所以无法观察元素是否居中</div>
 
<div style="width:300px;margin:0 auto">
  设置本div的宽度，然后再使用样式 margin: 0 auto来使得元素居中</div>
 
<span style="width:300px;margin:0 auto">
  span 是内联元素，无法设置宽度，所以不能通过margin:0 auto居中</span>
 
<div style="text-align:center">
  <span>span的居中可以通过放置在div中，然后让div text-align实现居中</span>
</div>

左侧固定，右边自动占满
```
<style>
 .left{
   width:200px;
   float:left;
   background-color:pink
  }
  .right{
    overflow:hidden;
    background-color:lightskyblue;
  }
</style>
 
<div class="left">左边固定宽度</div>
 
<div class="right">右边自动填满</div>
```
overflow:hidden的作用并不是刚好补满剩下的，把这个去掉，也可以观察到补满剩下的效果。
补满剩下效果是float:left做到的，.right会自动补满剩下的。
那么overflow:hidden 它的用途是隐藏多余的高度
这里把overflow:hidden去掉，并且把.right的高度增加，就会看到.right会包围.left。所以需要加上overflow:hidden

CSS 布局垂直居中

1.line-height方式

<style>
#d {
line-height: 100px;
}
div{
  border:solid 1px lightskyblue;
}
</style>
 
<div id="d">line-height 适合单独一行垂直居中</div>

2.内边距方式
借助设置相同的上下内边距，实现垂直居中效果，可以用在多行文本上

<style>
#d {
    padding: 30 0;
}
div{
    border:solid 1px lightskyblue;
}
</style>
 
<div id="d">多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容  </div>

3.table方式
首先通过display: table-cell;把div用单元格的形式显示，然后借用单元格的垂直居中vertical-align: middle; 来达到效果。
这样对图片也可以居中，上一步 line-height就不能对图片居中。

<style>
#d {
display: table-cell;
vertical-align: middle;
height:200px;
}
 
div{
  border:solid 1px lightskyblue;
}
</style>
  
<div id="d">
<img src="example.gif">
</div>

4.左右固定，中间自适应的布局

<style>
 .left{
   width:200px;
   float:left;
   background-color:pink
  }
  .right{
   width:200px;
   float:right;
   background-color:pink
  }
  .center {margin:0 200px;   background-color:lightblue}
</style>
  
<div class="left">左边固定宽度</div>
<div class="right">左边固定宽度</div>
 <div class="center">中间自适应</div>
 
</head>
 
<body>
 
</html>