search

博客列表 >CSS 盒模型、定位和传统布局

CSS 盒模型、定位和传统布局

J
J原创
2020年08月06日 17:04:37729浏览

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

默认盒子大小计算公式： 内容区 + 内边距 + 边框。
盒子模型的排列位置由外边距(margin)决定，不影响盒子的大小。
宽度150px = 100px (width) + 40px(左、右内边距) + 10px(左、右边框)。
高度150px = 100px (height) + 40px(上、下内边距) + 10px(上、下边框)。

  1. <style>
  2.     .box {
  3.       /* 内容区 */
  4.       height: 100px;
  5.       width: 100px;
  6.       /* 设置背景颜色 */
  7.       background-color: lightgreen;
  8.       /* 背景颜色只显示内容区 */
  9.       background-clip: content-box;
  10.       /* 外边距30px */
  11.       margin: 30px;
  12.       /* 设置内边距20px 内边距是透明的*/
  13.       padding: 20px;
  14.       /* 设置边框 */
  15.       border: 5px solid #000;
  16.       /* 自定义盒子计算公式，盒子内容区包括边框和内边距 */
  17.       /* box-sizing: border-box; */
  18.     }
  19. </style>
  20. <body>
  21.   <div class="box">box</div>
  22. </body>

代码运行结果图：

2.box-sizing属性

box-sizing： 用来自定义盒子计算公式，盒子内容区是否计算内边距和边框。box-sizing:content-box(默认)：盒子大小只计算内容区，当box_sizing:border-box，此时，盒子的大小包括内边距和边框，但总大小始终等于盒子的大小，此时的内容区大小会被压缩。

真正内容区的宽度： 200px(width) - 40px(左、右内边距) - 10(左、右边框) = 150px

  1. <style>
  2.   .box {
  3.     /* 内容区 */
  4.     height: 200px;
  5.     width: 200px;
  6.     /* 设置背景颜色 */
  7.     background-color: lightgreen;
  8.     /* 外边距30px */
  9.     margin: 30px;
  10.     /* 设置内边距20px */
  11.     padding: 20px;
  12.     /* 设置边框 */
  13.     border: 5px solid #000;
  14.     /* 自定义盒子计算公式，此时盒子内容区包括边框和内边距 */
  15.     box-sizing: border-box;
  16.   }
  17. </style>
  18. <body>
  19.   <div class="box">box</div>
  20. </body>

代码运行结果图：

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

3.1绝对定位与相对定位的区别

绝对定位：元素的位置相对于最近的已定位父元素，如果没有就相对于当前窗口进行定位(body/html)，参照物是它的父级包含块;
相对定位：定位元素是相对于元素的当前位置进行定位，参照物是它的当前位置。相对定位通常作为绝对定位父级的定位元素。

3.2绝对定位与相对定位的应用

  1. <style>
  2.   .box.one {
  3.     /* 内容区 */
  4.     width: 300px;
  5.     height: 300px;
  6.     /* 背景颜色 */
  7.     background-color: lightblue;
  9.     /* 相对定位relative通常作为父级定位属性使用 */
  10.     position: relative;
  12.     /* 避免子元素margin影响到父级 */
  13.     overflow: hidden;
  14.   }
  16.   .box.two {
  17.     /* 内容区 */
  18.     width: 100px;
  19.     height: 100px;
  20.     /* margin-top: 50px; */
  21.     /* margin-left: 30px; */
  22.     /* 背景颜色 */
  23.     background-color: lightcoral;
  24.     /* 绝对元素:参考物就是他的父级包含块(就是他的所有上级元素中具有具体定位属性的元素) */
  25.     position: absolute;
  26.     top: 0;
  27.     left: 50px;
  28.   }
  29.   .box.three {
  30.     /* 内容区 */
  31.     width: 100px;
  32.     height: 100px;
  33.     margin-top: 100px;
  34.     background-color: lightgreen;
  35.     /* box3相对原来的位置,向右移了100px 向下100px,到了如图位置 */
  36.     position: relative;
  37.     top: 100px;
  38.     left: 100px;
  39.   }
  40. </style>
  41. <body>
  42.   <div class="box one">
  43.     <div class="box two">box2-绝对</div>
  44.     <div class="box three">box3-相对</div>
  45.   </div>
  46. </body>

