怪异盒模型 box-sizing

最新推荐文章于 2025-09-18 10:12:20 发布
原创 最新推荐文章于 2025-09-18 10:12:20 发布 · 1.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3

本文详细介绍了两种盒模型：标准盒模型(content-box)与怪异盒模型(border-box)的区别及应用场景。标准盒模型中宽度仅包括内容宽度，而怪异盒模型则将内边距和边框也计入总宽度内，通常在移动端布局中使用。

box-sizing : content-box/border-box

 

（content-box ）盒模型 ： width =   内容宽

（border-box ）怪异盒模型 ： width = padding + border + 内容宽  

 

怪异盒模型一般用于移动端布局。

CSS基础知识day8 box-sizing、resize、box-shadow、opacity、背景属性、border-radius、渐变、字体图标、2D、3D变换、过渡、动画、伸缩盒模型、BFC
2301_77358195的博客
11-11 697
CSS3在未来会按照。
怪异盒模型
m0_73749787的博客
09-29 181
的距离由margin决定属于同一个bfc的相邻的box的margin会发生塌陷。display转行内快（inline-block 也可以触发）在内部的box会垂直方向，一个接着一个的排序box在垂直方向。web页面中盒模型布局的css渲染模式块级模式渲染上下文。它是一个独立的渲染区域里面的元素和外面的元素毫不相干。实际高度=内容（height）中间盒子不会受到两边盒子的影响。他的宽度=内容（width）
标准盒子模型和怪异盒子模型
热门推荐
weixin_47340917的博客
10-08 1万+
标准盒子模型和怪异盒子模型一、概念二、计算方法三、默认盒模型四、盒模型转换五、演示代码六、总结 今天来为简单介绍一个在HTML+CSS中的一个重要概念：标准盒子模型和怪异盒子模型。 一、概念 标准盒模型采用的W3C标准，盒子的content内容部分由width宽度和height高度决定，添加padding内边距或border外边框后，宽高都会进行相应增长； ②怪异盒模型也称为IE盒模型，是IE浏览器设计元素时遵循的规则。怪异盒模型的宽高在div盒子初次设置时就已经规定，添加padding或者border，
标准盒模型（W3C 盒模型）怪异盒模型（IE 盒模型）
最新发布
yonghuid123453的博客
09-18 556
CSS盒模型分为标准盒模型和怪异盒模型。标准盒模型中，width/height仅包含内容区域，总宽度需额外计算padding和border；怪异盒模型中，width/height包含内容、padding和border，总宽度等于设置值。通过box-sizing属性切换：content-box为标准模型（默认），border-box为怪异模型。开发中常全局设置border-box以简化布局计算，避免尺寸超出预期。
标准盒模型、怪异盒模型（box-sizing）
aizou6838的博客
03-14 331
CSS中Box model是分为两种: W3C标准（标准盒模型） 和 IE标准盒子模型（怪异盒模型）。大多数浏览器采用W3C标准模型，而IE中则采用Microsoft自己的标准。 重要的一个属性是box-sizing:content-box || border-box || inherit（默认是content-box） box-sizing:content-box：采用标准盒模...
3.怪异盒模型box-sizing？弹性盒模型|盒布局?【HTML】
weixin_30632883的博客
07-26 182
在标准模式下的盒模型：盒子总宽度/高度=width/height+padding+border+margin 在怪异模式下的盒模型下，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin; box-sizing有两个值一个是c...
详解CSS3中的box-sizing（content-box与border-box）
12-14
border-box：怪异盒模型，低版本IE浏览器中的盒模型 现代浏览器和IE9+默认值是content-box。 语法格式： box-sizing：content-box | border-box 区别： content-box：padding和border不被包含在定义的width和height...
CSS盒模型详解：标准与怪异模型对比及box-sizing应用
无论是选择标准模型还是怪异模型，关键在于明确当前使用的box-sizing类型，并在整个项目中保持一致性。随着Flexbox、Grid等现代布局技术的发展，盒模型依然是底层支撑，任何复杂的布局最终都要回归到每个元素的盒...
怪异盒模型&弹性盒
weixin_44222157的博客
04-14 487
怪异盒模型 怪异盒模型又叫IE盒模型，它可以使padding和border都在元素宽高的内部，不会把盒子撑大一般在移动端开发时使用。 触发条件：box-sizing:border-box; 例： 我们设置了一个宽400px高300px的盒子，给它添加了10px的border和50px的padding，标准盒模型中，padding会把盒子撑大且border会在盒子的外部，而添加**box-sizi...
怪异盒模型、弹性盒子、常见CSS样式（自身样式）
kaitezhimao的博客
05-12 1063
在width给定的情况下，怪异盒模型增加padding，border时盒子尺寸不变，会向内挤压内容 区域。在width给定的情况下，标准盒模型增加paddding、border都会扩大盒子的尺寸。// 位置坐标/原点坐标在盒子的左上角。内容区域的大小 = width - 左右的padding - 左右的border。整个盒子的大小 = width + 左右的padding + 左右的border。rgba(0-255 , 0-255, 0-255) //二进制。
什么是怪异盒模型
weixin_42577379的博客
02-22 4365
盒模型分为标准盒模型和怪异盒模型，他们的区别在于计算内容区的不同。 我们来看input标签 这是一个高度相同，边框相同的搜索框和一个提交按钮。给他们写长、相同的高和一个1px的边框。 看 他们在网页中显示的高度现在看起来是不一样的。不止高度不一样提交按钮的长度现在也不是和我定的数值一样。这个提交按钮就是一个怪异盒模型。 标准盒模型宽度实际占有的位置大小： 宽+左右padding+左右borde...
CSS-怪异盒模型和标准盒模型
Neokekeke的博客
12-18 2926
在html文档中，每个渲染在页面中的标签都是一个个盒子模型。 盒子模型又分为 ： W3C标准的盒子模型 和 IE标准的盒子模型。 由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型） 用两个简单的例子分别介绍下这两个盒子模型：标准盒模型：<!--html--> <div class="box1">
CSS--怪异盒子模型
m0_56123958的博客
03-12 9043
CSS–怪异盒子模型 怪异盒子模型 标准盒子宽度计算方法（扩张主义） border-left-width+width+padding-left+padding-right+border-right-width <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 100px;
CSS盒子模型【怪异盒模型、定位看这一篇就够了！！！】
zheshiyangyang的博客
08-26 1496
也就是盒子里面能留给子元素的宽度和高度大小，也就意味着盒子里面的内容的最大面积就是width和height形成的矩阵面积。将盒子的左右两边的margin都设置为auto，盒子将水平居中。
H5基础——(5)怪异盒模型、弹性盒模型、倒影及阴影
Erosvan的博客
09-24 4125
一、怪异盒模型 怪异盒模型 .reddiv { width: 200px; height: 200px; background-color: red; box-sizing: border-box; border: 20px blue solid; padding-left: 50px; /*怪异盒模型
CSS标准盒子（标准盒模型）和怪异盒子（怪异盒模型）
2203_75479159的博客
04-25 2827
标准盒子：内容尺寸独立，但总尺寸易失控（需手动计算padding和border怪异盒子：总尺寸固定，内容自适应，更适合现代响应式布局。优先选择border-box，仅在特殊需求时回退到。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值