CSS3基础使用box-sizing:border-box定义新盒子模型

使用box-sizing:border-box定义新盒子模型

众所周知,CSS盒子模型是包含内容框,内填充,边框和外边距这几个部分,默认情况下盒子模型的尺寸(width和height)指的是内容框的尺寸,也就是内边距和边框等都没有计算在内。

假如将盒子模型想象成一个快递包裹,那里面的货物就是内容框,货物外面包的泡沫包装就是内部填充padding,快递纸盒的厚度就是边框border,按照正常的思维理解,这个快递包裹的尺寸应该是内容框,内部填充和边框之和才对,显然和CSS盒子模型对尺寸的定义相违背了。为了解决这个问题,CSS出现了box-sizing这个属性,它可以将CSS盒子模型对尺寸的思维方式变成和生活中的思维方式一致,下面简单的测试一下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<style type="text/css">
body {line-height:2.4;font-size:20px;}
p {color:#fff;margin:0;}
#my {background:#777;width:10em;padding:20px;border:20px solid #7d7;}
</style>
</head>
<body>
<div id="my">
<p>米奇米妮唐纳德高飞米奇米妮唐纳德高飞米奇米妮唐纳德高飞</p>
</div>
</body>
</html>

这里设置了页面字号为20px,盒子模型的宽度为10em,浏览这个页面后发现每行可显示10个字,也就是宽度为200px,该宽度并未包含盒子内边距和边框,所以整个盒子的宽度被撑大了,加上左右两侧的内边距和边框,总体宽度为280px:

box-sizing的妙用.png

为了不让内容框撑大这个盒子模型,我现在给盒子定义一个box-sizing的属性:

#my {box-sizing:border-box;}

这里定义的box-sizing:border-box表示盒子模型的宽度和高度将包含其内边距和边框,刚才给示例中的盒子模型增加这个定义后,页面的效果如下:

box-sizing的妙用2.png

很显然,这时候盒子总体的宽度变成了200px,不管内边距和边框的尺寸是多少,这时盒子的总体尺寸不变。也就是说,这时候实际内容框的尺寸相当于盒子尺寸减去内边距和边框的尺寸,与生活中的快递包裹模型一致,有的人称这种效果为新盒子模型或CSS3盒子模型。

有了这个定义方法,在很多时候就灵活的多了,有时候盒子的宽度以百分比来设置,又需要同时设置边框或内边距为具体的数值,这时候使用新盒子模型就非常容易实现了,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<style type="text/css">
body {line-height:2.4;font-size:20px;}
.left,.right {height:200px;border:10px solid #f98;float:left;}
.left {background:#59d;width:30%;}
.right {background:#5d8;width:70%;}
</style>
</head>
<body>
<div id="wrap">
 <div class="left"></div>
 <div class="right"></div>
</div>
</body>
</html>

这里有两个并排显示的div分别占据30%和70%的宽度,此时给div加上10px的边框,则网页整体宽度就超出了100%,一行内就放不下两个div了,此时如果给div加上box-sizing:border-box这个定义,问题就解决了:

box-sizing的妙用3.png

有心的朋友注意到这里的属性值是border-box,表示尺寸包括边框在内,那么有没有下面几个定义方法呢:

div {box-sizing:content-box;}
div {box-sizing:border-box;}
div {box-sizing:padding-box;}
div {box-sizing:margin-box;}

事实上,盒子模型box-sizing属性的默认值就是content-box,也就是平常所说的,尺寸仅包含内容框,而后两种定义是不存在的,只要设置了盒子尺寸包含边框,那么一定是包含内边距的,也就是说只要设置了box-sizing:border-box,不管有没有边框,盒子尺寸都会包含内边距,所以没必要再来一个box-sizing:padding-box的定义了,至于box-sizing:margin-box这个就更加没有存在的意义了,还是拿快递包裹来举例,将这个包裹放在冰箱里或放在一个500平米的空房间里,这个包裹的尺寸根本就没有任何影响。

这里和背景裁剪属性background-clip有少许的区别,background-clip属性是可以有border-box,padding-box和content-box三个定义的,分别表示背景被裁剪到边框位置,内边距位置和内容框位置,与box-sizing属性不同的是,box-sizing属性的默认值是content-box,而背景裁剪background-clip属性的默认值是border-box!

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/css3/141.html