CSS盒子模型

来源：互联网发布：公众号矩阵编辑：程序博客网时间：2024/06/05 19:13

盒子模型(Box Model)

CSS所使用的一种思维模型，分为IE盒子模型和标准W3C盒子模型，包含内容(content)、填充(padding)、边框(border)、边界(margin)四部分。

1、内容content：盒子里装的东西，显示文本和图像；
2、填充padding：害怕内容损坏的辅料，清除内容周围的区域，内边距透明；
3、边框border：盒子本身，围绕在内边距和内容外的边框；
4、边界margin：盒子与盒子的间距，清除边框外的区域，外边距透明。
注：填充只有宽度属性。

标准W3C盒子模型

W3C

W3C盒子模型范围：
1、包括margin、border、padding、content
2、content不包含其他部分
3、思考：盒子占据的位置&盒子实际大小

IE盒子模型

W3C盒子模型范围：
1、包括margin、border、padding、content
2、content包含border和padding
3、思考：盒子占据的位置&盒子实际大小

JQ代码验证

略...明天补上

浏览器解析方式

1、quirks mode（怪异模式），即不遵守W3C标准
2、strict mode（严格模式），即遵守W3C标准
3、浏览器支持strict mode，不放弃quirks mode
4、浏览器如何判断如何解析CSS：

浏览器兼容问题

解决方案：
1、不给元素添加具有指定宽度的内边距，而将内外边距添加到元素的父或子元素
2、HTML页面添加声明 <!DOCTYPE html> 则浏览器会采用W3C盒子模型解释盒子
注：DTD是指的文档类型定义(Document Type Definition)是一套为了进行程序间的数据交换而建立的关于标记符的语法规则。

其它

0、相关点：标准流/非标准流、定位问题、兼容问题
1、盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。
2、为了在所有浏览器中的元素的宽度和高度设置正确的话，需要知道的盒模型是如何工作的。

0 0