search

博客列表 >盒模型基础、定位、定位和浮动实现布局和圣杯布局及其思想

盒模型基础、定位、定位和浮动实现布局和圣杯布局及其思想

金牌马甲
金牌马甲原创
2020年08月07日 18:10:29682浏览

盒模型

盒模型基础

代码展示：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>盒模型基础和box-sizing属性</title>
  7.     <style>
  8.       .box {
  9.     width: 200px;
  10.     height: 150px;
  11.   }
  12.   .box.one {
  13.     border: 5px solid black;
  14.     background-color: lightgreen;
  15.     margin: 10px;
  16.     padding: 15px;
  17.     float: left;
  18.     box-sizing: content-box;
  19.     /* 默认盒模型计算公式 = 内容区 + 内边距 + 边框 */
  20.     /* 盒子宽度 = width + padding-left + padding-right + border-left + border-right = 200 + 15 + 15 + 5 + 5 = 240 */
  21.   }
  22.   .box.two {
  23.     border: 5px solid black;
  24.     background-color: lightblue;
  25.     margin: 10px;
  26.     padding: 15px;
  27.     float: left;
  28.     box-sizing: border-box;
  29.     /* 自定义盒模型大小： */
  30.     /* box-sizing: border-box，此时，盒子宽度等于width，高度等于height，内容区被压缩; */
  31.   }
  32. </style>
  33.   </head>
  34.   <body>
  35. <div class="box one">box1</div>
  36. <div class="box two">box2</div>
  37.   </body>
  38. </html>

运行效果：

固定定位、绝对定位、相对定位

代码展示：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>绝对定位、相对定位、固定定位</title>
  7.     <style>
  8.   .box {
  9.     width: 200px;
  10.     height: 200px;
  11.     border: 1px solid black;
  12.   }
  13.   .box.one {
  14.     background-color: lightgreen;
  15.     /* 固定定位，始终对于当前窗口定位 */
  16.     position: fixed;
  17.     top: 50px;
  18.     left: 100px;
  19.   }
  20.   .box.two {
  21.     background-color: lightblue;
  22.     width: 50px;
  23.     height: 50px;
  24.     /* 绝对定位，以父级包含块为参照物定位（父级参照物必须包含定位属性，否则再往上找寻定位父级，直到body/html） */
  25.     position: absolute;
  26.     top: 30px;
  27.     right: 20px;
  28.   }
  29.   .box.three {
  30.     background-color: lightcyan;
  31.     /* 相对定位，相对于自己之前的位置进行定位 */
  32.     position: relative;
  33.     top: 120px;
  34.     left: 10px;
  35.   }
  36. </style>
  37.   </head>
  38.   <body>
  39. <div class="box one">
  40.   box1
  41.   <div class="box two">box2</div>
  42. </div>
  43. <div class="box three">box3</div>
  44.   </body>
  45. </html>

运行效果：

绝对定位实现垂直居中

代码展示：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>绝对定位实现垂直居中</title>
  7.     <style>
  8.   * {
  9.     margin: 0;
  10.     padding: 0;
  11.   }
  12.   .box.one {
  13.     width: 400px;
  14.     height: 500px;
  15.     border: 5px solid black;
  16.     background-color: lightgreen;
  17.     position: relative;
  18.   }
  19.   .box.two {
  20.     width: 200px;
  21.     height: 200px;
  22.     border: 5px dashed black;
  23.     background-color: lightcyan;
  24.     box-sizing: border-box;
  25.     /* 使用绝对定位实现垂直居中。 */
  26.     position: absolute;
  27.     top: 0;
  28.     right: 0;
  29.     bottom: 0;
  30.     left: 0;
  31.     margin-top: auto;
  32.     /* margin-right: auto; */
  33.     margin-bottom: auto;
  34.     /* margin-left: auto; */
  35.     /* margin: auto; */
  36.   }
  37. </style>
  38.   </head>
  39.   <body>
  40.     <div class="box one">
  41.   box1
  42.   <div class="box two">box2</div>
  43. </div>
  44.   </body>
  45. </html>

运行效果：

使用绝对定位实现二列布局

