css主流布局，居中布局，圣杯布局

最新推荐文章于 2024-04-06 09:26:14 发布

忘喧

最新推荐文章于 2024-04-06 09:26:14 发布

阅读量238

点赞数

分类专栏： HTML/CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/XiaoYige_97/article/details/125696529

版权

HTML/CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS 主流布局

什么是布局

简单来说就是HTML 页面的整体结构或骨架，类似于传统的报纸或杂志中的排版

布局不是某个结束内容，而是一种设置思想

水平居中布局

inline-block + text-algin 属性配合使用

#parent{
  width: 100%;
  height: 200px;
  background-color: #cc9933;
  text-align: center;
}
#child{
  width: 200px;
  height: 200px;
  background-color: chartreuse;
  display: inline-block;
}

<div id="parent">
	<div id="child"></div>
</div>

解析：
text-align：对文本内容设置对齐方式 // left center right

display: inline-block: 设置为行内元素，这个时候可以把子元素看成文本

table + margin 属性配置使用

通过设置子元素的 margin 实现居中的效果

#parent{
  width: 100%;
  background-color: #cc9933;
}
#child{
  width: 200px;
  height: 200px;
  background-color: chartreuse;
  display: table;
  margin: 0 auto;
}

解析：

display 属性设置为table，是为了让子元素可以设置宽度和高度，至于有没有其他更深的用意我就不知道了，也可以设置其他属性，让子元素可以设置宽高： block,grid,flex等

缺点：如果子级元素脱离文档流，导致 margin 属性的值无效

absolute + transform 属性配合使用

#parent{
  width: 100%;
  height: 200px;
  position: relative;
  background-color: #cc9933;
}
#child{
  width: 200px;
  height: 200px;
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: chartreuse;
}

解析：

子绝父相（子元素绝对定位，父元素相对定位），子元素相对父级元素定位。

left 向右平移父级元素50%， transform 向左平移子元素的50%

优点：父级元素是否脱离文档流，不影响子元素的居中效果

垂直居中布局

table-cell + vertical-algin 属性配合使用

.parent{
  width:200px;
  height: 600px;
  display: table-cell;
  vertical-align: middle;
  background-color: #ccc;
}
.child{
  width: 200px;
  height: 200px;
  background-color:#c9394a
}

解析：

vertical-align属性:用于设置文本内容的垂直方向对齐方式(top,middle,bottom)

display: table-cell：设置当前元素为元素（单元格），td元素可以是设置valign 属性

absolute + transform 属性配饰使用

