CSS中width与padding/border的关系

HTML/CSS 2013-12-10 style,width,border,calc

在CSS中给DIV定义的宽度是不包含border与padding的,如:

<div style="width:100px; height:100px; padding:10px; border:5px solid red;"></div>

这个div虽然宽度给的是100px,但实际上它占用的宽高应该等于:

100px + (5px + 10px) * 2 = 130px

因此经常遇到这种情况:

CSS Code

#parent {
    width: 200px;
    height: 300px;
}

#child {
   width: 188px;
   height: 288px;
   border:1px solid blue;
   padding: 5px;
}

HTML Code

<div id="parent"><div id="child">Body Contents</div></div>

显然这是一个很蛋疼的写法,子标签不能随着父标签的大小而自适应,如果把#parent的宽高修改了,还需要修改#child的宽高以便它适应#parent满屏。或者也有不少在js中算出,比如jQuery有一个可以算出包含border与padding的函数:

$(div).outerWidth();  // 130
$(div).outerHeight();  // 130
$(div).width();   // 100
$(div).height();  // 100

其实在CSS中,也有一些样式属性能解决border与padding的毛病

假设一个例子:

CSS Code

#myDiv {
    width: 100%;
    height: 100%;	
    border:25px solid red;
    background: #ccc;
}
			
#parent {
    height: 100px;
    width: 100px;
    margin: 100px;
    border: 2px solid blue;
}

HTML Code

<div id="parent">
	<div id="myDiv">calc</div>
</div>

效果,#myDiv溢出了:

1、使用calc属性

#myDiv {
    width: calc(100% - 50px);
    height: calc(100% - 50px);	
    border:25px solid red;
    background: #ccc;
}

效果:

2、使用box-sizing

#myDiv {
	width: 100%;
	height: 100%;	
	border:25px solid red;
	background: #ccc;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

效果:

3、position居中

#myDiv {
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	right:0;
	margin:auto;
	border:25px solid red;
}
			
#parent {
	position: relative;
	height: 100px;
	width: 100px;
	margin: 100px;
	border: 2px solid blue;
}

效果:

文字链接:《CSS中width与padding/border的关系

文章地址:http://www.qttc.net/201312389.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 3

  • 其实单从让带边框的子元素自动跟随父元素伸缩 width,其实并没有这么麻烦。 div 默认的是 display block,block 元素设置 width auto 的话,是自动拉伸到父元素的宽度,这里包括了 padding margin border 的宽度。 看下 http://jsbin.com/AVAQuFId/1/edit
    2013-12-12 09:57:11 [ 跟帖 ]
    你的方法也不错,宽度能拉伸,但高度只能根据内容,而不是满屏。如果有些情况下,你必须指定DIV的宽和高才能做一些事,比如绘图。
    2013-12-12 14:04:30 [ 跟帖 ]
    恩,特殊情况特殊对待
    2013-12-12 14:06:47 [ 跟帖 ]
    1 #