代码展示：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>使用绝对定位实现二列布局</title>
  7.     <style>
  8.   * {
  9.     margin: 0;
  10.     padding: 0;
  11.   }
  12.   .header,
  13.   .footer {
  14.     width: 100%;
  15.     height: 40px;
  16.     background-color: cyan;
  17.   }
  18.   .container {
  19.     width: 1000px;
  20.     min-height: 600px;
  21.     background-color: #eeeeee;
  22.     margin: 10px auto;
  23.     position: relative;
  24.   }
  25.   .left {
  26.     width: 480px;
  27.     min-height: 600px;
  28.     background-color: lightgreen;
  29.     position: absolute;
  30.     margin-right: 20px;
  31.   }
  32.   .right {
  33.     width: 480px;
  34.     min-height: 600px;
  35.     background-color: lightgreen;
  36.     position: absolute;
  37.     right: 0;
  38.   }
  39. </style>
  40.   </head>
  41.   <body>
  42. <div class="header"></div>
  43. <div class="container">
  44.   <div class="left">左侧</div>
  45.   <div class="right">右侧</div>
  46. </div>
  47. <div class="footer"></div>
  48.   </body>
  49. </html>

运行效果：

使用浮动实现三列布局

代码展示：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>使用浮动实现三列布局</title>
  7. <style>
  8.   * {
  9.     margin: 0;
  10.     padding: 0;
  11.     box-sizing: border-box;
  12.   }
  13.   .header,
  14.   .footer {
  15.     height: 40px;
  16.     background-color: lightgreen;
  17.   }
  18.   .container {
  19.     width: 1000px;
  20.     background-color: #eeeeee;
  21.     margin: 10px auto;
  22.     overflow: hidden;
  23.   }
  24.   .left,
  25.   .right {
  26.     width: 200px;
  27.     min-height: 600px;
  28.     background-color: lightyellow;
  29.   }
  30.   .main {
  31.     width: 600px;
  32.     min-height: 600px;
  33.     background-color: limegreen;
  34.     float: left;
  35.   }
  36.   .left {
  37.     float: left;
  38.   }
  39.   .right {
  40.     float: right;
  41.   }
  42. </style>
  43.   </head>
  44.   <body>
  45. <div class="header"></div>
  46. <div class="container">
  47.   <div class="left">左侧</div>
  48.   <div class="main">主体</div>
  49.   <div class="right">右侧</div>
  50. </div>
  51. <div class="footer"></div>
  52.   </body>
  53. </html>

运行效果：

圣杯布局实现三列布局及其思想

圣杯布局思想：

  1. 主体内容区必须优先渲染，DOM结构中把主体内容区写在前面。
  2. 主体内容区必须自适应，占据整个容器的全部空间。
  3. 内容区和左右区域全部浮动（左浮动）。
  4. 通过给左右两侧设置margin的负值，使其回到容器的正确位置上。
  5. 给容器设置左右两侧的padding，将左右区域挤出来，宽度要与左右两侧宽度相等。
  6. 最后给左右两侧相对定位，使其回到正确的位置。

代码展示：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>圣杯布局实现三列布局及其思想</title>
  7. <style>
  8.   * {
  9.     margin: 0;
  10.     padding: 0;
  11.     box-sizing: border-box;
  12.   }
  13.   .header,
  14.   .footer {
  15.     height: 40px;
  16.     background-color: cyan;
  17.   }
  18.   .container {
  19.     margin: 10px auto;
  20.     /* 包裹浮动子元素 */
  21.     overflow: hidden;
  22.     /* padding挤出两侧区域 */
  23.     padding: 0 200px;
  24.   }
  25.   .container * {
  26.     min-height: 600px;
  27.     /* 内容区、左右两侧全部浮动 */
  28.     float: left;
  29.   }
  30.   .main {
  31.     /* 内容区自适应 */
  32.     width: 100%;
  33.     background-color: yellow;
  34.   }
  35.   .left,
  36.   .right {
  37.     width: 200px;
  38.     background-color: cyan;
  39.   }
  40.   .left {
  41.     /* margin负值，回到容器 */
  42.     margin-left: -100%;
  43.     /* 相对定位，回到正确位置 */
  44.     position: relative;
  45.     right: 200px;
  46.   }
  47.   .right {
  48.     /* margin负值，回到容器 */
  49.     margin-left: -200px;
  50.     /* 相对定位，回到正确位置 */
  51.     position: relative;
  52.     left: 200px;
  53.   }
  54. </style>
  55.   </head>
  56.   <body>
  57. <div class="header"></div>
  58. <div class="container">
  59.   <!-- 主体区块优先渲染 -->
  60.   <div class="main">主体</div>
  61.   <div class="left">左侧</div>
  62.   <div class="right">右侧</div>
  63. </div>
  64. <div class="footer"></div>
  65.   </body>
  66. </html>

运行效果：

上一条：PHP 25 url路由原理与composer安装（0805wed）下一条：HTML5入门：文档结构、元素和语义化元素
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议