代码运行结果图：

4. 固定定位与绝对定位的区别

固定定位： 元素的位置始终将当前的窗口做为定位父级，始终显示在当前页面上
绝对定位：一定要有一个定位父级/包含块，如果没有就相对于当前窗口进行定位(body/html)

  1. <style>
  2.   .box.one {
  3.     /* 内容区 */
  4.     width: 300px;
  5.     height: 200px;
  6.     /* 背景颜色 */
  7.     background-color: lightblue;
  9.     /* 相对定位relative通常作为父级定位属性使用 */
  10.     position: relative;
  11.     /* 加一个margin让页面能够上下滚动 */
  12.     margin-bottom: 1000px;
  13.   }
  15.   .box.two {
  16.     /* 内容区 */
  17.     width: 100px;
  18.     height: 100px;
  19.     /* margin-top: 50px; */
  20.     /* margin-left: 30px; */
  21.     /* 背景颜色 */
  22.     background-color: lightcoral;
  23.     /* 绝对元素:参考物就是他的父级包含块(就是他的所有上级元素中具有具体定位属性的元素) */
  24.     position: absolute;
  25.     top: 0;
  26.     left: 50px;
  27.   }
  28.   .fix {
  29.     width: 100px;
  30.     height: 100px;
  31.     background-color: lightgreen;
  32.     position: fixed;
  33.     top: 0;
  34.     left: 350px;
  35.   }
  36. </style>
  37. <body>
  38.   <div class="box one">
  39.     <div class="box two">绝对定位 top:0; left:50px</div>
  40.   </div>
  41.   <div class="fix three">固定定位 top0; left:350px</div>
  42. </body>

代码运行结果图：

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

为什么垂直居中如此困难?因为页面的宽度有限，而高度是无限的，并且允许用户翻页，所以无法确定页面的高度，可以通过使用绝对定位实现垂直居中。

  1. <style>
  2.   .box {
  3.     width: 200px;
  4.     height: 200px;
  5.     background-color: lightgray;
  7.     /* 父级定位元素 */
  8.     position: relative;
  9.   }
  10.   .box1 {
  11.     width: 100px;
  12.     height: 100px;
  13.     background-color: lightcoral;
  14.     /* 1.水平居中 */
  15.     /* 子块的外边距让浏览器根据父级的宽度自动计算 */
  16.     /* margin-left: auto; */
  17.     /* margin-right: auto; */
  19.     /* 2.垂直居中,使用绝对定位 */
  20.     position: absolute;
  21.     /* 定位起点 */
  22.     top: 0;
  23.     left: 0;
  24.     /* 定位终点 */
  25.     right: 0;
  26.     bottom: 0;
  27.     /* 使当前的元素定位的上下文充满整个父级容器 */
  28.     /* 1.水平居中 */
  29.     /* margin-left: auto; */
  30.     /* margin-right: auto; */
  31.     /* 2.垂直居中 */
  32.     margin-top: auto;
  33.     margin-bottom: auto;
  34.     /* 简化 */
  35.     margin: auto;
  36.   }
  37. </style>
  38. <body>
  39.   <div class="box">
  40.     <div class="box1">居中</div>
  41.   </div>
  42. </body>

代码运行结果图：

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

二列布局：第一列绝对定位的起始点top:0;left:0;，宽度：width:200px;第二列起始点top:0;right:0，宽度：width:800px，再给个内边距padding:10px。

注意：使用绝对定位，父级一定要有定位元素position:relative。

