简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 了解CSS盒模型和margin:auto元素对其方式
Blogger Information
Blog 11
fans 0
comment 0
visits 13262
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
了解CSS盒模型和margin:auto元素对其方式
Blueprint
Original
788 people have browsed it

盒模型的构成

通过对生活中的盒子和网页中单个模块内部结构的分析，可以发现它们的结构是非常相似的。

由内到外分别是：外边距、边框、内边距、内容区。

盒模型是用来布局网页的重要容器。

网页页面中的元素都可以看成是一个盒子，占据一定的页面空间

涉及属性

属性 含义
margin 外边距
border 边框
padding 内边距（内填充）
width 宽度
height 高度
box-sizing 自定义盒模型宽和高的规范
backgroumd-clip 背景的延伸

盒模型的大小计算

原始样式：

  1.       <body>
  2.         <div class="box">box
  3.           <div class="box1">box1</div>
  4.         </div>
  5.         <div class="box2">box2</div>
  6.         <div class="box3">box3</div>
  7.       </body>
  9.       <style>
  10.         div.box {
  11.           padding-top: 0;
  12.           width: 400px;
  13.           height: 400px;
  14.           background-color: #00f000;
  15.         }
  17.         .box1 {
  18.           width: 200px;
  19.           height: 200px;
  20.           margin-top: px;
  21.           background-color: lightblue;
  22.         }
  24.         .box2 {
  25.           padding: 100px;
  26.           margin: 100px;
  28.           width: 400px;
  29.           border: 20px solid green;
  30.           height: 400px;
  31.           background-color: lightcoral;
  32.           box-sizing: border-box;
  33.         }
  34.         .box3 {
  35.           padding: 100px;
  36.           margin: 100px;
  38.           width: 400px;
  39.           border: 5px solid green;
  40.           height: 400px;
  41.           background-color: lightcoral;
  42.           background-clip: content-box;
  43.           box-sizing: border-box;
  44.         }
  45.       </style>


修改box1的margin-top值

  1.       <body>
  2.         <div class="box">box
  3.           <div class="box1">box1</div>
  4.         </div>
  5.         <div class="box2">box2</div>
  6.         <div class="box3">box3</div>
  7.       </body>
  9.       <style>
  10.         div.box {
  11.           padding-top: 0;
  12.           width: 400px;
  13.           height: 400px;
  14.           background-color: #00f000;
  15.         }
  17.         .box1 {
  18.           width: 200px;
  19.           height: 200px;
  20.           margin-top: 100px;
  21.           background-color: lightblue;
  22.         }
  24.         .box2 {
  25.           padding: 100px;
  26.           margin: 100px;
  28.           width: 400px;
  29.           border: 20px solid green;
  30.           height: 400px;
  31.           background-color: lightcoral;
  32.           box-sizing: border-box;
  33.         }
  34.         .box3 {
  35.           padding: 100px;
  36.           margin: 100px;
  38.           width: 400px;
  39.           border: 5px solid green;
  40.           height: 400px;
  41.           background-color: lightcoral;
  42.           background-clip: content-box;
  43.           box-sizing: border-box;
  44.         }
  45.       </style>

修改box的padding为box3的padding

  1.  <body>
  2.    <div class="box">
  3.      <div class="box1"></div>
  4.    </div>
  5.    <div class="box2"></div>
  6.    <div class="box3"></div>
  7.  </body>
  8.  <style>
  9.    div.box {
  10.      padding-top: 0;
  11.        padding：100px;
  12.      width: 400px;
  13.      height: 400px;
  14.      background-color: #00f000;
  15.    }
  16.    .box1 {
  17.      width: 200px;
  18.      height: 200px;
  19.      margin-top: px;
  20.      background-color: lightblue;
  21.    }
  22.    .box2 {
  23.      padding: 100px;
  24.      margin: 100px;
  25.      width: 400px;
  26.      border: 20px solid green;
  27.      height: 400px;
  28.      background-color: lightcoral;
  29.      box-sizing: border-box;
  30.    }
  31.    .box3 {
  32.      padding: 100px;
  33.      margin: 100px;
  34.      width: 400px;
  35.      border: 5px solid green;
  36.      height: 400px;
  37.      background-color: lightcoral;
  38.      background-clip: content-box;
  39.      box-sizing: border-box;
  40.    }
  41. </style>

大小计算方式：

图片文字有些错误

  1. box-sizing;content-box;
  2.  width(盒子视口)=border+padding+width（自定义）
  3.  height(盒子视口)=border+padding+height（自定义）
  5. width(盒子)=border+padding+width（自定义）+margin
  6. height(盒子)=border+padding+height（自定义）+margin
  8.  box-sizing: border-box;
  9.  width(盒子视口)=width(自定义)
  10.   height(盒子视口)=height(自定义)
  12.   width(盒子)=width(自定义)+margin
  13.   height(盒子)=height(自定义)+margin
  • 在设置box-sizing属性值为content-box时，盒模型的宽高为padding+border+content+margin，改变padding，盒子的实际大小会一起变动，对布局不友好。
  • box-sizing属性值为border-box时，变动padding时，盒子本身的大小并不会变动

留意

  • 两个盒子嵌套时，上外边距会合并，以大的边距基准
    • 可以给外盒子加边框或者上padding-top（影响页面布局）
    • 外盒子添加overflow：hidden
  • 两个垂直盒子的外边距会重合，以大的边距为准
    • 尽量将盒子会重合的边距添加给一个盒子

margin:auto实现元素的居中

margin-left:auto;与margin-right:auto;可以轻易的设置水平居中。
因为在垂直方向上，块级元素不会自动扩充，它的外部尺寸没有自动充满父元素，也没有剩余空间可说。所以margin-top:auto;与margin-bottom:auto 无法使其垂直居中。
可以简写margin:auto；

解决方法：
添加定位属性

  1. <style>
  2.  .box {
  3.    width: 400px;
  4.    height: 450px;
  5.    background-color: #ccc;
  6.   /*简写margin属性*/
  7.   margin: auto;
  8.  /*添加定位属性*/
  9.  position: absolute;
  10.    left: 0;
  11.    right: 0;
  12.    top: 0;
  13.    bottom: 0;
  14.  } 
  15. </style>

总结：

了解了盒模型的构成和属性
外边距的特殊用法（使块级元素居中）

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！