简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >盒模型的大小与计算，三种定位的区别，实现定位布局，浮动布局，圣杯布局

盒模型的大小与计算，三种定位的区别，实现定位布局，浮动布局，圣杯布局

Tlilam的PHP之路
Tlilam的PHP之路原创
2020年08月04日 22:47:41948浏览

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,宽度与左,右二侧宽度相等,将左右区域挤出来
  • 再给左右二侧通过相对定位,将他们最终放到正确的位置上面
上一条：PHP大牛成长之路：PHP分页实战下一条：谷歌SEO推广团队，这样管理更高效！
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多