CSS3的box-sizing属性详解

最新推荐文章于 2024-07-09 15:27:52 发布

JLinZen

最新推荐文章于 2024-07-09 15:27:52 发布

阅读量2.6k

点赞数

分类专栏： css3.0 文章标签： css3

本文链接：https://blog.csdn.net/jl244981288/article/details/43204739

版权

css3.0 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

随着浏览器对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

JLinZen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3的box-sizing属性详解

随着浏览器对HTML5及CSS3的支持，在移动端及自适应页面中CSS3.0发挥着很大优势；下面我来给大家讲下CSS3.0的属性之一——box-sizing；首先我们来讲下盒模型，具体对于CSS2熟悉的话，很清楚的知道CSS中盒模型的概念，在此我不再详续，实在不了解去参看w3cschool吧；CSS3的box-sizing属性有两个取值：border-bo
复制链接

扫一扫

专栏目录