box-sizing

十月梦想

发布于 2018-08-29 11:07:48

5330

发布于 2018-08-29 11:07:48

文章被收录于专栏：十月梦想

在通常的网页布局都是由一个个div等元素构成盒子形成形形色色的网页结构,在网页的构成中我们还要进行各种元素的修饰,叫做:盒子模型.

比如边框的增加,内容进行内边距的使用,增加了原来的盒子模型的尺寸,但是我们又不想改变这个,我们又要重新减小盒子模型原来的尺寸.实属麻烦,在css3种,加入box-sizing:border-box就可以解决这个问题,盒子原来尺寸变.加入边框,内边距会重新适当的修饰元素内的内容格局,总的盒子模型不会发生改变!

box-sizing应用小例子:

	<style type="text/css">
			div{
				width:20%;
				height:200px;
				float:left;
				background: orange;
				border: 5px solid #26ffff;
				box-sizing: border-box;
			}
		</style>
	</head>
	<body>
		<!--
        	作者：24920@163.com
        	时间：2018-01-30
        	描述：box-sizing:border-box表示不改变盒子的整体大小
        -->
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</body>

应用说明:在网页进行布局5个div,每个div宽度占浏览器的20%,5个正好可以排下,但是给每个div加上5px的边框,5个div就出现6个边框,多出6*5px多出30px在一行无法排列则进行换行,这个肯定不是我们要的效果!然而使用了box-sizing属性,神奇的发现在一行排列了!

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018-2-1，如有侵权请联系 cloudcommunity@tencent.com 删除

border