search

博客列表 >【前端开发-HTML】之盒模型，模型计算方式与布局技术

【前端开发-HTML】之盒模型，模型计算方式与布局技术

林辉
林辉原创
2020年08月13日 08:08:011281浏览

1. 盒模型的大小与位置的设置与计算

1.1 盒模型的基础知识

下图是我所做的一个基本的盒模型；

下图是该盒模型的构造；

以上可以知道，外边距margin-top为80px，margin-left为30px，内边框padding为10px。
盒子大小为200px*200px。

下列为该盒模型的代码；

  1. <!-- @format -->
  3. <!DOCTYPE html>
  4. <html lang="en">
  5.   <head>
  6.     <meta charset="UTF-8" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>Document</title>
  9.     <style>
  10.       .box {
  11.         width: 200px;
  12.         height: 200px;
  13.         background-color: lightcoral;
  14.         /* 边框 */
  15.         border: 1px solid #000;
  16.         /* 内边框 */
  17.         padding: 10px;
  18.         background-clip: content-box;
  19.         /* 外边距 */
  20.         margin-top: 30px;
  21.         margin-left: 30px;
  22.       }
  23.       .box:first-of-type {
  24.         margin-top: 80px;
  25.       }
  26.     </style>
  27.   </head>
  28.   <body>
  29.     <div class="box">盒子</div>
  30.     <div class="box">盒子</div>
  31.   </body>
  32. </html>

1.2 盒子大小计算方式


上图的代码如示；

  1. <!-- @format -->
  3. <!DOCTYPE html>
  4. <html lang="en">
  5.   <head>
  6.     <meta charset="UTF-8" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>用户自定义盒子大小计算方式</title>
  9.     <style>
  10.       /* 推荐在html，body加入box-sizing: border-box; */
  11.       * {
  12.         margin: 0;
  13.         padding: 0;
  14.         box-sizing: border-box;
  15.       }
  16.       .box {
  17.         width: 200px;
  18.         height: 200px;
  19.         background-color: lightgreen;
  20.         border: 5px solid #000;
  21.         /* 210px = 200(width)+ 5(border-right) + 5(border-right) */
  22.         padding: 10px;
  23.         /* 230 = 200(width)+ 5(border-right) + 5(border-right) + 10(padding-right) + 10(padding-left)  */
  24.         /* margin只影响到盒子的排列位置，不影响大小 */
  25.         /* margin: 10px; */
  27.         /* 默认盒子计算公式：内容区 + 内边距 + 边框 */
  28.         box-sizing: border-box;
  29.       }
  30.     </style>
  31.   </head>
  32.   <body>
  33.     <div class="box"></div>
  34.   </body>
  35. </html>

可以通过margin元素来设置盒子的位置。
默认盒子计算公式为内容区 + 内边距 + 边框。

1.3 盒子的位置设置


如上图所示，将一个“点我就有好心情”的盒子的位置固定在窗口的右下方。
实现该功能，需要用到 position定位元素以及right和bottom元素。
利用这3个元素，可将盒子随意固定在自己想要的位置上。
下面为该代码。

  1. <!-- @format -->
  3. <!DOCTYPE html>
  4. <html lang="en">
  5.   <head>
  6.     <meta charset="UTF-8" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>盒子的位置设置-固定定位</title>
  9.     <style>
  10.       * {
  11.         margin: 0;
  12.         padding: 0;
  13.       }
  14.       .good {
  15.         background-color: coral;
  16.         color: white;
  17.         border-radius: 10px;
  18.         font-weight: 500;
  19.         padding: 5px;
  20.         width: 300px;
  21.         text-align: center;
  22.         /* 固定定位 */
  23.         position: fixed;
  24.         right: 10px;
  25.         bottom: 10px;
  26.       }
  27.     </style>
  28.   </head>
  29.   <body>
  30.     <h2 class="good">
  31.       点我就有好心情
  32.       <button type="button" onclick="this.parentNode.style.display='none'">
  33.         关闭
  34.       </button>
  35.     </h2>
  36.   </body>
  37. </html>

2. box-sizing属性的实际作用

简单一句话来说，使用box-sizing属性可以解决盒子(div等)宽高被内边距撑开的问题。
有时我们会给页面的元素（比如div）设置个固定的高度或宽度。但如果给这个div又设置了内边距或者边框的话，那么这个div就会被撑大。也就是其实际的尺寸变成了：设置的宽高尺寸+内边距+边框。
这样就有可能对我们的布局造成影响，如果不想让内边距和边框影响到我们设置的固定尺寸，可以借助 box-sizing 这个css属性来实现。

