百度标准盒模型,所有的介绍都是
在标准模式下,一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)
在怪异模式下,一个块的总宽度=width+margin(左右)(既width已经包含了padding和border值)
然后再介绍一下css3新属性box-sizing: border-box;
那么,到底这两个公式里提到的总宽度是什么意思呢?两种模式最终效果有什么差别呢?
话不多说,上代码
html
<div id="parent">
<div id="box">
<div id="child"></div>
</div>
</div>
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即可,为方便展示,这里使用行内样式
<div style="width: 50%;position: relative;background-color: black;height:10px;">
<div id="bod" style="position: absolute; left: 20px; right: 30px; height: 10px; background-color: red;"></div>
</div>
如果需求更进一步,要求元素能够撑起父元素的高度,如何实现?
显然position已经无法满足需求
实现方式有很多,这里我们只介绍使用怪异模式如何实现
<div style="width: 50%;background-color: black;padding: 0 30px 0 20px;">
<div id="bod" style="width: 100%; background-color: red;">测试测试测试测试测试测试测试测试测试测试</div>
</div>
效果图
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。