css面试点-css盒子模型

2022-10-13 16:48:04

什么是css盒子模型

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

页面渲染时，dom 元素所采用的布局模型。可通过

box-sizing

进行设置

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

css面试点-css盒子模型

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:content-box;
/*IE模型*/
box-sizing:border-box;