html布局如下：

  1. <style>
  2.   @import url(demo5.css);
  3. </style>
  4. <body>
  5.   <!-- 页眉 -->
  6.   <div class="header">
  7.     <div class="content">
  8.       <ul>
  9.         <li><a href="">首页</a></li>
  10.         <li><a href="">新闻</a></li>
  11.         <li><a href="">视频</a></li>
  12.         <li><a href="">地图</a></li>
  13.         <li><a href="">贴吧</a></li>
  14.         <li><a href="">学术</a></li>
  15.         <li><a href="">更多</a></li>
  16.       </ul>
  17.     </div>
  18.   </div>
  19.   <!-- 主体 -->
  20.   <div class="container">
  21.     <div class="left">左侧</div>
  22.     <div class="main">内容</div>
  23.   </div>
  24.   <!-- 页脚 -->
  25.   <div class="footer">
  26.     <div class="content">
  27.       <p>Copyright © 2017-2020 *******.com 版权所有</p>
  28.     </div>
  29.   </div>
  30. </body>

css样式如下：

  1. * {
  2.   /* 初始化 */
  3.   padding: 0;
  4.   margin: 0;
  5.   box-sizing: border-box;
  6. }
  8. /* a标签 */
  9. a {
  10.   color: black;
  11.   /* 开启浮动 */
  12.   float: left;
  13.   /* 去掉a标签的下划线 */
  14.   text-decoration: none;
  15.   padding: 0 20px;
  16.   /* 设置行高与父级高度一样,达到居中效果 */
  17.   line-height: 40px;
  18. }
  20. /* 鼠标覆盖a标签 */
  21. a:hover {
  22.   background-color: lightcoral;
  23.   /* color: white; */
  24. }
  25. li {
  26.   /* 去掉li标签前面的样式 */
  27.   list-style: none;
  28. }
  29. /* 页眉页脚 */
  30. .header,
  31. .footer {
  32.   height: 40px;
  33.   background-color: lightblue;
  34. }
  35. .content {
  36.   width: 1000px;
  37.   height: 40px;
  38.   /* background-color: lightgreen; */
  39.   /* 居中显示 */
  40.   margin: auto;
  41.   line-height: 40px;
  42. }
  43. /* 第一个content元素 */
  44. .content:last-of-type {
  45.   /* 文本居中显示 */
  46.   text-align: center;
  47. }
  48. /* 主体 */
  49. .container {
  50.   width: 1000px;
  51.   /* 最小宽度600 */
  52.   min-height: 600px;
  53.   background-color: lightgray;
  54.   /* 上下边距10 左右边距自动 */
  55.   margin: 10px auto;
  56.   /* 设置父级定位,作为子元素的定位元素 */
  57.   position: relative;
  58. }
  59. /* 左侧 */
  60. .container .left {
  61.   width: 200px;
  62.   height: 600px;
  63.   background-color: yellow;
  64.   /* 绝对定位 */
  65.   position: absolute;
  66.   /* 起始点 默认值*/
  67.   /* top: 0; */
  68.   /* left: 0; */
  69. }
  70. /* 内容区 */
  71. .container .main {
  72.   width: 800px;
  73.   height: 600px;
  74.   background-color: lightgreen;
  75.   /* 加个边距 */
  76.   padding: 10px;
  77.   /* 背景裁切 */
  78.   /* background-clip: content-box; */
  79.   /* 绝对定位 */
  80.   position: absolute;
  81.   /* 起始点 */
  82.   /* top: 0; */
  83.   right: 0;
  84. }

代码运行结果图：

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

三列布局： 使用float这个属性实现三列布局
注意： 浮动布局，父级高度塌陷，需要使用overflow:hidden隐藏溢出，转成BFC块。
html代码如下：

  1. <style>
  2.   @import url(demo6.css);
  3. </style>
  4. <body>
  5.   <!-- 页眉 -->
  6.   <div class="header">
  7.     <div class="content">
  8.       <ul>
  9.         <li><a href="">首页</a></li>
  10.         <li><a href="">新闻</a></li>
  11.         <li><a href="">视频</a></li>
  12.         <li><a href="">地图</a></li>
  13.         <li><a href="">贴吧</a></li>
  14.         <li><a href="">学术</a></li>
  15.         <li><a href="">更多</a></li>
  16.       </ul>
  17.     </div>
  18.   </div>
  19.   <!-- 主体 -->
  20.   <div class="container">
  21.     <div class="left">左侧</div>
  22.     <div class="main">内容</div>
  23.     <div class="right">右侧</div>
  24.   </div>
  25.   <!-- 页脚 -->
  26.   <div class="footer">
  27.     <div class="content">
  28.       <p>Copyright © 2017-2020 *******.com 版权所有</p>
  29.     </div>
  30.   </div>
  31. </body>