.parent{
  width:200px;
  height: 600px;
  background-color: #ccc;
  position:relative;
}
.child{
  width: 200px;
  height: 200px;
  background-color:#c9394a;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}

和水平居中类似， transform:translateY(-50%)表示垂直移动

居中布局（水平 + 垂直）

水平居中：table+margin ，垂直居中：table-cell +vertical-algin

.parent{
  width:600px;
  height: 600px;
  background-color: #ccc;
  display: table-cell;
  vertical-align:middle;
}
.child{
  width:200px;
  height:200px;
  background-color:#ff0;
  display: table;
  margin: 0 auto;
}

给子元素设置margin属性和display属性为table,父元素设置display 为table-cell，vertical-align为middle

absolute+transform 实现水平居中和垂直居中

给子元素设置为绝对定位，父元素为相对定位（子绝父相），加上tranlate X Y 偏移

.parent {
    width: 600px;
    height: 600px;
    background-color: #ccc;
    position: relative;
}

.child {
    width: 200px;
    height: 200px;
    background-color: #ff0;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

多列布局（两列）

float + margin 属性配合使用

.left {
  width: 300px;
  height: 400px;
  background-color: #ccc;
  float: left;
}
.right {
  width: 100%;
  height: 400px;
  background-color: rgb(255, 170, 184);
  margin-left: 300px;
}
.inner {
  height: 300px;
  background-color: green;
  clear: both;
  /* 清除浮动 */
}

  <div class="left"></div>
  <div class="right">
      <div class="inner"></div>
  </div>

优点：实现简单

缺点：

要知道顶宽的宽度，藕合性较高

定宽元素浮动与自适应元素不浮动导致浏览器兼容性不好，左列浮动，右列不浮动，两列在不同的文档流中

自适应元素内的元素设置了清除浮动，会影响布局

第一种方案的优化：

.left {
  width: 300px;
  height: 400px;
  background-color: #ccc;
  /* 设置显示层级更高*/
  position: relative;
  float: left;
}


.rigth-fix {
  width: 100%;
  /* background-color: red; */
  float: right;
  margin-left: -300px;  /* 为什么是负数呢 */
}

.right {
  width: 100%;
  height: 400px;
  background-color: green;
  /* margin-left: 300px; */
}

.inner {
  height: 300px;
  background-color: green;
  clear: both;
  /* 清除浮动 */
}
	
<div class="left"></div>
<div class="rigth-fix">
  <div class="right">
    <div class="inner"></div>
  </div>
</div>

解析：

给右列的元素增加一个父级元素，设置浮动的，和margin-left

一个元素浮动一个元素父浮动有浏览器兼容性问题，那么在自适应元素加一个父级元素rigth-fix并且设置为有浮动，可以解决兼容性问题，并且解决自适应元素内设置清除浮动，不再影响布局

float + overflow 属性配合使用

overflow将会开启BFC 模式 ==> 当前元素的内部环境与外界完全隔离

#left{
    width: 300px;
    height: 300px;
    float: left;
    background-color: #c1f;
}
#right{
    height: 300px;
    background-color: #ccc;
    overflow: hidden;  /* 益处是隐藏 */
}

<div id="left"></div>
<div id="right"></div>

解释：

overflow: hidden, 开启BFC模式，当前元素的内部环境与外部完全隔离，开始BFC的方式也有其他

缺点：溢出隐藏，但是在实际开发中，可能想要的不是隐藏，可以是默认或者出现滚动条等

display 属性的 table 相关值设置

给左右两列添加一个父级元素，设置display 属性table；子元素设置display 属性为table-cell,左列指定宽度，那么剩下的都是右列的宽

.parent{
  display: table;
  width: 100%;
  table-layout: fixed; // 布局不受内容影响
}

.left,.right{
  height: 300px;
  display: table-cell;
}
 
.left{
  width: 400px;
  background-color: bisque;
}
.right{
  background-color: blueviolet;
}

<div class="parent">
    <div class="left"></div>
    <div class="right"></div>
</div>

表格的单元格会自动分配，一个table cell 设置了宽度，那么其他table-cell 会自动平均分配剩下的宽度

三列布局

float +margin 属性配合使用

.left,.center,.right{
  height: 300px;
}
.left{
  width: 200px;
  float:left;
  background-color: antiquewhite;
}
.center{
  width: 200px;
  float:left;
  background-color: blueviolet;
}
.right{
  margin-left: 400px;
  background-color: brown;
}

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

解析：

左边两列定宽设置浮动，第三列设置margin-left，属性

优点简单，但是藕合性高，第三列要知道第一列和第二列的宽度之和才行

float + overflow 属性配合使用

.left,.center,.right{
  height: 300px;
}
.left{
  width: 200px;
  float:left;
  background-color: antiquewhite;
}
.center{
  width: 200px;
  float:left;
  background-color: blueviolet;
}
.right{
	/* 开始BFC 模式 */
  overflow: hidden;
  background-color: brown;
}

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

解析：

第一第二列定宽+浮动，第三列开始BFC模式

优点，耦合性低，不用知道第一第二列的宽度之和

display 属性的table 相关值使用

.parent {
  /* 父元素设置table */
  display: table;
	table-layout: fixed; 
  width: 100%;
}

