简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 盒模型的大小与计算，三种定位的区别，实现定位布局，浮动布局，圣杯布局
Blogger Information
Blog 39
fans 0
comment 2
visits 46650
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
盒模型的大小与计算，三种定位的区别，实现定位布局，浮动布局，圣杯布局
Tlilam的PHP之路
Original
939 people have browsed it

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

运行代码：

  1.      <style>
  2.         .bigbox{
  3.             width: 300px;
  4.             height: 300px;
  5.             background-color: #ffc0cb;
  6.             /* 设置边框 */
  7.             border: 10px solid green;
  8.             /* 设置内边距 */
  9.             padding: 10px;
  10.             /* 设置margin使位置偏移 */
  11.             margin-left: 50px;
  12.             margin-top: 50px;
  13.             /* overflow: hidden */
  14.             overflow: hidden;
  15.             /* 修改盒子大小计算方式  */
  16.             box-sizing: border-box;
  17.         }
  18.         .box{
  19.             width: 200px;
  20.             height: 200px;
  21.             background-color: blue;
  22.             /* 设置边框 */
  23.             border: 10px solid green;
  24.             /* 设置内边距 */
  25.             padding: 10px;
  26.             /* 设置margin偏移 */
  27.             margin-left: 20px;
  28.             margin-top: 20px;
  29.         }
  30.     </style>
  31.     <body>
  32.     <div class="bigbox">
  33.         <div class="box">1</div>
  34.     </div>
  36. </body>

运行结果图：


下图没设置box-sizing

总结

  • margin改变的是盒子的位置 不改变盒子的大小，边框和内边距都影响着盒子的大小
  • 默认盒子大小的计算方式是：盒子总宽 = 左边框+左内边距+内容区+右内边距+右边框 高度同理可得
  • box-sizing: border-box 修改计算方式，宽高保持设置的宽度和高度

box-sizing解决了什么问题

运行代码：

  1. <style>
  2.         .box{
  3.             height: 200px;
  4.             width: 200px;
  5.             border: 10px solid orange;
  6.             padding: 10px;
  7.             /* 浮动排版 */
  8.             float: left;
  9.             box-sizing: border-box;
  10.         }
  11. </style>
  12. <body>
  13.     <div class="box">1</div>
  14.     <div class="box">2</div>
  15.     <div class="box">3</div>
  16.     <p>其他内容或者元素</p>
  17. </body>

运行结果图：

总结

  • box-sizing解决了盒子大小变动的问题，默认方式设置边框和内边距会向外扩充会让整个盒子变大，当盒子大小变动的时候会影响原本的排版
  • 当设置为border-box属性 盒子的大小不会超过设定的宽高，会压缩自身内容区，给边框border和内边距padding 提供空间

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

运行代码：

  1.     <style>
  2.         span{
  3.             background-color: cyan;
  4.         }
  5.         .box1{
  6.             width: 200px;
  7.             height: 200px;
  8.             background-color: pink;
  9.             /* 相对定位 */
  10.             position: relative;
  11.             left: 500px;
  12.             top: 5px;
  13.         }
  14.         .bigbox{
  15.             /* 绝对定位需要有已定位的父元素 */
  16.             position: relative;
  17.         }
  18.         .box2{
  19.             width: 200px;
  20.             height: 200px;
  21.             background-color: green;
  22.             /* 绝对定位 */
  23.             position: absolute;
  24.             left: 10px;
  25.             top: 20px;
  26.         }
  27.     </style>
  29. <body>
  30.     <hr>
  31.     <div class="box1">相对定位盒子</div>
  32.     <span>测试内容会不会往上占位置</span>
  33.     <hr>
  34.     <div class="bigbox">
  35.         <div class="box2">绝对定位盒子</div>
  36.     </div>
  37.     <span>测试内容会不会往上占位置</span>
  38. </body>

运行结果图：

固定定位与绝对定位的区别是什么

运行代码：

  1.     <style>
  2.         .box1{
  3.             width: 100px;
  4.             height: 100px;
  5.             background-color:pink;
  6.             /* 固定定位 页面滚动，元素也保持固定在窗口位置，拉动窗口宽度，保持在右下角 */
  7.             position: fixed;
  8.             bottom: 10px;
  9.             left: 20px;
  10.         }
  11.         .box2{
  12.             width: 200px;
  13.             height: 200px;
  14.             background-color: green;
  15.             /* 绝对定位 以最顶层父元素body进行定位 */
  16.             position: absolute;
  17.             left: 50px;
  18.             top: 200px;
  19.         }
  20.     </style>
  21.     <body>
  22.     <hr>
  23.     <div class="box1">固定定位的盒子</div>
  24.     <div class="box2">绝对定位的盒子</div>
  25. </body>

