Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1个案例全面理解盒模型运用，理解box-sizing的意义与使用场景
Blogger Information
Blog 65
fans 2
comment 0
visits 60210
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
1个案例全面理解盒模型运用，理解box-sizing的意义与使用场景
张福根一修品牌运营
Original
1177 people have browsed it

盒模型属性,理解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>盒模型属性,理解box-sizing的意义与使用场景</title>
  7.     <style>
  8.       .box {
  9.         /* 内容区域大小 */
  10.         width: 400px;
  11.         height: 300px;
  12.         /* 背景颜色 */
  13.         background-color: darkgoldenrod;
  14.         /* 边框 */
  15.         border: 10px solid coral;
  16.         /* 内边距 */
  17.         padding: 15px 20px;
  18.         /* 大小包括padding , border */
  19.         box-sizing: border-box;
  20.         /* 外边距，二值进行简化 */
  21.         margin: 10px 20px;
  22.         /* 文字居中 */
  23.         text-align: center;
  24.         /* 行高 */
  25.         line-height: 300px;
  26.       }
  27.     </style>
  28.   </head>
  29.   <body>
  30.     <div class="box">盒模型属性</div>
  31.   </body>
  32. </html>

说明

box-sizing: 标准盒子与IE盒子之间的切换

  • 默认大小限制在内容区, 不包括padding , border
  • box-sizing: content-box;
  • 大小包括padding , border
  • box-sizing: border-box;
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