.left,
.center,
.right {
  height: 300px;
  /* 子元素设置为table-cell */
  display: table-cell;
}

.left {
  width: 200px;
  background-color: antiquewhite;
}

.center {
  width: 200px;
  background-color: blueviolet;
}

.right {
  /* table-cell 分配父元素的宽度 */
  background-color: red;
}

圣杯布局

三列布局也叫三行三列布局上部中部（中部左定宽 + 自适应 + 右定宽）底部

.left,
.center,
.right {
  height: 300px;
}

.left {
  width: 200px;
  float: left;
  background-color: antiquewhite;
}

.center {
  margin: 0 210px;
  background-color: blueviolet;
}

.right {
  width: 200px;
  float: right;
  background-color: brown;
}


<div class="left"></div>
<div class="right"></div>
<div class="center"></div>

解析：

前一个元素浮动，后面的元素浮动，那么两个元素还是不可以在同一行显示.

center 放在最后的原因是：如果center 房子中间，那么center 后面的元素，right即使浮动也不会与center不浮动元素同一行
注意：浮动元素前的元素不浮动，那么浮动元素将另起一行

缺点：center 放在了最后面，导致SEO 不好

优化方案

.left,
.center,
.right {
  height: 300px;
  float: left;
}

.parent {
  height: 300px;
  margin-left: 200px;
  margin-right: 200px;
}

.left {
  width: 200px;
  margin-left: -100%;
  position: relative;
  left: -200px; 
  background-color: antiquewhite;
}

.center {
  width: 100%;
  background-color: blueviolet;
}

.right {
  width: 200px;
  margin-right: -100%;
  background-color: brown;
}


<div class="parent">
  <div class="center"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

解析：

center放在了前面，有利于SEO，但是CSS 比较复杂

缺点：有浮动又有定位，比较复杂

双飞翼布局

.parent {
    height: 300px;
  }

  .left,
  .center,
  .right {
    height: 300px;
    float: left;
  }


  .left {
    width: 200px;
    margin-left: -100%;
    background-color: antiquewhite;
  }

  .center {
    width: 100%;
    background-color: blueviolet;
  }

  .inner {
    height: 300px;
    margin-left: 200px;
    margin-right: 200px;
    background-color: yellow;
  }

  .right {
    width: 200px;
    margin-left: -200px;
    background-color: brown;
  }

<div class="parent">
  <div class="center">
    <div class="inner"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</div>

解析：

先有圣杯布局再有双飞翼布局

双飞翼布局针对圣杯布局的优化解决方案，主要是优化了圣杯布局中定位的问题

给center加一个子元素，并且设置左右margin，虽然center左右两边于left和right重合，但是inner没有于两边重合

等分布局

float 属性实现等分布局效果

float 浮动，每列宽度使用百分比

.clo1{
    background-color: hotpink;
}
.clo2{
    background-color: yellow;
}
.clo3{
    background-color: hotpink;
}
.clo4{
    background-color: yellow;
}
.clo5{
    background-color: hotpink;
}

.parent div{
    float: left;
    width: 20%;
    height: 200px;
}


<div class="parent">
    <div class="clo1">1</div>
    <div class="clo2">2</div>
    <div class="clo3">3</div>
    <div class="clo4">4</div>
    <div class="clo5">5</div>
</div>

解析：

利用float 实现分列布局空白间隔区域的实现

display 属性的值有关table 实现等分布局效果

.clo1 {
  background-color: hotpink;
}

.clo2 {
  background-color: yellow;
}

.clo3 {
  background-color: hotpink;
}

.clo4 {
  background-color: yellow;
}

.clo5 {
  background-color: hotpink;
}

.parent {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.parent div {
  display: table-cell;
  float: left;
  width: 20%;
  height: 200px;
}

<div class="parent">
  <div class="clo1">1</div>
  <div class="clo2">2</div>
  <div class="clo3">3</div>
  <div class="clo4">4</div>
  <div class="clo5">5</div>
</div>学习