随着浏览器对HTML5及CSS3的支持,在移动端及自适应页面中CSS3.0发挥着很大优势;
下面我来给大家讲下CSS3.0的属性之一——box-sizing;
首先我们来讲下盒模型,具体对于CSS2熟悉的话,很清楚的知道CSS中盒模型的概念,在此我不再详续,实在不了解去参看w3cschool吧;
CSS3的box-sizing属性有两个取值:border-box、content-box:
当然不同的取值,意味着有所不同的计算及取值;
下面我们来个看个例子吧:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>box-sizing属性详解</title>
<style type="text/css">
.borderBox {
width: 100px;
height: 100px;
border: 10px solid #DBDBDB;
padding: 10px;
margin: 10px;
box-sizing: border-box;
}
.contentBox {
width: 100px;
height: 100px;
border: 10px solid #DBDBDB;
padding: 10px;
margin: 10px;
box-sizing: content-box;
}
</style>
</head>
<body>
<div class="borderBox"></div>
<div class="contentBox"></div>
</body>
</html>
再看效果图计算后:
看了上面的图后:
下面我来总结下border-box与content-box的区别吧:
border-box的内边距及边框宽度是计算在总得宽度之内的,在上面的例子中内容框的实际宽度跟高度就只有60pxl了,但是content-box定义的宽度只是内容框的宽度,内边距及边框宽度是定义宽度之外的:
由此我们得到计算公式:
假设我们定义: width = 100px, border-width = 10px, padding = 10px;
border-box盒模型:content-width(实际宽度) = 100 - border-width(20) - padding (20) = 60 ;
content-box盒模型: content-width(实际宽度) = 100 + border-width(20) + padding (20) = 140