当前位置:   article > 正文

CSS两种盒模型简单介绍_简单描述一下css盒模型

简单描述一下css盒模型

CSS两种盒模型

两种盒模型:

  1. IE盒子模型
  2. W3C盒子模型

盒子的基本属性

这里我们先来看一下我们打开浏览器的调试工具时看到的一个图
在这里插入图片描述

属性含义
margin外边距
border边框
padding内边距
content内容区,显示文本和图像

在我们设置一个盒子时我们会设置它的 width 和 height,但是对于两种盒模型来说,他们的 width 和 height 的计算方式是不同的

  • IE盒子:width = content + padding + border
  • W3C盒子:width = content

利用box-sizing 来选用盒模型

IE:box-sizing : border-box

W3C:box-sizing : content-box

W3C:box-sizing : content-box

注意:浏览器默认的是 content-box

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小丑西瓜9/article/detail/630909
推荐阅读
相关标签
  

闽ICP备14008679号