运行结果图：

总结 三种定位的区别

  • 相对定位是元素相对于当前的位置进行偏移，元素还在文档流中，它原本占有的空间仍保留
  • 固定定位是对于浏览器视图窗口进行定位，使元素的位置与文档流无关，因此不占据空间。不会随着文档流变化发生变化
  • 绝对定位是根据最近的已定位祖先元素（最顶层定位父元素是body/html）进行定位，元素从文档流中完全删除，原本占据的空间会关闭就像不存在

为什么垂直居中如此困难, 使用绝对定位如何实现

运行代码：

  1. <style>
  2.         .content{
  3.             width: 400px;
  4.             height: 400px;
  5.             background-color:orange;
  6.             position: relative;
  7.         }
  8.         .content > .main{
  9.             background-color: pink;
  10.             width: 200px;
  11.             height: 20px;
  12.             /* 左右宽度设置auto 浏览器会自动计算平分空间 使左右两边的margin相等 达到水平居中效果 */
  13.             margin-left: auto;
  14.             margin-right: auto;
  16.             /* 上下设置auto 并不会垂直居中，视图窗口的宽度，页面打开的时候确定了，高度是无法固定的，高度随着你的内容不断增加 ，元素无法确定高度，所以无法计算 */
  17.             margin-top: auto;
  18.             margin-bottom: auto;
  19.             /* 使用绝对定位后起效，绝对定位相当于定位了元素的四个点 确认出宽高，就能计算出高度平分*/
  20.             position: absolute;
  21.             top: 0;
  22.             right: 0; 
  23.             bottom: 0;
  24.             left: 0;  
  26.             margin: auto;
  27.         }
  28.     </style>
  30.     <body>
  31.     <div class="content">
  32.         <div class="main">绝对定位实现垂直居中</div>
  33.       </div>
  34. </body>

运行结果图：

总结

  • 左右宽度设置auto可以达到水平居中效果，垂直居中需要使用绝对定位，确定left，top，right，bottom，得知元素整体大小，才能计算上下的auto值

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

运行代码：

  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.     .header,.footer{
  10.         height: 50px;
  11.         background-color:#333;
  12.     }
  13.     /* 页脚设置 */
  14.         .footer{
  15.         text-align: center;
  16.         line-height: 50px;
  17.     }
  18.     .footer > p{
  19.         color: white;
  20.     }
  21.     /* 导航栏设置 */
  22.     .nav{
  23.         width: 1000px;
  24.         margin: auto;
  26.     }
  27.     .nav:first-of-type li{
  28.         float: left;
  29.         list-style: none;
  30.         padding: 0 15px;
  31.         line-height: 50px;
  32.     }
  33.     a{
  34.         display: block;
  35.         padding: 0 16px;
  36.         text-decoration: none;
  37.         color: white;
  38.     }
  39.     a:hover{
  40.         background-color: #111;
  41.         color: cyan;
  42.     }
  44.     /* 主体内容 */
  45.     /* 内容区大DIV */
  46.     .main{
  47.         width: 1100px;
  48.         /* background-color: orange; */
  49.         margin: 15px auto;
  50.         /* 设置相对定位  给下面的left，right进行绝对定位 */
  51.         position: relative;
  52.         min-height: 600px;
  53.     }
  54.     /* 左边内容区 */
  55.     .left{
  56.         width: 800px;
  57.         min-height: 600px;
  58.         /* 绝对定位 left和top都是0 可以不写 */
  59.         position: absolute;
  60.         background-color: coral;
  61.     }
  62.     /* 右边相关推荐区 */
  63.     .right{
  64.         width: 250px;
  65.         min-height: 600px;
  66.         background-color: cyan;
  67.         /* 绝对定位 top为0可以不写 right要写 默认是top：0与left：0 */
  68.         position: absolute;
  69.         right: 0;
  71.     }
  72.     </style>
  73. </head>
  74. <body>
  75.     <!-- 页眉 -->
  76.     <div class="header">
  77.         <div class="nav">
  78.             <ul >
  79.                 <li><a href="">导航1</a></li>
  80.                 <li><a href="">导航2</a></li>
  81.                 <li><a href="">导航3</a></li>
  82.             </ul>
  83.         </div>
  84.     </div>
  85.     <!-- 主体 -->
  86.     <div class="main">
  87.         <div class="left">左边内容主体区</div>
  88.         <div class="right">右边相关推荐区</div>
  89.     </div>
  90.     <div class="footer">
  91.         <p>Copyright 2014-2020 https://www.php.cn/ All Rights Reserved | 页脚内容,备案号</p>
  92.     </div>
  93. </body>
  94. </html>

