手记

【九月打卡】第21天 一课全面掌握主流CSS布局 课程全集

ToRAmen
2022-09-27 23:25:51浏览 1382

课程名称： 一课全面掌握主流CSS布局

课程章节： 课程全集

主讲老师： KingJ

课程内容：

今天学习的内容包括：

如何实现主流的CSS布局

课程收获：

问答：

问题：在全屏布局中, 不同分辨率该如何处理
回答：
1.可以设置百分比宽度。
2.根据媒体查询 设置不同分辨率下 输入框的固定宽度
如下：

@media screen and (max-width: 1920){

input.xxx{width: 200px} 

}@media screen and (max-width: 1780){

input.xxx{width: 180px} 

}

笔记：

使元素脱离文档流的三种方法：

  1. 让元素浮动float:left/right;

  2. 给元素添加绝对定位属性position:absolute;

  3. 给元素添加固定定位属性position:fixed;

这三种方法使元素脱离了文档流，会导致margin属性的值无效

两列、三列布局

  1. 浏览器兼容好，但需要根据宽度进行调整（耦合性低）
    .left{float:left；}
    .right{margin-left:left的宽度；}
  2. 兼容好，overflow隐藏后无法解决不隐藏的子级
    .left{float:left；}
    .right{overflow:hidden；}
  3. table使用后需要对表格默认的相关属性进行调整
    父元素{display：table；table-layout:fixed；}
    left，right{display：table-cell；}

position : absolute属性 的两种情况

  1. 当父级元素没有开启定位的话，则子级元素是相对于页面的绝对定位。

  2. 当父级元素开启了定位的话，则是相对于父级元素的。

当把当前元素设置为绝对定位之后：

  • 如果父级元素没有开启定位：当前元素是相对于页面定位的。

  • 如果父级元素开启了定位：当前元素是相对于父级元素定位。

怎么给父级元素开启定位？

  • 将父级元素的position属性设置为relative/fixed/absolute

实现不定宽块状元素水平居中的方法：

  1. 通过给父元素设置float:left然后父元素设置position:relative;left:50%，子元素设置position:relative；left:-50%来实现水平居中。

  2. 把元素放在表格单元里，给元素外面套一层<table>...</table>，利用表格不定义宽度时不自动设置成body元素宽度，而是由内容撑开的特性，给table标签设置margin:0 auto;实现水平居中。

margin属性设置:

一个值 : 表示上右下左的外边距相同

两个值 : 第一个表示上下外边距 第二个表示左右外边距

三个值 : 第一个表示上边距 第二个表示左右外边距 第三个表示下外边距

四个值 : 分别表示上右下左的边距

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

Transform：translateX(x)（向X轴便宜量，可以是px，也可以是%）

实例代码：

/01-01 水平居中布局的第一种解决方案.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;
      /* 
        text-align属性:是为文本内容设置对齐方式
        * left:左对齐
        * center:居中对齐
        * right:右对齐
       */
      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>

/01-02 水平居中布局的第二种解决方案.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>

/01-03 水平居中布局的第三种解决方案.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>

/02-01 垂直居中布局的第一种解决方案.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;
      /* 
        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>

/02-02 垂直居中布局的第二种解决方案.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>

/03-01 居中布局的第一种解决方案.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: 1000px;
      height: 600px;
      background: #ccc;
      /* <td> */
      display: table-cell;
      vertical-align: middle;
    }

    #child {
      width: 200px;
      height: 200px;
      background: #c9394a;
      /* <table> */
      display: block;
      margin: 0 auto;
    }
  </style>
</head>

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

</html>

/03-02 居中布局的第二种解决方案.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: 1000px;
      height: 600px;
      background: #ccc;

      position: relative;
    }

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

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

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

</html>

/04-01 两列布局的第一种解决方案.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>
    #left,
    #right {
      height: 300px;
    }

    #left {
      /* 定宽 */
      width: 400px;
      background-color: #c9394a;
      /* 当前元素脱离文档流 */
      float: left;
    }

    #right {
      background-color: #cccccc;

      margin-left: 400px;
    }

    #inner {
      height: 300px;
      background-color: green;

      clear: both;
    }
  </style>
