Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 盒模型的大小定位的计算理解
Blogger Information
Blog 13
fans 0
comment 0
visits 13153
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
盒模型的大小定位的计算理解
小追
Original
684 people have browsed it

1.盒模型的常用元素

序号 代码 定义
1. margin 外边距
2. padding 内边距
3. border 边框
4. top 内外边距边框属性，表示上边距
5. left 内外边距边框属性，表示左边距
6. bottom 内外边距边框属性，表示下边距
7. right 内外边距边框属性，表示表示右边距
8. box-sizing 重新计算边框大小

盒模型代码演示

  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.             /* 宽、高是内容区 */
  10.             width:200px;
  11.             height:200px;
  12.         }
  13.         .box.one{
  14.             padding:10px;
  15.             border:2px solid #000;
  16.             background-color:lightgreen;
  17.             background-clip:content-box;
  18.             margin-bottom:20px;
  19.         }
  20.         .box.two{
  21.             padding:10px;
  22.             border:2px solid #000;
  23.             background-color:lightcoral;
  24.             /* background-clip规定背景的绘制区域 */
  25.             background-clip:content-box;
  26.             margin-top:30px;
  27.         }
  28.         .box.parent{
  29.             background-color:lightblue;
  30.             /* 相对定位是相对自己原来的位置进行移动，这个元素在文档流的原位置不释放 */
  31.             position:relative;
  32.             left:30px;
  33.             top:50px;
  34.         }
  35.         .son{
  36.             width:100px;
  37.             height:100px;
  38.             background-color:violet;
  39.             /* 绝对定位会找到这个元素有定位的上级，按照上级的位置进行移动 */
  40.             position:absolute;
  41.             /* 固定定位，忽略所有的定位上级，只针对body进行定位移动 */
  42.             position:fixed;
  43.             left:60px;
  44.             top:80px;
  45.         }
  46.     </style>
  47. </head>
  48. <body>
  49.     <!-- 两个盒子之间外边距会折叠，会从两个盒子的border边开始计算距离 -->
  50.     <div class="box one"></div>
  51.     <div class="box two"></div>
  52.     <hr />
  53.     <div class="box parent">
  54.         <div class="son"></div>
  55.     </div>
  56. </body>
  57. </html>

2.box-sizing属性的理解

  • border-box值是以边框进行计算盒子大小，盒子大小等于宽高值；
  • content-box值是以内容进行计算盒子大小，盒子大小等于margin+border+padding+宽高；

代码演示

  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.         *{
  10.             margin:0;
  11.             padding:0px;
  12.             box-sizing:border-box;
  13.         }
  14.         .box{
  15.             background-color:violet;
  16.             width:200px;
  17.             height:200px;
  18.             border:3px solid #000;
  19.             padding:10px;
  20.             background-clip:content-box;
  21.             /* box-sizing重新计算边框大小 */
  22.             /* content-box是默认值，意思是以内容为准重新计算边框大小 */
  23.              box-sizing:content-box; 
  24.              /* box-sizing:border-box;  */
  25.         } 
  26.     </style>
  27. </head>
  28. <body>
  29.     <div class="box"></div>
  30. </body>
  31. </html>

盒子元素的水平垂直居中定位

  • 因为显示器都是有宽度的，很容易让元素水平居中。但是网页高度可以往下滑动，不容易垂直居中。

  • 我们要将元素进行水平垂直居中，就需要定位盒子的4个角，让元素以4个角进行定位居中。

演示代码

  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>margin:auto块元素的垂直居中</title>
  7.     <style>
  8.         .content{
  9.             width:500px;
  10.             height:600px;
  11.             background-color:lightblue;
  12.             position:relative;
  13.         }
  14.         .item{
  15.             width:100px;
  16.             height:100px;
  17.             background-color:red;
  18.             position:absolute;
  19.             /* 设置水平垂直都居中 从上边顺时针到右边结束*/
  20.             top:0;
  21.             left:0;
  22.             bottom:0;
  23.             right:0px;
  24.             margin:auto;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div class="content">
  30.         <div class="item"></div>
  31.     </div>
  32. </body>
  33. </html>
Correcting teacher：WJWJ

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