运行结果：

总结

  • 设置主体区的相对定位，然后就是子元素的绝对定位和具体定位left，right，top，bottom

使用浮动实现三列布局

运行代码：

  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和padding 设置盒子计算方式 */
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         /* 页眉，页脚，导航设置 */
  15.         .header,.footer{
  16.             height: 50px;
  17.             margin: 0 auto;
  18.             background-color: #333;
  19.         }
  20.         .header > .nav{
  21.             width: 1000px;
  22.             margin: 0 auto;
  23.         }
  24.         .header>.nav>ul>li {
  25.             list-style: none;
  26.             float: left;
  27.             line-height: 50px;
  28.         }
  29.         a{
  30.             display: block;
  31.             padding: 0 16px;
  32.             text-decoration: none;
  33.             color: white;
  34.         }
  35.         a:hover{
  36.             background: greenyellow;
  37.             color: black;
  38.         }
  39.         .footer>p{
  40.             text-align: center;
  41.             line-height: 50px;
  42.             color: white;
  43.         }
  44.         /* 主体区 */
  46.         .main{
  47.             width: 1000px;
  48.             /* background-color: orange; */
  49.             min-height: 600px;
  50.             margin: 5px auto;
  51.             /*子元素全部浮动会出现高度塌陷 解决容器高度塌陷问题  */
  52.             overflow: hidden;
  53.         }
  54.         /* 设置左右区域 */
  55.         .left,.right{
  56.             /* 宽度 */
  57.             width: 200px;
  58.             /* 最小高度 */
  59.             min-height: 600px;
  60.             background-color: cyan;
  61.         }
  62.         /* 内容区 */
  63.         .content{
  64.             width: 550px;
  65.             min-height: 600px;
  66.             background-color: coral;
  67.             /* 内容区设置左浮动 */
  68.             float: left;
  69.         }
  70.         .left{
  71.             /* 左推广区设置左浮动 */
  72.             float: left;
  73.         }
  74.         .right{
  75.             /* 右推荐区设置右浮动 */
  76.             float: right;
  77.         }
  78.     </style>
  79. </head>
  80. <body>
  81.     <div class="header">
  82.         <div class="nav">
  83.             <ul>
  84.                 <li><a href="#">首页</a></li>
  85.                 <li><a href="#">秒杀</a></li>
  86.                 <li><a href="#">团购</a></li>
  87.                 <li><a href="#">更多</a></li>
  89.             </ul>
  90.         </div>
  91.     </div>
  92.     <div class="main">
  93.         <div class="left">左边推广区 左浮动</div>
  94.         <div class="content">中间内容区 左浮动</div>
  95.         <div class="right">右边推荐区 右浮动</div>
  96.     </div>
  97.     <div class="footer">
  98.         <p>Copyright 2014-2020 https://www.****.cn/ All Rights Reserved | 页脚内容,备案号</p>
  99.     </div>
  100. </body>
  101. </html>

运行结果图：

总结

  • 给主体区的子元素设置宽度和添加浮动即可
  • 要注意主体区的子元素都浮动会造成高度塌陷，需要给主体区这个父元素设置overflow：hidden
  • 右边的推广区一样可以设置左浮动，但推荐给右浮动使布局更加直观

圣杯布局实现三列布局，与圣杯布局的思想

