CSS布局技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39963867/article/details/115383206

CSS常见的布局方式

一、5种常见的元素居中方式

1、行内元素居中

text-align：center;  
/*行高设置等于盒子高度*/  
line-height：height;

2、块元素（宽高已知）

/* 使用绝对定位 */ 
position: absolute; 
left: 50%;
top: 50%; 
/*盒子宽高的一半*/
margin-left: -150px;
margin-top: -150px;

3、块元素(宽高未知)

position: absolute;
left: 50%;
top:50%;  
/*偏移50%*/
transform: translateX(-50%) translateY(-50%);

4、flex布局

/*父元素设置*/
display: flex; 
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/

5、margin+绝对定位

position: absolute;
top: 0;
right: 0; 
bottom: 0;
left: 0; 
margin: auto;

二、三栏布局实现的几种方式

三栏布局一般指的是页面中一共有三栏，左右固定宽度，中间自适应的布局
1、利用浮动
原理：浮动元素脱离文档流

html结构

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

css 样式

left {
  float: left;/*左浮动*/
  width: 200px;/*给定宽度*/
  height: 500px;
  background-color: pink;
}

.right {
  float: right;/*右浮动*/
  width: 300px;
  height: 500px;
  background-color: orange;
}

.center {
  height: 400px;
  margin: 0 300px 0 200px;
  /*marin-right：300px; margin-left:200px;*/
  background-color: blue;
}

2、利用绝对定位
原理：绝对定位元素脱离文档流
html结构同上
css 样式

.container {
  position: relative;
}

.left {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 500px;
  background-color:  pink;
}

.right {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
  height: 500px;
  background-color: orange;
}

.center {
  height: 500px;
  margin: 0 300px 0 200px;
  background-color: blue;
}

3、利用 flex 布局
原理：利用了容器项目 order 属性的特点
html结构同上
css样式

.container {
  display: flex;
  height: 600px;
}

.center {
  order: 1;
  flex-grow: 1;/*设置或检索弹性盒子的扩展比率*/
  /*flex:1; 用于平分盒子 不要混淆*/
  background-color: tomato;
}

.left {
  width: 300px;
  height: 600px;
  background-color: lightgreen;
}

.right {
  order: 2;
  width: 200px;
  height: 600px;
  background-color: lightskyblue;
}

4、圣杯布局
圣杯布局其实也是三栏布局，特点是中间内容优先显示
实现思路：

在 container中的 center、left 和 rigth 三列分别设置左浮动
left 和 right 的宽分别设为 200px 和 300px，center 宽度设为 100%
由于浮动 center 会占满整个 container，left 和 right 会被挤到它下面
对 left 设置margin-left：100%，让其回到上一行的左侧
此时会将 center 的左边一部分遮住，所以需要给 container为其设置 padding: 0 300px 0 200px，给left 空出位置
这时left 还没有在左侧，此时需要通过之前设置好的相对定位 position: relative; left：-200px 使其回到最左边
同样，对 right 也设置margin-left：-300px，将 right 也拉回第一行这时再对其设置 position: relative; right：300px;(右盒子的宽度)
html 结构

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

css 样式

方式一：利用浮动+定位实现

.container {
  height: 600px;
  padding: 0 300px 0 200px;
}

.center, .left, .right {
  float: left;
}

.center {
  width: 100%;
  height: 600px;
  background-color: tomato;
}

.left {
  position: relative;
  left: -200px;/*其次向右走200*/
  width: 200px;
  height: 600px;
  margin-left: -100%;/*首先在一行*/
  background-color: lightgreen;
}

.right {
  position: relative;
  left: 300px;
  width: 300px;
  height: 600px;
  margin-left: -300px;
  background-color: lightskyblue;
}

方式二：利用 flex 实现

.container {
  display: flex;
  height: 600px;
}

.center {
  order: 1;
  flex-grow: 1;
  background-color: tomato;
}

.left {
  width: 300px;
  height: 500px;
  background-color: lightgreen;
}

.right {
  order: 2;
  width: 200px;
  height: 500px;
  background-color: lightskyblue;
}

双飞翼布局
双飞翼布局类似圣杯布局，都是为了实现三栏布局，且中间内容部分优先展示

不同点：
圣杯布局利用的是 container 的 padding 来保留左右位置的
而双飞翼布局通过给中间部分（center）的父盒子（center-container）的 margin 来保留左右位置
具体实现
先来看一下 html 结构

<div class="container">
  <div class="center-container">
    <div class="center">这是中间</div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</div>
</div>

在container 的三列 center-container、left、right分别设置左浮动
left 和 right 的宽度分别设置为 300px、200px ，center-wrapper 的宽度设置为 100%
对 left 设置 margin-left：100%，使其回到上一行的最左边
此时 center 中的部分内容会被其遮住，所有对 center-container 设置 margin: 0 300px 0 200px使其不被遮住
对 right 使用 margin-left：-300px，使其回到上一行的最右边，此时就大功告成
所有代码展示如下：
html代码：

 <div class="container clearfix">
    <!-- 第一种和第二种 -->
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>

  <style>
    * {
      margin: 0;
      padding: 0;
    }
    /* 第一种：利用浮动*/
    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }


    .left {
      float: left;
      width: 200px;
      height: 400px;
      background-color: limegreen;
    }

    .right {
      float: right;
      width: 300px;
      height: 400px;
      background-color: yellowgreen;
    }

    .center {
      height: 400px;
      margin: 0 300px 0 200px;
      background-color: tomato;
    } 

    /*第二种：利用绝对定位*/
   .container {
      position: relative;
    }

    .left {
      position: absolute;
      left: 0;
      top: 0;
      width: 200px;
      height: 600px;
      background-color: lightgreen;
    }

    .right {
      position: absolute;
      right: 0;
      top: 0;
      width: 300px;
      height: 600px;
      background-color: lightskyblue;
    }

    .center {
      height: 600px;
      margin: 0 300px 0 200px;
      background-color: tomato;
    }

  /*第三种：利用 flex 布局*/
     HTML结构
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
    .container {
      display: flex;
      height: 600px;
    }

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

    .center {
      flex-grow: 1;
      background-color: tomato;
    }

    .right {
      width: 300px;
      background-color: lightskyblue;
    }

    /* 第四种，圣杯布局，优先显示中间内容  padding值*/
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div> 
   .container {
      height: 600px;
      padding: 0  300px 0 200px;
    }

    .center, .left, .right {
      float: left;
    }

    .center {
      width: 100%;
      height: 600px;
      background-color: tomato;
    }

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

    .right {
     position: relative;
      left: 300px;
      width: 300px;
      height: 600px;
      margin-left: -300px;
      background-color: lightskyblue;
    } 

    /* flex 实现 */
    .container{
      display: flex;
      height: 600px;
    }

    .center {
      order: 1;
      flex-grow: 1;
      background-color: tomato;
    }

    .left {
      width: 200px;
      height: 600px;
      background-color: lightgreen;
    }

    .right {
      order: 2;
      width: 300px;
      height: 600px;
      background-color: lightskyblue;
    } 

    /*第五种：双飞翼布局  通过给中间盒子的父盒子给定margin值*/
    <div class="container">
      <div class="center-container">
        <div class="center">我是中间块</div>
      </div>
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </div>
  
    .container {
      height:600px;
    }

    .center-container,
    .left,
    .right {
      float: left;
      height: 600px;
    }

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

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

    .right {
      width: 300px;
      margin-left: -300px;
      background-color: lightskyblue;
    }

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