CSS3的box-sizing 属性

box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式
box-sizing: content-box; 这是默认属性，盒子的宽度和高度只包含内容，不包含内边距和边框
box-sizing: border-box; 盒子宽度和高度包括了padding 和 border
如果设置一个盒子

 div{width:100px; border:10px solid red; padding:10px;}

*那么最终 div 容器的实际宽度为：*
100px(width)+2*10px(padding)+2*10px(border)=140px所以你会得到一个比你预期（100px）还要更大的容器，结果就是会破坏网页布局。注意：margin 的尺寸不会被计算入最终容器宽度，因为对他的定义为对这个容器的留白，但不属于容器本身。如果当我们定义一个容器的 box-sizing 属性为 border-box 时（表达式 div{box-sizing:border-box}）
那么我们创建一个和上段中相同设置的 <div> 容器时，那么他的最终宽度即为 100px,
那么它的内容部分的有效宽度变成了 100px-2*10px-2*10px=60px; 所以你会得到一个你预期大小的盒子容器
但是只是被压缩了内容部分尺寸而已，但是对于整体布局而言益处颇多。所以要合理利用好这个属性，这个属性十分重要。

<!DOCTYPE html>
<html>
<head><style>*{margin: 0px;padding: 0px;}.bigBox{width: 500px;height: 500px;margin: 0 auto;background-color:blue;}.smallBox{width: 500px;height: 50px;margin: 0 auto;background-color: skyblue;padding-left: 50px;box-sizing: border-box; /*盒子宽度和高度包括了padding 和 border */}</style>
</head>
<body><div class="bigBox"><div class="smallBox">我是smallBox中的内容</div></div>
</body></html>

运行结果

如果不加 box-sizing: border-box；则运行结果为

CSS3的box-sizing 属性相关推荐

html中投影效果图,利用CSS3（box shadow）制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
html5调盒子边框大小,CSS3 - 盒子大小(CSS3 - Box Sizing)
CSS3 - 盒子大小(CSS3 - Box Sizing) Box大小调整属性用于更改元素的高度和宽度. 从css2开始,box属性的工作方式如下所示 -width + padding + bord ...
box-sizing是CSS3的box属性
box-sizing是CSS3的box属性之一.一说到CSS的盒模型(Box model)我想很多人都会比较烦,特别是对于新手,然而这个Box model又是我们CSS运用中比较重要的一个属性.那么C ...
css3中的box-sizing属性
盒子宽度.高度计算公式: css元素宽度 = width + padding + border css元素高度 = height + padding + border css3之前,当我们需要呈现一个 ...
css中哪些属性与创建多列相关,css3中的新增属性有哪些
css3中的新增属性有哪些发布时间:2021-04-02 17:39:08 来源:亿速云阅读:90 作者:Leah 这篇文章将为大家详细讲解有关css3中的新增属性有哪些,文章内容质量较高,因此小 ...
CSS3学习之 animation 属性
发现animation这个新属性很有趣,在此学习,并整理下! 浏览器支持: Internet Explorer 10.Firefox 以及 Opera 支持 animation 属性: Safari ...
CSS3的滤镜filter属性
css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果.老照片(黑白照片).火焰效果等. 一.blur(px)高斯模糊二.brightnes ...
使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果
关于工具: 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及CSS3中的rg ...
CSS3动画的常见属性（CSS3）
CSS3动画的常见属性(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charset ...
html5中css新增的属性,css3有哪些新增属性？常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...

CSS3的box-sizing 属性

CSS3的box-sizing 属性

CSS3的box-sizing 属性相关推荐

最新文章

热门文章