</head>

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

</html>

/04-02 两列布局的第一种解决方案优化版.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>
    #left,
    #right {
      height: 300px;
    }

    #left {
      /* 定宽 */
      width: 400px;
      background-color: #c9394a;
      /* 当前元素脱离文档流 */
      float: left;
      /* 设置显示层级更高 */
      position: relative;
    }

    /* 自适应 */
    #right-fix {
      /* 设置为浮动，导致默认宽度值为 0 */
      float: right;
      width: 100%;
      margin-left: -400px;

      background-color: hotpink;
    }

    #right {
      background-color: #cccccc;
    }

    #inner {
      background-color: green;
      height: 300px;

      clear: both;
    }
  </style>
</head>

<body>
  <div id="left"></div>
  <!-- 为自适应元素定位父级元素 -->
  <div id="right-fix">
    <div id="right">
      <div id="inner"></div>
    </div>
  </div>
</body>

</html>

/04-03 两列布局的第二种解决方案.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>
    #left,
    #right {
      height: 300px;
    }

    #left {
      /* 定宽 */
      width: 400px;
      background-color: #c9394a;

      float: left;
    }

    #right {
      background-color: #cccccc;
      /* 开启BFC模式 - 当前元素的内部环境与外界完全隔离 */
      overflow: hidden;
    }
  </style>
</head>

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

</html>

/04-04 两列布局的第三种解决方案.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 {
      /* 表格的单元格的宽度会自动分配 */
      display: table;
      table-layout: fixed;

      width: 100%;
    }

    #left,
    #right {
      height: 300px;

      display: table-cell;
    }

    #left {
      /* 定宽 */
      width: 400px;
      background-color: #c9394a;
    }

    #right {
      background-color: #cccccc;
    }
  </style>
</head>

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

</html>

/05-01 三列布局的第一种解决方案.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>
    #left,
    #center,
    #right {
      height: 300px;
    }

    #left {
      /* 定宽 */
      width: 400px;
      background-color: #c9394a;

      float: left;
    }

    #center {
      width: 400px;
      background-color: green;

      float: left;
    }

    #right {
      background-color: #cccccc;

      margin-left: 800px;
    }
  </style>
</head>

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

</html>

/06-01 三列布局补充一.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>
    #left,
    #center,
    #right {
      height: 300px;
    }

    #left,
    #right {
      width: 300px;
    }

    #left {
      background-color: #c9394a;

      float: left;
    }

    #center {
      background-color: green;

      margin-left: 300px;

      margin-right: 300px;
    }

    #right {
      background-color: #cccccc;

      float: right;
    }
  </style>
</head>

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

</html>

/06-02 圣杯布局.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 {
      height: 300px;
      /* 对应的是left元素的宽度 */
      margin-left: 300px;
      /* 对应的是right元素的宽度 */
      margin-right: 300px;
    }

    #left,
    #center,
    #right {
      height: 300px;

      float: left;
    }

    #left,
    #right {
      width: 300px;
    }

    #left {
      background-color: #c9394a;
      /* 将当前元素从当前行，移动上一行同一个位置 */
      margin-left: -100%;

      position: relative;
      /* 将当前元素移动到理想位置 */
      left: -300px;
    }

    #center {
      /* 为父级元素宽度的100% */
      width: 100%;
      background-color: green;
    }

    #right {
      background-color: #cccccc;

      margin-left: -300px;

      position: relative;
      right: -300px;
    }
  </style>
</head>

<body>
  <div id="parent">
    <div id="center"></div>
    <div id="left"></div>
    <div id="right"></div>
  </div>
</body>

</html>

/07-01 双飞翼布局.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 {
      height: 300px;
    }

    #left,
    #center,
    #right {
      height: 300px;

      float: left;
    }

    #left,
    #right {
      width: 300px;
    }

    #left {
      background-color: #c9394a;
      /* 将当前元素从当前行，移动上一行同一个位置 */
      margin-left: -100%;
    }

    #center {
      /* 为父级元素宽度的100% */
      width: 100%;
      background-color: green;
    }

    #right {
      background-color: #cccccc;

      margin-left: -300px;
    }

    #inner {
      height: 300px;
      background-color: hotpink;
      /* 对应的是left元素的宽度 */
      margin-left: 300px;
      /* 对应的是right元素的宽度 */
      margin-right: 300px;
    }
  </style>
