标准盒模型和怪异盒模型的区别

最新推荐文章于 2022-08-14 16:29:36 发布
最新推荐文章于 2022-08-14 16:29:36 发布
阅读量95 收藏
点赞数 1
分类专栏： html 文章标签： html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZZYGTHH/article/details/119811320
版权

标准盒模型
    标准盒模型中，我们设置的padding和border不包含在width和height中，单独显示
怪异盒模型
    怪异盒模型中，我们设置的padding和border会包含在width和height中
    注：当没有添加文档声明时，就会触发某些浏览器（IE6）怪异模式
盒模型的转换
    语法：box-sizing:content-box | border-box
    content-box  默认值，以标准盒模型显示
    border-box  以怪异盒模型显示（padding和border会计算在width和height中）

ZZYGTHH
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
标准盒模型和怪异盒子模型的区别
zhugedali_的博客
07-11 722
同理，内容区域的高度为 100px，加上上下内边距各 20px，高度变为 100 + 20×2 = 140px，加上上下边框各 10px，高度变为 140 + 10×2 = 160px，再加上上下外边距各 10px，最终在垂直方向占据的总高度为 160 + 10×2 = 180px。- 内边距在内容区域的四周，左右内边距各 20px，所以加上内边距后，水平方向的宽度变为 200 + 20×2 = 240px。- 设置的宽度（width）包括了内容区域、内边距和边框的宽度。
标准盒模型与怪异盒模的区别.html
02-23
介绍了css中盒模型的一些属性的位置设置和标准盒模型与怪异盒模型的一些区别，他们的区别在于标准盒模型与怪异盒模型的大小计算的不同。
标准盒模型和怪异盒模型的区别？
m0_46389895的博客
03-16 3708
标准盒模型：content（内容区）+padding（填充区）+border（边框）+margin（外边距) 怪异盒模型：width{content（内容区）+padding（填充区）+border（边框）}+margin（外边距） 标准盒模型和怪异盒模型本质上都是一个盒子，它们的区别就是计算宽度和高度的不同。 标准盒模型是盒子的总宽度=内容区+填充区+边框+外边距，它的内容区是不包含填充区和...
详解CSS 怪异盒模型和标准盒模型
12-30
由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型） 用两个简单的例子分别介绍下这两个盒子模型： 标准盒模型： &lt...
IE盒子模型和标准W3C盒子模型
09-27
在Web开发中，有两种主要的盒子模型：IE盒子模型和标准W3C盒子模型，这两种模型对于元素尺寸的计算方式有所不同，因此对页面布局有着深远的影响。 **标准W3C盒子模型**遵循W3C规范，它将每个HTML元素视为一个矩形...
css盒模型.docx
02-24
标准盒模型和怪异盒模型是两种不同的盒模型计算方法。标准盒模型的计算方法是：width + 左右 padding + 左右 border + 左右 margin，高度计算方法相同。怪异盒模型的计算方法是：width（content + border + padding...
操作元素之修改样式属性
leechoy
06-12 649
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..
标准盒模型与怪异盒模型的区别
goldenflower123的博客
02-23 268
标准盒模型与怪异盒模型的区别 盒模型概念：盒模型是CSS布局的基础。 作用：用来控制元素与元素，或元素和内容之间的位置关系 标准盒模型与怪异盒模型有什么区别呢？ box-sizing:content-box; box-sizing:border-box; box-sizing:inherit - 标准盒模型：box-sizing:content-box 标准盒模型组成：content（内容区...
标准盒模型和怪异盒模型区别
crispy_cookie的博客
03-16 432
标准盒模型和怪异盒模型的区别 在正式介绍标准盒模型和怪异盒模型之前，我们先来简单介绍一下什么是盒模型。 所谓的盒模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是盛装内容的容器。每个容器都是由内容（content）、内边距（padding）、外边距（margin）和边框（border）组成。 对于标准盒模型来说，它的width和height定义的是内容（content）的宽高，不包括pad...
CSS标准盒模型和怪异盒模型区别
qq_59181609的博客
08-14 1416
3.当怪异盒模型的宽高确认时，给怪异盒模型添加内边距和边框，怪异盒模型的宽高不会改变，而是通过向内压缩，挤压 content 内容的宽高实现。即外边距，边框，内边距，内容。2.怪异盒模型在计算宽高时包含 conntent 内容、padding内边距、border边框的宽高。2.标准盒模型在计算宽高的时候只计算 content 内容的宽高，不包含内外边距以及边框的宽高。3.当标准盒模型的宽高确认时，增加内外边距和边框会撑大原盒子。表示IE盒模型（怪异盒模型）表示标准盒模型（默认值）...
标准盒子模型和怪异盒子模型的区别
最新发布
06-21
3. **布局调整**：对于开发者来说，理解和处理怪异模型可能导致额外的代码复杂性，尤其是在处理跨浏览器兼容时。 **相关问题--:** 1. 在哪些浏览器中会遇到怪异盒子模型的问题？ 2. 如何避免因为盒子模型差异导致的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值