ie的盒模型和标准模型

最新推荐文章于 2023-05-22 15:52:32 发布

dhzp5170

最新推荐文章于 2023-05-22 15:52:32 发布

阅读量139

点赞数

原文链接：http://www.cnblogs.com/TomAndJerry/p/10720140.html

版权

使用

box-sizing:content-box || border-box || inherit

原理图

计算

怪异模型|IE模型

div宽度（定死） = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度不会变化

标准模型

div宽度 = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度会变化

代码

<html>
  <head></head>
  <style>
      .demo {
          border: 1px solid;
      }
      .box {
          display: inline-block;
          width: 200px;
          height: 200px;
          border:10px solid;
          background-color:red;
          box-sizing: border-box;
      }
  </style>
  <body>
      <div class="demo">
          <div class="box">123</div>
          <div class="box">234</div>
      </div>
  </body>
</html>

要点

当不对Doctype进行定义时，会触发怪异模式
一般布局采用怪异模型（border-box）解析，这样可以很好的保持网页布局显示

参考

https://www.jianshu.com/p/cc2bc404269b

转载于:https://www.cnblogs.com/TomAndJerry/p/10720140.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dhzp5170

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ie的盒模型和标准模型

使用box-sizing:content-box || border-box || inherit原理图计算怪异模型|IE模型div宽度（定死） = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度不会变化标准模型div宽度 = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度会变化代码...
复制链接

扫一扫