CSS基础布局

发表于 2023-03-11 | 更新于 2023-03-16 | 分类于 Major

居中布局
三栏布局
BMW WARNING

居中布局

居中布局概述

方案	宽高固定
flex	否
position+transition	否
position+margin	是
display:table-cell	是

几种实现方案使用共同的类样式：

.simulated_body {
  resize: both;
  overflow: scroll;
  width: 50%;
}

.example {
  background-color: #eee;
  overflow: hidden;
  height: 200px;
}

.cell {
  width: 100px;
  height: 100px;
  background: lightblue;
  text-align: center;
}

flex

flex 实现居中比较简单，该方案无需宽高固定，当前用得比较多。

<h3>flex</h3>
<div class="simulated_body">
  <section
    class="example"
    style="display: flex;justify-content: center;align-items: center;"
  >
    <div class="cell">
      I am a bucolic migrant worker but I never walk backwards.
    </div>
  </section>
</div>

position+transform

position+transform 实现在 flex 之前比较常见，该方案无需宽高固定。

<h3>position+transform</h3>
<div class="simulated_body">
  <section class="example" style="position: relative;">
    <div
      class="cell"
      style="position: absolute;top: 50%;left: 50%;transform:translate(-50%, -50%)"
    >
      I am a bucolic migrant worker but I never walk backwards.
    </div>
  </section>
</div>

position+margin

position+margin 细分由两种方式，两种细分方案都需宽高固定，
主要不同点在于 magin 设定 auto 还是负值。

<h3>position+margin:auto</h3>
<div class="simulated_body">
  <section class="example" style="position: relative;">
    <div
      class="cell"
      style="margin: auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;"
    >
      I am a bucolic migrant worker but I never walk backwards.
    </div>
  </section>
</div>
<h3>position+margin:负值</h3>
<div class="simulated_body">
  <section class="example" style="position: relative;">
    <div
      class="cell"
      style="margin: -50px 0 0 -50px;position: absolute;top: 50%;left:50%"
    >
      I am a bucolic migrant worker but I never walk backwards.
    </div>
  </section>
</div>

table-cell

table-cell 布局来实现局限性较大，较少使用。
该方案需宽高固定，另外需要注意的是，table-cell 设定百分比宽度无效。

<h3>table-cell</h3>
<div class="simulated_body">
  <section
    class="example"
    style="display: table-cell;vertical-align: middle;width: 500px;"
  >
    <div class="cell" style="margin: auto">
      I am a bucolic migrant worker but I never walk backwards.
    </div>
  </section>
</div>

三栏布局

三栏布局概述

三栏布局是最常见的基本布局，其有多重实现方式，
后续三种实现方式的示例中，使用统一的基本样式为

.simulated_body {
  resize: both;0
  overflow: scroll;
  width: 50%;
}

.example {
  background-color: #eee;
  overflow: hidden;
}

.cell {
  width: 50px;
  height: 50px;
  background: lightblue;
}

.text {
  background: violet;
  height: 100px;
}

布局中的关键样式，通过书写内联样式来方便对比查看。

基础三栏布局

基础三栏布局主要运用了 float、overflow 等属性来实现,
其中，overflow 用于形成 BFC 来排斥外部浮动元素

<h3>基础三栏布局</h3>
<div class="simulated_body">
  <section class="example">
    <div class="cell" style="float: left; "></div>
    <div class="cell" style="float: right; "></div>
    <div class="text" style="overflow: hidden;">
      I am a bucolic migrant worker but I never walk backwards.
    </div>
  </section>
</div>

圣杯布局

圣杯布局主要运用了 float、margin、position 等属性来实现，
使用 margin 负值来拖拽元素，使用 padding 正值来预留左右占位空间。

<h3>圣杯布局</h3>
<div class="simulated_body">
  <section class="example" style="padding: 0 50px; ">
    <div class="text" style="float: left;width: 100%;">
      I am a bucolic migrant worker but I never walk backwards.
    </div>
    <div
      class="cell"
      style="float: left;margin-left: -100%;position: relative;left: -50px;"
    ></div>
    <div class="cell" style="float: left;margin-right: -50px;"></div>
  </section>
</div>

双飞翼布局

双飞翼布局主要运用了 float、margin、等属性来实现，同时为内容 DOM 添加了包裹层，
使用 margin 负值来拖拽元素，正值来预留左右占位空间。

<h3>双飞翼布局</h3>
<div class="simulated_body">
  <section class="example">
    <div class="content" style="float: left; width: 100%">
      <div class="text" style="margin: 0 50px;">
        I am a bucolic migrant worker but I never walk backwards.
      </div>
    </div>
    <div class="cell" style="float: left; margin-left: -100%;"></div>
    <div class="cell" style="float: left; margin-left: -50px;"></div>
  </section>
</div>