值 描述
content-box 宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit 规定应从父元素继承 box-sizing 属性的值。


上图的代码如示；

  1. <!-- @format -->
  3. <!DOCTYPE html>
  4. <html lang="en">
  5.   <head>
  6.     <meta charset="UTF-8" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>用户自定义盒子大小计算方式</title>
  9.     <style>
  10.       /* 推荐在html，body加入box-sizing: border-box; */
  11.       * {
  12.         margin: 0;
  13.         padding: 0;
  14.         box-sizing: border-box;
  15.       }
  16.       .box {
  17.         width: 200px;
  18.         height: 200px;
  19.         background-color: lightgreen;
  20.         border: 5px solid #000;
  21.         padding: 10px;
  22.         /* 默认值 */
  23.         box-sizing: content-box;
  24.         /* 此时，盒子的大小是包括了外边距与边框，但是总大小始终等于盒子大小，此时内容区大小会被压缩 */
  25.         box-sizing: border-box;
  26.       }
  27.     </style>
  28.   </head>
  29.   <body>
  30.     <div class="box"></div>
  31.   </body>
  32. </html>

可通过运用box-sizing元素来定义盒子内容区是否包括内边距或边框 。
box-sizing: content-box;为默认值，
当box-sizing的值为border-box时，盒子的大小是包括了外边距与边框，但是总大小始终等于盒子大小，当设置外边距与边框时候，内容区大小会被压缩。

3. 绝对定位、相对定位的区别与应用

3.1 绝对定位

绝对定位即脱离文档流的定位，相对于祖元素 偏移。定位参照物为自己的父级，但是自己的父级必须拥有position属性，且父级position属性必须为absolute，relative，fixed中的一个，static不行。假若自己的父级没有设置position属性，会一直向上寻找有position属性且不为static的的祖先元素，直到body元素。

从下个图中可以看出，它的父级祖元素为body，相对于祖元素进行了偏移。

部分代码如下：

  1. .box2{
  2.   position:absolute;
  3.   left: 30px;
  4.   top: 20px;
  5. }

3.2 相对定位

元素框会相对于原本位置偏移，从下个图中可以看出，元素仍保留其未定位前的形状，但是它原本所占有的空间仍然保留。


部分代码如下：

  1. .box2{
  2.   position: relative;
  3.   left: 30px;
  4.   top: 20px;
  5. }

3.3 绝对定位、相对定位的区别

总结来说， 绝对定位是相对于祖元素进行了偏移，不占有空间。而相对定位是相对于原本位置进行偏移，且保留原本所占有的空间。

4. 绝对定位、固定定位的区别与应用

4.1 固定定位

固定定位是相对于浏览器窗口进行定位的，无论怎样移动你的滑动条，它都会固定在相对于浏览器窗口的固定位置，另外要注意，它的兄弟元素将会在位置排布上忽视它的存在。这个时候用的top，bottom，left，right也是相对于浏览器窗口而言的。

说明：固定定位也是绝对定位的一种，拥有绝对定位的大部分特点；但是他是相对于浏览器窗口的位置进行定位.比如漂浮的客服,回到顶部.这类的按钮都是使用的固定定位.

下图为一个固定定位的应用，是相对于浏览器窗口。

下面为该代码。

  1. <!-- @format -->
  3. <!DOCTYPE html>
  4. <html lang="en">
  5.   <head>
  6.     <meta charset="UTF-8" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>固定定位</title>
  9.     <style>
  10.       * {
  11.         margin: 0;
  12.         padding: 0;
  13.       }
  14.       .good {
  15.         background-color: coral;
  16.         color: white;
  17.         border-radius: 10px;
  18.         font-weight: 500;
  19.         padding: 5px;
  20.         width: 300px;
  21.         text-align: center;
  22.         /* 固定定位 */
  23.         position: fixed;
  24.         right: 10px;
  25.         bottom: 10px;
  26.       }
  27.     </style>
  28.   </head>
  29.   <body>
  30.     <h2 class="good">
  31.       点我就有好心情
  32.       <button type="button" onclick="this.parentNode.style.display='none'">
  33.         关闭
  34.       </button>
  35.     </h2>
  36.   </body>
  37. </html>

4.2 固定定位和绝对定位的区别

偏移基准的不同，固定定位是相对于浏览器窗口，而绝对定位是相对于父级元素。

