css面试点-css盒子模型

最新推荐文章于 2023-05-15 17:19:35 发布

wflynn

最新推荐文章于 2023-05-15 17:19:35 发布

阅读量463

点赞数 3

分类专栏： css 面试知识点文章标签：盒子模型怪异盒子标准盒子盒模型

文章来源：原创地址

本文链接：https://blog.csdn.net/weixin_40013817/article/details/101167410

版权

169 篇文章 7 订阅

订阅专栏

24 篇文章 0 订阅

订阅专栏

盒子，封装周围的HTML元素，它包括：width、height、padding、border、margin。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

页面渲染时，dom 元素所采用的布局模型。可通过box-sizing进行设置

W3C盒子模型（标准盒模型）

IE盒模型（怪异盒模型）

根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。
但 IE5 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。
解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html> 即可。
假如不用doctype 声明，那么各个浏览器会根据自己的标准去解析网页，即 ie浏览器会采用 ie 盒子模型去解析盒子模型，而 Chrome浏览器会采用标准w3c 盒子模型解析盒子，
使用 doctype 声明，那么所有浏览器都会采用标准 w3c盒子模型解析盒子，网页就能在各个浏览器统一显示。
在使用doctype 声明情况下，设置属性 box-sizing:border-box 就可以定义使用ie盒模型。盒子模型主要适用于块级元素
<body> 标签也有margin：很多人以为<body>标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是<document>，即浏览器。而<body>是<document>的儿子。浏览器给<body>默认的margin大小是8个像素，此时<body>占据了整个页面的一大部分区域，而不是全部区域。

通常情况下，在不设置box-sizing时，默认box-sizing:content-box;

/*标准模型*/
box-sizing:content-box;
/*IE模型*/
box-sizing:border-box;

关注

专栏目录