box-sizing

        在通常的网页布局都是由一个个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属性,神奇的发现在一行排列了!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏西枫里博客

CSS中img图片下方出现空白边距的解决办法

偶然发现在排版...

751
来自专栏blackheart的专栏

1.[Andriod]之Andriod布局 VS WinPhone布局

0.写在前面的话 近来被HTML+CSS的布局折腾的死去活来,眼巴巴的看着CSS3中的flex,grid等更便捷更高效的的布局方式无法在项目中应用,心里那叫一个...

2388
来自专栏前端说吧

CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法

3234
来自专栏葡萄城控件技术团队

Spread for Windows Forms快速入门(2)---设置Spread表单

让我们从设置Spread的大小和表单的外观开始学习如何定制Spread,这些操作通常放在Form的构造函数中进行,在InitializeComponent()之...

2417
来自专栏Keegan小钢

Android样式的开发:drawable汇总篇

Android有很多种drawable类型,除了前几篇详细讲解的shape、selector、layer-list,还有上一篇提到的color、bitmap、c...

1831
来自专栏lgp20151222

脱离文档流两操作,float和position:absolute的区别

文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行;

932
来自专栏lhyt前端之路

一点点css的基础原理总结0.前言1.包含块(CB)2.宽和高3.BFC4.行内元素5. 垂直方向的margin6.盒子模型

CSS属性非常多,如果说死记的话,是不容易的,我们了解他的原理,其他不常见的属性都是手到擒来

812
来自专栏DannyHoo的专栏

设置导航栏的背景色和标签栏的背景色

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

2432
来自专栏西城知道

Photoshop快捷键大全 【转需】

PS是当今流行的图片处理工具..功能非常强大..也正是因为功能如此强大..所以有的时候会找不到一些功能在哪..浪费太多时间…

1091
来自专栏用户2442861的专栏

CSS基础(四):盒模型

HTML文档中可以将每个元素都看作是长方形的盒子。而CSS盒模型规定了元素框处理元素内容content、内边距padding、边框border和外边距marg...

1063

扫码关注云+社区

领取腾讯云代金券