盒模型模式

博客介绍了可利用box-sizing属性选择标准模式和怪异模式。标准模式为box-sizing:content-box,会被padding撑开;怪异模式为box-sizing:border-box,盒子大小不受padding影响。还给出了两种模式下盒子总宽高的计算方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

两种模式可以利用box-sizing属性进行自行选择:

标准模式:box-sizing:content-box;

怪异模式:box-sizing:border-box;

两种模式的区别:

标准模式会被设置的padding撑开,而怪异模式则相当于将盒子的大小固定好,再将内容装入盒子。盒子的大小并不会被padding所撑开。

标准模式:盒子总宽度/高度 = 内容区宽度 /高度+padding+border + margin。

效果:

怪异模式:盒子总宽度/高度=width/height+margin。

效果:

 

在标准盒模型中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

 

 

 

 

 

 

 

 

 

 

 

### CSS模型在怪异模式下的行为 #### 怪异模型概述 在怪异模型(Quirks Mode Box Model)中,元素的总宽度和高度计算方式不同于标准模型。具体来说,在怪异模式下,`width` 和 `height` 属性仅指定了内容区域加上内边距(padding)和边框(border)。这意味着如果设置了固定宽度,则实际显示的内容区会更窄。 对于给定的例子,当应用到一个具有特定尺寸、填充和边界的子时: - 宽度:100px (设定宽度) + 2 × 10px (左右padding) + 2 × 5px (左右border) = 130px[^2] - 高度:同样遵循上述原则,即100px (设定高度) + 2 × 10px (上下padding) + 2 × 5px (上下border) = 130px 这种处理方式源于早期Internet Explorer浏览器的行为,并被其他一些旧版浏览器所采用。为了兼容这些老版本浏览器,开发者有时不得不考虑此差异并调整样式表中的相应属性值以确保跨平台一致性。 #### 实际案例分析 下面是一个简单的HTML文档片段及其对应的CSS样式规则,用于演示如何创建一个基于怪异模型的矩形方块: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Box Model Example</title> <style> * { margin: 0; padding: 0; } body { background-color:#f0f0f0; } .quirky-box { box-sizing:border-box;/* 强制使用标准模型 */ -moz-box-sizing:border-box;-webkit-box-sizing:border-box; width: 100px; height: 100px; padding: 10px; border: 5px solid red; display:block; } </style> </head> <body> <div class="quirky-box"></div> </body> </html> ``` 注意这里特意加入了`box-sizing:border-box;`声明来强制使这个例子按照现代的标准模型工作;如果不加这句代码,在某些支持怪异模式的老式渲染引擎中运行这段程序将会看到不同的效果——最终呈现出来的方块大小将是130×130像素而不是预期中的100×100像素。 #### 设置模型的方法 要让浏览器理解应该使用哪种类型的模型,可以通过设置CSS属性`box-sizing`来进行控制。默认情况下,大多数现代浏览器都遵循W3C推荐的标准模型(`content-box`),但如果希望模拟IE6之前的非标准行为或者解决某些特殊情况下的布局问题,可以显式指定为`border-box`或其他选项。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值