CSS样式表如下：

  1. * {
  2.   /* 初始化 */
  3.   padding: 0;
  4.   margin: 0;
  5.   /* 自定义盒子计算公式 */
  6.   box-sizing: border-box;
  7. }
  9. /* a标签 */
  10. a {
  11.   color: black;
  12.   /* 开启浮动 */
  13.   float: left;
  14.   /* 去掉a标签的下划线 */
  15.   text-decoration: none;
  16.   padding: 0 20px;
  17.   /* 设置行高与父级高度一样,达到居中效果 */
  18.   line-height: 40px;
  19. }
  21. /* 鼠标覆盖a标签 */
  22. a:hover {
  23.   background-color: lightcoral;
  24.   /* color: white; */
  25. }
  26. li {
  27.   /* 去掉li标签前面的样式 */
  28.   list-style: none;
  29. }
  30. /* 页眉页脚 */
  31. .header,
  32. .footer {
  33.   height: 40px;
  34.   background-color: lightblue;
  35. }
  36. .content {
  37.   width: 1000px;
  38.   height: 40px;
  39.   /* background-color: lightgreen; */
  40.   /* 居中显示 */
  41.   margin: auto;
  42.   line-height: 40px;
  43. }
  44. /* 第一个content元素 */
  45. .content:last-of-type {
  46.   /* 文本居中显示 */
  47.   text-align: center;
  48. }
  49. /* 主体 */
  50. .container {
  51.   width: 1000px;
  52.   /* 最小宽度600 */
  53.   /* min-height: 600px; 浮动布局父元素高度失效 */
  54.   background-color: lightgray;
  55.   /* 上下边距10 左右边距自动 */
  56.   margin: 10px auto;
  57.   /* border: 5px solid #000; */
  58.   /* 隐藏溢出内容 转成BFC块*/
  59.   overflow: hidden;
  60. }
  62. /* 左右侧公共属性 */
  63. .container .left,
  64. .container .right {
  65.   width: 200px;
  66.   min-height: 600px;
  67.   background-color: yellow;
  68. }
  69. /* 左侧 */
  70. .container .left {
  71.   float: left;
  72. }
  73. /* 右侧 */
  74. .container .right {
  75.   float: right;
  76. }
  77. /* 内容区 */
  78. .container .main {
  79.   float: left;
  80.   width: 600px;
  81.   min-height: 600px;
  82.   background-color: lightpink;
  83. }

代码运行结果图：

8. 圣杯布局的思想，用圣杯布局实现三列布局

圣杯布局的步骤：

  • 内容区必须优先渲染，DOM结构中将主体写到前面
  • 中间主体内容区必须自适应，占据整个容器的全部空间
  • 内容区左右全部浮动(左浮动float:left)
  • 通过给左右两侧设置margin的负值，使它们回到容器的正确位置上
  • 给容器设置左右的padding，宽度与左右两侧宽度相等，将左右区域挤出来
  • 再给左右两侧通过相对定位，将它们最终放到正确的位置上

