关闭
> css教程 > css >

box-sizing:content-box与border-box的用法教程

来源:网络 文章列表 2018-12-20 8
css3的box-sizing属性下的盒模型分析

CSS3中的box-sizing 属性允许以特定的方式来指定盒模型,有两种方式:

  • content-box:标准盒模型,又叫做 W3C盒模型,一般在现代浏览器中使用的都是这个盒模型
  • border-box:怪异盒模型,低版本IE浏览器中的盒模型

现代浏览器和IE9+默认值是content-box。

box-sizing 语法格式:

box-sizing:content-box;
或
box-sizing:border-box;

 

content-box 和 border-box 的区别:

  •     content-box:padding 和 border 不被包含在定义的 width 和 height 之内。 盒子的实际宽度=设置的width+padding+border 
  •     border-box:padding 和 border 被包含在定义的 width 和 height 之内。盒子的实际宽度=设置的 width(padding和border 不会影响实际宽度)

我们新建一个HTML页面来详细解释

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
	div{
	 height:200px;
	 width:200px;                
	 margin:50px;
	 border:20px solid black;
	 padding:20px;
	} 
	.div1{
	  background:green;
	  float: left;
	  box-sizing:content-box;
	} 

	.div2{
	  background: pink;
	  float: left;
	  box-sizing:border-box;  
	}
  </style>
</head>
<body>
	<div class="div1">
		div1
	</div>
	<div class="div2">
		div2
	</div>
</body>
</html>

得到如下效果:

 

腾讯云限量秒杀

1核2G 5M 50元/年 2核4G 8M 74元/年 4核8G 5M 818元/年 CDN流量包 100GB 9元

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论