</head>

<body>
  <div id="parent">
    <div id="center">
      <div id="inner"></div>
    </div>
    <div id="left"></div>
    <div id="right"></div>
  </div>
</body>

</html>

/08-01 等分布局的第一种解决方案.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>
    .col1,
    .col2,
    .col3,
    .col4 {
      height: 300px;
      width: 25%;
      float: left;
    }

    .col1 {
      background-color: hotpink;
    }

    .col2 {
      background-color: lightblue;
    }

    .col3 {
      background-color: green;
    }

    .col4 {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <!-- 作为父级容器 -->
  <div id="parent">
    <div class="col1"></div>
    <div class="col2"></div>
    <div class="col3"></div>
    <div class="col4"></div>
  </div>
</body>

</html>

/08-02 等分布局的第二种解决方案.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%;
      /* <table> */
      display: table;
    }

    .col1,
    .col2,
    .col3,
    .col4 {
      height: 300px;
      /* <td> */
      display: table-cell;
    }

    .col1 {
      background-color: hotpink;
    }

    .col2 {
      background-color: lightblue;
    }

    .col3 {
      background-color: green;
    }

    .col4 {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <!-- 作为父级容器 -->
  <div id="parent">
    <div class="col1"></div>
    <div class="col2"></div>
    <div class="col3"></div>
    <div class="col4"></div>
  </div>
</body>

</html>

/08-03 等分布局的第一种解决方案修改版.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-fix {
      overflow: hidden;
    }

    #parent {
      height: 300px;

      margin-left: -10px;
    }

    .col1,
    .col2,
    .col3,
    .col4 {
      height: 300px;
      width: 25%;
      float: left;

      box-sizing: border-box;

      padding-left: 10px;
    }

    .inner {
      height: 300px;
    }

    .col1 .inner {
      background-color: hotpink;
    }

    .col2 .inner {
      background-color: lightblue;
    }

    .col3 .inner {
      background-color: green;
    }

    .col4 .inner {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <div class="parent-fix">
    <!-- 作为父级容器 -->
    <div id="parent">
      <div class="col1">
        <div class="inner"></div>
      </div>
      <div class="col2">
        <div class="inner"></div>
      </div>
      <div class="col3">
        <div class="inner"></div>
      </div>
      <div class="col4">
        <div class="inner"></div>
      </div>
    </div>
  </div>
</body>

</html>

/08-04 等分布局的第二种解决方案修改版.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-fix {
      overflow: hidden;
    }

    #parent {
      width: 1434px;
      /* <table> */
      display: table;

      margin-left: -10px;
    }

    .col1,
    .col2,
    .col3,
    .col4 {
      height: 300px;

      display: table-cell;

      box-sizing: border-box;
      padding-left: 10px;
    }

    .inner {
      height: 300px;
    }

    .col1 .inner {
      background-color: hotpink;
    }

    .col2 .inner {
      background-color: lightblue;
    }

    .col3 .inner {
      background-color: green;
    }

    .col4 .inner {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <div id="parent-fix">
    <!-- 作为父级容器 -->
    <div id="parent">
      <div class="col1">
        <div class="inner"></div>
      </div>
      <div class="col2">
        <div class="inner"></div>
      </div>
      <div class="col3">
        <div class="inner"></div>
      </div>
      <div class="col4">
        <div class="inner"></div>
      </div>
    </div>
  </div>
</body>

</html>

/09-01 等高布局的第一种解决方案.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 {

      display: table;
    }

    #left,
    #right {
      width: 300px;
      /* 表格的单元格默认是等高的 */
      display: table-cell;
    }

    #left {
      background-color: #c9394a;
    }

    #right {
      background-color: #cccccc;
    }
  </style>
</head>

<body>
  <div id="parent">
    <div id="left">imooc</div>
    <div id="right">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit amet eaque assumenda neque
      repudiandae ad ratione nulla quae quod soluta, debitis tempore aliquid recusandae cupiditate, in maiores
      distinctio obcaecati a?</div>
  </div>