html 代码如下：

  1. <link rel="stylesheet" href="demo7.css" />
  2. <body>
  3.   <!-- 页眉 -->
  4.   <div class="header">
  5.     <div class="content">
  6.       <ul>
  7.         <li><a href="">首页</a></li>
  8.         <li><a href="">新闻</a></li>
  9.         <li><a href="">视频</a></li>
  10.         <li><a href="">地图</a></li>
  11.         <li><a href="">贴吧</a></li>
  12.         <li><a href="">学术</a></li>
  13.         <li><a href="">更多</a></li>
  14.       </ul>
  15.     </div>
  16.   </div>
  17.   <!-- 主体 -->
  18.   <div class="container">
  19.     <div class="main">
  20.       央视网消息（焦点访谈）：2020年过了一大半，我们经受的考验一个接一个。突如其来的新冠肺炎疫情，给中国出了一道“加试题”，我们一边抓全面抗疫，一边抓经济社会发展的运行和恢复。经过艰苦卓绝的努力，二季度中国经济增速已经由负转正。但是，新冠肺炎疫情仍然在全球肆虐，错综复杂的内外环境仍然存在不确定性。中国经济面临的形势到底是怎样的？下一步我们如何应对？7月30日，习近平总书记主持召开中共中央政治局会议，分析研究当前经济形势，部署下一段的经济工作。
  21.     </div>
  22.     <div class="left">左侧</div>
  23.     <div class="right">右侧</div>
  24.   </div>
  25.   <!-- 页脚 -->
  26.   <div class="footer">
  27.     <div class="content">
  28.       <p>Copyright © 2017-2020 *******.com 版权所有</p>
  29.     </div>
  30.   </div>
  31. </body>

CSS代码如下：

  1. * {
  2.   /* 初始化 */
  3.   padding: 0;
  4.   margin: 0;
  5.   /* 自定义盒子计算公式 */
  6.   box-sizing: border-box;
  7. }
  9. /* a标签 */
  10. a {
  11.   color: black;
  12.   /* 开启浮动 */
  13.   float: left;
  14.   /* 去掉a标签的下划线 */
  15.   text-decoration: none;
  16.   padding: 0 20px;
  17.   /* 设置行高与父级高度一样,达到居中效果 */
  18.   line-height: 40px;
  19. }
  21. /* 鼠标覆盖a标签 */
  22. a:hover {
  23.   background-color: lightcoral;
  24.   /* color: white; */
  25. }
  26. li {
  27.   /* 去掉li标签前面的样式 */
  28.   list-style: none;
  29. }
  30. /* 页眉页脚 */
  31. .header,
  32. .footer {
  33.   height: 40px;
  34.   background-color: lightblue;
  35. }
  36. .content {
  37.   width: 1000px;
  38.   height: 40px;
  39.   /* background-color: lightgreen; */
  40.   /* 居中显示 */
  41.   margin: auto;
  42.   line-height: 40px;
  43. }
  44. /* 第一个content元素 */
  45. .content:last-of-type {
  46.   /* 文本居中显示 */
  47.   text-align: center;
  48. }
  50. /* 主体 */
  51. .container {
  52.   /* 加一个虚线 */
  53.   /* border: 5px dotted #000; */
  54.   /* 用overflow:hidden转成BFC块,使父级元素包住浮动的子元素 */
  55.   overflow: hidden;
  56.   /* 左右挤出200内边距给左右两侧 */
  57.   padding: 10px 200px;
  58. }
  59. /* 主体下所有元素 */
  60. .container > * {
  61.   /* 最小高度 */
  62.   min-height: 600px;
  63.   /* 所有元素浮动 */
  64.   float: left;
  65. }
  67. /* 左右侧加一个200px的宽度,背景色 */
  68. .container .left,
  69. .container .right {
  70.   width: 200px;
  71.   background-color: yellow;
  72. }
  74. /* 主体内容区宽度必须自适应100% */
  75. .container .main {
  76.   width: 100%;
  77.   background-color: lightpink;
  78. }
  80. /* 将左侧元素放在内容区左侧 */
  81. .container .left {
  82.   margin-left: -100%;
  83.   /* 相对定位,往左200px */
  84.   position: relative;
  85.   right: 200px;
  86. }
  87. /* 将右侧元素放在内容区右侧 */
  88. .container .right {
  89.   margin-left: -200px;
  90.   /* 相对定位,往右200px */
  91.   position: relative;
  92.   left: 200px;
  93. }

代码运行结果图：

上一条：八月限时活动机，大带宽、高配独服、站群、10G万兆下一条：注意细节，直播带货源码中如何设置小表情
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多