标准盒模型、怪异盒模型对比与应用

keithxiaoy 发布于2019-08-29 12:59 / 2932人阅读

摘要：百度标准盒模型，所有的介绍都是在标准模式下，一个块的总宽度左右左右左右在怪异模式下，一个块的总宽度左右既已经包含了和值然后再介绍一下新属性那么，到底这两个公式里提到的总宽度是什么意思呢两种模式最终效果有什么差别呢话不多说，上代码先看标准

百度标准盒模型，所有的介绍都是
在标准模式下，一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)
在怪异模式下，一个块的总宽度=width+margin（左右）（既width已经包含了padding和border值）
然后再介绍一下css3新属性
box-sizing: border-box;

那么，到底这两个公式里提到的总宽度是什么意思呢？两种模式最终效果有什么差别呢？
话不多说，上代码
html

css

#box {
    width: 400px;
    height: 400px;
    margin: 70px;
    padding: 20px;
    border: 5px solid black;
}
#child {
    width: 100%;
    height: 100%;
}

先看标准模式：
元素

父元素

子元素

标准模式，我们设置#box的宽高为400px，其对应的content（内容区）宽高为400px，
父元素的高度为#box内容区高度+上下border+上下padding，结果为450px
子元素的高度为#box内容区高度

然后我们再看下怪异模式
css添加代码

div {
    box-sizing: border-box;
}

元素

父元素

子元素

标准模式，我们设置#box的宽高为400px，其对应的content（内容区）宽高却是
width-上下padding-上下border，结果为350px;
父元素的高度为#box内容区高度+上下border+上下padding，结果为400px
子元素的高度为#box内容区高度350px

标准盒模型中，css设置width为x，对应元素content便为x
而在怪异模式中，元素的content宽度是由x减左右padding，再减左右margin得出的

上面我们了解了标准盒模型和怪异模式的区别，接下来我们举个应用的例子，仅供参考
需求：创建一个div，div的左侧距屏幕左侧20px，div的右侧在屏幕中间
标准模式可以轻松实现

position: absolute;
left: 20px;
right: 50%;

如果右侧位置改为屏幕中间位置左侧30px，如何实现？
可以设置一个父元素，让div右侧距离父元素30px即可，为方便展示，这里使用行内样式

如果需求更进一步，要求元素能够撑起父元素的高度，如何实现？
显然position已经无法满足需求
实现方式有很多，这里我们只介绍使用怪异模式如何实现


    测试测试测试测试测试测试测试测试测试测试

效果图

云服务器 GPU云服务器盒模型盒模型html吗简述html盒模型对象模型与数据模型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112288.html

标准盒模型与怪异盒模型 + box-sizing

摘要：标准盒模型标准所有元素可以看作盒子，在中，这一术语是用来设计和布局时使用。在标准盒模型中盒子占位高度与之一样。不幸的是，和在怪异模式中使用自己的非标准模型。标准盒模型(w3c标准) 所有HTML元素可以看作盒子，在CSS中，box model这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 showImg(h...

SimpleTriangle 2019-08-29 14:17 评论0 收藏0
【前端芝士树】详解CSS盒模型、BFC、OffsetWidth&ClientWidth&am

摘要：提供了糟糕的支持，而虽然接近标准，但依旧未能完全正确的支持标准。尽管修复了许多的问题，但是依然延续实现中的其它故障主要是盒模型问题。因此大部分的声明将触发严格模式即依据标准的规则渲染网页。深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文将从盒模型开始，一步步涉及一些常见的前端笔试和面试点主要参考自第一篇文章，然而笔者在读的时...

binta 2019-08-29 16:13 评论0 收藏0
CSS盒模型对比

摘要：盒模型一般分为标准盒模型，盒模型一般大家都是使用需要注意的是设置了这样一条样式所以在使用过程中需要小心，不要冲突，导致怪异的情况出现而不知原因默认值标准盒模型顾名思义此时属性值是内容的宽度，而盒子的宽度是的宽度所以盒子大小会随盒模型一般分为：w3c标准盒模型（content-box），IE盒模型（boder-box）一般大家都是使用content-box,需要注意的是bootstra...

young.li 2019-08-30 15:54 评论0 收藏0
CSS盒模型对比

摘要：盒模型一般分为标准盒模型，盒模型一般大家都是使用需要注意的是设置了这样一条样式所以在使用过程中需要小心，不要冲突，导致怪异的情况出现而不知原因默认值标准盒模型顾名思义此时属性值是内容的宽度，而盒子的宽度是的宽度所以盒子大小会随盒模型一般分为：w3c标准盒模型（content-box），IE盒模型（boder-box）一般大家都是使用content-box,需要注意的是bootstra...

thekingisalwaysluc 2019-08-02 16:07 评论0 收藏0