盒子模型

　　有两种盒子模型：标准盒子 IE盒子（也称为怪异盒子）

区别：

1.怎么算宽高：标准盒子 width，height 是实际宽高（得房率是100%），IE盒子width，height是包含padding，border（新小区建筑面积）

2.盒子模型怎么转换变成怪异盒子 box-sizing: border-box;(标准盒子 content-box)

  • 当设置为box-sizing:content-box时，将采用标准模式解析计算（默认模式）；
  • 当设置为box-sizing:border-box时，将采用怪异模式解析计算；

标准盒子：

　　给下面标准盒子设置了宽高为200px，padding10px border5px， 可以明显看到盒子被撑大了，实际把宽高给到的是内容区域。

<style>
    .box{
     width: 200px;
     height: 200px;
     background-color: pink;
     padding: 10px;
     border: 5px solid yellow;
     /* box-sizing: border-box; */
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>

 

看一下IE盒子(怪异盒子) 的表现：

给盒子添加上border-sizing:border-box;

 设置的宽高分给 内容区域 + 内边距 + 边框

 

posted @ 2022-08-03 23:11  简法  阅读(128)  评论(0)    收藏  举报