</body>

</html>

/09-02 等高布局的第二种解决方案.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 {
      overflow: hidden;
    }

    #left,
    #right {
      width: 300px;

      float: left;

      padding-bottom: 9999px;
      margin-bottom: -9999px;
    }

    #left {
      background-color: #c9394a;
    }

    #right {
      background-color: #cccccc;
    }
  </style>
</head>

<body>
  <div id="parent">
    <div id="left">imooc</div>
    <div id="right">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit amet eaque assumenda neque
      repudiandae ad ratione nulla quae quod soluta, debitis tempore aliquid recusandae cupiditate, in maiores
      distinctio obcaecati a?</div>
  </div>
</body>

</html>

/10-01 CSS3的多列布局.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>CSS3的多列布局</title>
  <style>
    #parent,
    #parent2,
    #parent3 {
      /* column-count: 4;
      column-width: 300px; */

      columns: 4 300px;

      column-gap: 20px;

      /* column-rule-width: 5px;
      column-rule-color: tomato;
      column-rule-style: double; */

      column-rule: 5px tomato double;
    }

    .col1,
    .col2,
    .col3,
    .col4,
    .col5 {
      height: 300px;
    }

    .col1,
    .col6 {
      background-color: hotpink;
    }

    .col2,
    .col7 {
      background-color: lightblue;
    }

    .col3.col8 {
      background-color: green;
    }

    .col4,
    .col9 {
      background-color: yellow;
    }

    .col5 {
      background-color: tomato;

      column-span: all;
    }

    .col6,
    .col7,
    .col8,
    .col9 {
      column-fill: balance;
    }
  </style>
</head>

<body>
  <!-- 作为父级容器 -->
  <div id="parent">
    <div class="col1"></div>
    <div class="col2"></div>
    <div class="col3"></div>
    <div class="col4"></div>
  </div>
  <div id="parent2">
    <div class="col5"></div>
  </div>
  <div id="parent3">
    <div class="col6">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum possimus aliquid nostrum provident
      est esse necessitatibus mollitia error, tempore voluptate nobis odio alias, ab animi reprehenderit repellat
      perferendis voluptas rerum!</div>
    <div class="col7">Lorem ipsum dolor sit, amet consectetur adipisicing elit. A, quibusdam vel! Provident consequatur
      voluptates quibusdam consectetur architecto! Ut eaque aspernatur quibusdam incidunt nobis ipsam quidem, quod
      ullam, velit officia necessitatibus!
    </div>
    <div class="col8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dicta officia porro error
      suscipit. Nostrum, deleniti laborum. Sed odit, nemo, ducimus dolores rem reprehenderit soluta ipsam nesciunt id
      unde accusamus.</div>
    <div class="col9">imooc</div>
  </div>
</body>

</html>

/11-01 全屏布局.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>
    html,
    body {
      margin: 0;
      overflow: hidden;
    }

    header {
      height: 100px;

      position: fixed;
      top: 0;
      left: 0;
      right: 0;

      background-color: lightgray;
    }

    .content {
      position: fixed;
      left: 0;
      right: 0;
      top: 100px;
      bottom: 100px;

      overflow: auto;

      background-color: lightblue;
    }

    .content .left {
      width: 300px;
      height: 100%;

      position: fixed;
      left: 0;
      top: 100px;
      bottom: 100px;

      background-color: lightcoral;
    }

    .content .right {
      height: 1000px;
      margin-left: 300px;
      background-color: greenyellow;
    }

    footer {
      height: 100px;

      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;

      background-color: lightslategray;
    }
  </style>
</head>

<body>
  <header></header>
  <div class="content">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <footer></footer>
</body>

</html>

相关标签
Html/CSS
Html5
CSS3
0人推荐
随时随地看视频
慕课网APP

相关阅读

太神奇了，用html+ccs3就能 做出一个太阳系行星！
新手艰难地做完一个仿百度首页，纪念一下
CSS代码在不同浏览器兼容问题第二篇——实例
web前端入门到实战：css基础-float浮动
HTML/CSS面试