5. 使用绝对定位实现垂直居中

使用绝对定位来实现块的垂直居中，如下图所示：

图中的紫色块在绿色块中水平垂直居中。
代码如下：

  1. <!-- @format -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>margin:auto</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       .container {
  15.         width: 300px;
  16.         height: 300px;
  17.         background-color: lightgreen;
  18.         /* 转为定位元素，定位父级 */
  19.         position: relative;
  20.       }
  21.       .container > .item {
  22.         width: 100px;
  23.         height: 100px;
  24.         background-color: violet;
  25.         /* 水平局中 */
  26.         text-align: center;
  27.         /* 垂直居中（使用position） */
  28.         position: absolute;
  29.         /* 定位起点 */
  30.         top: 0;
  31.         left: 0;
  32.         /* 定位终点 */
  33.         right: 0;
  34.         bottom: 0;
  35.         margin: auto;
  36.       }
  37.     </style>
  38.   </head>
  39.   <body>
  40.     <div class="container">
  41.       <div class="item">Rinki.me</div>
  42.     </div>
  43.   </body>
  44. </html>

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

使用绝对定位实现一个PC端的带有导航和页脚的左右分布的二列布局。
如下图所示：

代码如下：

  1. <!-- @format -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>绝对定位写一个两列布局</title>
  8.     <link rel="stylesheet" href="demo7.css">
  10. </head>
  11. <body>
  12.     <!-- 页眉 -->
  13.     <div class="header">
  14.         <div class="content">
  15.             <ui>
  16.                 <li><a href="">导航栏</a></li>
  17.             </ui>
  18.         </div>
  19.     </div>
  20.     <!-- 主体 -->
  21.     <div class="container">
  22.         <div class="left">左侧内容区</div>
  23.         <!-- <div class="main">内容区</div> -->
  24.         <div class="right">右侧内容区</div>
  25.     </div>
  26.     <!-- 页脚 -->
  27.     <div class="footer">
  28.         <div class="content">
  29.             <p>Rinki.me 版权所有|&copy；</p>
  30.         </div>
  31.     </div>
  32. </body>
  33. </html>

下面为css代码：

  1. /** @format */
  3. * {
  4.   margin: 0;
  5.   padding: 0;
  6.   box-sizing: border-box;
  7. }
  8. a {
  9.   text-decoration: none;
  10.   color: #666;
  11. }
  12. li {
  13.   list-style: none;
  14. }
  15. /* 页脚页眉 */
  16. .header,
  17. .footer {
  18.   height: 40px;
  19.   line-height: 40px;
  20.   background-color: lightblue;
  21.   text-align: center;
  23. }
  24. .content {
  25.   width: 1000px;
  26.   margin: auto;
  27. }
  29. /* 主体定位布局 */
  30. .container {
  31.   width: 300px;
  32.   background-color: lightgrey;
  33.   margin: 10px auto;
  34.   /* 转为定位元素，作为子元素left定位的父级 */
  35.   position: relative;
  37.   min-height: 300px;
  38. }
  39. /* 左侧内容区布局 */
  40. .container .left {
  41.   width: 150px;
  42.   background-color: lightsteelblue;
  43.   min-height: 300px;
  44.   position: absolute;
  45.   /* 默认值 */
  46.   /* top: 0; */
  47.   left: 0;
  48. }
  49. /* 右侧内容区布局 */
  50. .container .right {
  51.   width: 150px;
  52.   background-color: lightskyblue;
  53.   min-height: 300px;
  54.   position: absolute;
  55.   /* 默认值 */
  56.   /* top: 0; */
  57.   right: 0;
  58. }

7. 使用浮动实现三列布局

效果图如下：

下面为代码：

  1. <!-- @format -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>使用浮动实现三列布局</title>
  8.     <link rel="stylesheet" href="demo8.css">
  10. </head>
  11. <body>
  12.     <!-- 页眉 -->
  13.     <div class="header">
  14.         <div class="content">
  15.             <ui>
  16.                 <li><a href="">首页</a></li>
  17.                 <li><a href="">秒杀</a</li>
  18.                 <li><a href="">客服</a</li>
  19.             </ui>
  20.         </div>
  21.     </div>
  22.     <!-- 主体 -->
  23.     <div class="container">
  24.         <div class="left">左侧</div>
  25.         <div class="main">内容区</div>
  26.         <div class="right">右侧</div>
  27.     </div>
  28.     <!-- 页脚 -->
  29.     <div class="footer">
  30.         <div class="content">
  31.             <p>Rinki.me 版权所有|&copy；</p>
  32.         </div>
  33.     </div>
  34. </body>
  35. </html>