运行代码：

  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.         /* 设置 页眉 页脚 导航  */
  14.         .header,.footer{
  15.             background-color: #333;
  16.             height: 40px;
  18.         }
  19.         .center{
  20.             width: 1000px;
  21.             margin: 0 auto;
  22.         }
  23.         .footer p {
  24.             line-height: 40px;
  25.             text-align: center;
  26.             color: cornsilk;
  27.         }
  28.         .header li{
  29.             list-style: none;
  30.             float: left;
  31.         }
  32.         a{
  33.             text-decoration: none;
  34.             color: cornsilk;
  35.             display: block;
  36.             line-height: 40px;
  37.             padding: 0 15px;
  38.         }
  39.         a:hover{
  40.             color: black;
  41.             background-color: lightgreen;
  42.         }
  43.         /* 圣杯布局主体设置  */
  44.         .container > *{
  45.             /* 没内容使用最小高度支撑 */
  46.             min-height: 400px;
  47.             /* 给主体区域内的元素都给上浮动 */
  48.             float: left;
  49.         }
  50.         .container{
  51.             /* 解决高度塌陷问题 */
  52.             overflow: hidden;
  53.             /* 主体区使用 padding  设置出左右200PX的空间  让左右区块定位到这个padding空间上 */
  54.             padding: 0 200px;
  55.         }
  56.         .container > .content{
  57.             /* 内容区要设置成百分百  */
  58.             width: 100%;
  59.             /* 设置padding 使内容与左右区 间隔开会更美观，不是圣杯布局的必要元素 */
  60.             padding: 10px 50px ;
  61.             background-color: orange;
  62.         }
  63.         .container > .left,.right{
  64.             /* 左右区块设置固定的宽度 与上方主体区提供的宽度相同 */
  65.             width: 200px;
  66.             background-color: cyan;
  67.         }
  68.         .left{
  69.             /* 1.使用margin-left：-100% 定位到内容区的最左边  */
  70.             margin-left: -100%;
  71.             /* 2.再使用定位，进行移动到主体区的padding左空间 */
  72.             position: relative;
  73.             right: 200px;
  74.         }
  75.         .right{
  76.             /* 1.使用margin-left：-200px 定位到内容区的最右边  */
  77.             margin-left: -200px;
  78.             /* 2.再使用定位，进行移动到主体区的padding右空间 */
  79.             position: relative;
  80.             left: 200px;
  81.         }
  82.     </style>
  83. </head>
  84. <body>
  85.      <div class="header">
  86.         <div class="center">
  87.             <ul>
  88.                 <li><a href="#">导航1</a></li>
  89.                 <li><a href="#">导航2</a></li>
  90.                 <li><a href="#">导航3</a></li>
  91.                 <li><a href="#">导航3</a></li>
  92.                 <li><a href="#">导航3</a></li>
  93.             </ul>
  94.         </div>
  95.     </div>
  96.     <div class="container">
  97.         <div class="content">央广网北京8月3日消息（记者张棉棉）据中央广播电视总台中国之声《全国新闻联播》报道，国新办8月3日举行发布会，北斗卫星导航系统新闻发言人、中国卫星导航系统管理办公室主任冉承其表示，目前已攻克星间链路、高精度原子钟等160多项关键核心技术，突破500多种器部件国产化研制，实现北斗三号卫星核心器部件国产化率100%，2035年前将建成更加泛在、更加融合、更加智能的国家综合定位导航授时体系，为未来智能化、无人化发展提供核心支撑。
  99.             北斗三号全球卫星导航系统正式开通，标志着北斗“三步走”发展战略圆满完成，北斗迈进全球服务新时代。冉承其表示，北斗三号工程提前半年完成，开通全系统服务，实现了建成即开通、开通即服务，彰显了中国速度。冉承其介绍：“突破500余种器部件国产化研制，实现北斗三号卫星核心器部件国产化率100%。”
  101.             北斗三号支持导航定位、通信数传两大功能，性能指标方面，北斗三号全球范围定位精度优于10米、测速精度优于0.2米/秒、授时精度优于20纳秒、服务可用性优于99％，亚太地区性能更优。冉承其介绍：“北斗系统已全面服务交通运输、公共安全、救灾减灾、农林牧渔、城市治理等行业，融入电力、金融、通信等国家核心基础设施建设。28nm工艺芯片已经量产，22nm工艺芯片即将量产。大部分智能手机均支持北斗功能。”
  103.             北斗已是联合国认可的四大全球卫星导航系统之一。与美国、俄罗斯、欧盟卫星导航的兼容与互操作及系统间合作持续深化。目前，北斗相关产品已出口120余个国家和地区，向亿级以上用户提供服务。冉承其说：“2035年前将建成更加泛在、更加融合、更加智能的国家综合定位导航授时体系，持续推进系统升级换代，构建覆盖天空地海、基准统一、高精度、高智能、高安全、高效益的时空信息服务基础设施。”</div>
  104.         <div class="left">左边</div>
  105.         <div class="right">右边</div>
  106.     </div>
  107.     <div class="footer">
  108.         <div class="center">
  109.             <p>****************页脚内容*****************</p>
  110.         </div>
  111.     </div> 
  112. </body>
  113. </html>

运行结果图：

总结 圣杯布局的思想

  • 内容区必须优先渲染,DOM结构中将主体内容区写到前面即可
  • 中间主体内容区必须自适应,占据整个容器的全部空间
  • 内容区,左,右全部浮动(左浮动)
  • 通过给左/右二侧设置margin的负值使它回到容器中的正确位置上
  • 给容器主体区元素设置左右的padding,宽度与左,右二侧宽度相等,将左右区域挤出来
  • 再给左右二侧通过相对定位,将他们最终放到正确的位置上面
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：圣杯有套路,记住步骤就简单了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！