CSS主流布局

心静如莲_心如止水

已于 2023-05-04 22:19:21 修改

阅读量109

点赞数

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

于 2023-04-30 23:25:00 首次发布

本文链接：https://blog.csdn.net/qq_41994396/article/details/130452719

版权

这篇博客详细介绍了CSS布局的各种主流方法，包括水平居中、垂直居中、两列和三列布局、圣杯布局、双飞翼布局、等分布局、等高布局以及CSS3的多列布局和全屏布局。通过多个视频教程，深入讲解每种布局的实现原理、优缺点及其应用场景。

摘要由CSDN通过智能技术生成

第1章从概念讲起

本章主要讲解布局的概念以及实现布局的注意事项

视频：1-1 什么是布局 (04:34)

第2章水平居中布局

本章从水平居中布局概念入手，主要讲解三种解决方案实现水平居中布局以及三种解决方案的优点与缺点

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>水平居中布局的第一种解决方案</title>
  <style>
    #parent {
      width: 100%;
      height: 200px;
      background: #ccc;
      text-align: center;
    }

    #child {
      width: 200px;
      height: 200px;
      background: #c9394a;
      /* 
        display属性:
        * block:块级元素
        * inline:内联元素(text-align属性有效)
          * width和height属性是无效的
        * inline-block:行内块级元素(块级+内联)
          * width和height属性是有效的
       */
      display: inline-block;

      text-align: left;
    }
  </style>
</head>

<body>
  <!-- 定义父级元素 -->
  <div id="parent">
    <!-- 定义子级元素 -->
    <div id="child">居中布局</div>
  </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>水平居中布局的第一种解决方案</title>
  <style>
    #parent {
      width: 100%;
      height: 200px;
      background: #ccc;
    }

    #child {
      width: 200px;
      height: 200px;
      background: #c9394a;
      /* display的值为table和block */
      display: table;
      /* 
        margin属性:外边距
        * 一个值 - 上右下左
        * 二个值 - 第一个表示上下，第二个表示左右
          * auto - 表示根据浏览器自动分配
        * 三个值 - 第一个表示上，第二个表示左右，第三个表示下
        * 四个值 - 上右下左
       */
      margin: 0 auto;

      position: absolute;
    }
  </style>
</head>

<body>
  <!-- 定义父级元素 -->
  <div id="parent">
    <!-- 定义子级元素 -->
    <div id="child">居中布局</div>
  </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>水平居中布局的第三种解决方案</title>
  <style>
    #parent {
      width: 100%;
      height: 200px;
      background: #ccc;

      /* 开启定位 */
      position: relative;
    }

    #child {
      width: 300px;
      height: 200px;
      background: #c9394a;
      /* 
        当把当前元素设置为绝对定位之后:
        * 如果父级元素没有开启定位的话，当前元素是相对于页面定位的
        * 如果父级元素开启了定位的话，当前元素是相对于父级元素定位的
       */
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
  </style>
</head>

<body>
  <!-- 定义父级元素 -->
  <div id="parent">
    <!-- 定义子级元素 -->
    <div id="child"></div>
  </div>
</body>

</html>

视频：2-8 水平居中布局的第三种解决方案优点与缺点 (02:20)

第3章垂直居中布局

本章从垂直居中布局概念入手，主要讲解两种解决方案实现垂直居中布局以及两种解决方案的优点与缺点

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>垂直居中布局的第一种解决方案</title>
  <style>
    #parent {
      width: 200px;
      height: 600px;
      background: #ccc;
      /* 
        display属性:
        * table:设置当前元素为<table>元素
        * table-cell:设置当前元素为<td>元素(单元格)
       */
      display: table-cell;
      /* 
        vertical-align属性:用于设置文本内容的垂直方向对齐方式
        * top:顶部对齐
        * middle:居中对齐
        * bottom:底部对齐
       */
      vertical-align: middle;
    }

    #child {
      width: 200px;
      height: 200px;
      background: #c9394a;
    }
  </style>
</head>

<body>
  <!-- 定义父级元素 -->
  <div id="parent">
    居中布局
    <!-- 定义子级元素 -->
    <div id="child"></div>
  </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>垂直居中布局的第二种解决方案</title>
  <style>
    #parent {
      width: 200px;
      height: 600px;
      background: #ccc;

      position: relative;
    }

    #child {
      width: 200px;
      height: 200px;
      background: #c9394a;

      position: absolute;
      top: 50%;
      transform: translateY(-50%)
    }
  </style>
</head>

<body>
  <!-- 定义父级元素 -->
  <div id="parent">
    <!-- 定义子级元素 -->
    <div id="child"></div>
  </div>
</body>

</html>