下面为css代码：

  1. /** @format */
  3. * {
  4.   margin: 0;
  5.   padding: 0;
  6.   /* box-sizing: border-box; */
  7. }
  8. a {
  9.   text-decoration: none;
  10.   color: #666;
  11. }
  12. li {
  13.   list-style: none;
  14. }
  15. /* 页脚页眉 */
  16. .header,
  17. .footer {
  18.   height: 40px;
  19.   background-color: lightblue;
  20. }
  21. .content {
  22.   width: 1000px;
  23.   margin: auto;
  24. }
  26. .content:first-of-type li {
  27.   float: left;
  28.   padding: 0 15px;
  29.   /* 行内文本的垂直居中，只需要设置它的行高等于父级高度即可 */
  30.   line-height: 40px;
  31. }
  32. .footer {
  33.   text-align: center;
  34.   line-height: 40px;
  35. }
  36. /* 主体使用浮动定位 */
  37. .container {
  38.   width: 1000px;
  39.   /* min-height: 600px; */
  40.   background-color: tomato;
  41.   margin: 10px auto;
  42.   border: 5px solid #f00;
  43.   overflow: hidden;
  44. }
  45. .container > .left,
  46. .container > .right {
  47.   width: 200px;
  48.   min-height: 600px;
  49.   background-color: violet;
  50. }
  51. .container > .left {
  52.   float: left;
  53. }
  54. .container > .right {
  55.   float: right;
  56. }
  57. .container > .main {
  58.   width: 600px;
  59.   min-height: 600px;
  60.   background-color: lightsalmon;
  61.   float: left;
  62. }

8. 圣杯布局的思想以及实现（三列布局）

首先来说说实现圣杯布局的步骤。

1.内容区必须全部渲染，DOM结构中将主体内容写到前面去。
2.中间主体内容必须要自适应，占据整个容器的全部空间。
3.主体内容区，左侧，右侧，全部浮动。
4.通过给左右两侧添加margin负值，让他们回到正确的位置上
5.通过给主体内容区添加padding属性，将左右区块挤出来
6.再给左右两侧通过相对定位，将他们放在正确的位置上

下图是通过以上步骤实现的三列的圣杯布局：

代码为：

  1. <!-- @format -->
  3. <!DOCTYPE html>
  4. <html lang="en">
  5.   <head>
  6.     <meta charset="UTF-8" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>圣杯布局：经典的三列PC端布局方式</title>
  9.     <link rel="stylesheet" href="demo9.css" />
  10.   </head>
  11.   <body>
  12.     <!-- 页眉与页脚省略 -->
  13.     <!-- 主体区优先显示，并且自适应，所以默认100% -->
  14.     <div class="container">
  15.       <!-- 圣杯要求内容区优先显示 -->
  16.       <div class="main">内容区</div>
  17.       <div class="left">左侧</div>
  18.       <div class="right">右侧</div>
  19.     </div>
  20.   </body>
  21. </html>

CSS代码为：

  1. /** @format */
  3. .container {
  4.   border: 5px dashed;
  5. }
  7. .container > * {
  8.   min-height: 400px;
  9. }
  11. .container > .left,
  12. .container > .right {
  13.   width: 200px;
  14.   background-color: cyan;
  15. }
  17. /* 内容区：默认宽度100%，自适应 */
  18. .container > .main {
  19.   width: 100%;
  20.   background-color: yellow;
  21. }
  23. .container > * {
  24.   /* 为什么左侧右侧，没有贴到上面的内容区，因为内容区的宽度是100% */
  25.   float: left;
  26. }
  27. .container {
  28.   /* 使父级容器包括浮动的子元素 */
  29.   overflow: hidden;
  30. }
  31. /* 将左侧放在内容区的左侧 */
  32. .container > .left {
  33.   margin-left: -100%;
  34. }
  36. /* 将右侧放在内容区的右侧 */
  37. .container > .right {
  38.   margin-left: -200px;
  39. }
  41. .container {
  42.   /* 使用padding将左右两侧的空间挤出来 */
  43.   padding: 0 200px;
  44. }
  45. .container > .left {
  46.   position: relative;
  47.   right: 200px;
  48. }
  49. .container > .right {
  50.   position: relative;
  51.   left: 200px;
  52. }
上一条：flex实现pc端三列布局下一条：2020.08.01-02周末班作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多