box-sizing与盒模型

标准盒模型：width+padding+border+margin
ie盒模型：width（contentWidth+padding+border）+margin

box-sizing属性可以指定盒子模型种类

box-sizing兼容性：
Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。
Firefox 支持替代的 -moz-box-sizing 属性。

box-sizing语法：
box-sizing: content-box|border-box|inherit;

box-sizing 默认值：content-box （对应CSS2.1规范中标准的盒子模型计算方式）
inherit :指定box-sizing属性的值，从父元素继承

<html>
<head><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /><title></title><style>*{padding: 0;margin: 0}div{width: 100%;background: green;margin-top: 40px;color: #fff;text-align: center}.div1{border: 20px solid #000;}.div2{border: 20px solid #000;;box-sizing: border-box}.div3{border: 20px solid #000;padding-left: 100px}.div4{border: 20px solid #000;padding-left: 100px;box-sizing: border-box}.div5{height: 60px;}.div6{border: 20px solid #000;height: 60px;padding-left: 100px;box-sizing: border-box}.span{height: 50px}</style>
</head>
<body>
<div class="div1">一个width 100%+boder的div1，结果出现拖动框
</div><div class="div2">一个width 100%+boder的div2，不过用了box-sizing: border-box，结果没有出现拖动框,
</div><div class="div3">一个width 100%+boder+padding的div3，结果出现拖动框
</div><div class="div4">一个width 100%+boder+padding的div4，不过用了box-sizing: border-box，结果没有出现拖动框,
</div><div class="div5">一个width 100%+高60px的div5
</div><div class="div6">一个width 100%+高60px的div6
</div>
</body>
</html>

box-sizing与盒模型相关推荐

html5 box sizing,CSS 盒模型与box-sizing
一.盒模型一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在. MDN的描述: When laying out a docu ...
css3弹性盒模型兼容性,彻底弄懂css3的flex弹性盒模型
由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...
网页中的盒模型css属性,详解CSS中的Box Model盒属性的使用
页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模型( box model ).请看 Chrome DevTools 里的截图: 可以显而易见的看出盒模型由 4 部分组成.从内到外分别是: ...
详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
W3C规范一般来说,页面中的每一个元素都会形成一个矩形盒子,渲染引擎根据给定的样式确定这个盒子的呈现.通俗的来说,页面的布局就是一个个盒子的排列和摆放.掌握了盒子呈现的本质,布局也就轻而易举. 在 ...
盒模型、盒子模型、框模型（box model）
盒模型.盒子模型.框模型(box model) --css将页面中的所有元素都设置为一个矩形的盒子 --将元素设置为矩形的盒子后,对页面的布局就变成了将不同的盒子摆放到不同的位置 --每一个盒子都由 ...
什么是盒模型(Box Model)
什么是盒模型(Box Model) 盒模型规定了网页元素如何显示以及元素间相互关系,它本质上是一个盒子,封装周围的HTML元素.css定义所有的元素都可以拥有像盒子一样的外形和平面空间.即都包含内容区 ...
css里box是什么文件,CSS Box盒模型的详细解说
CSS盒子模型在于你做css之后每个元素都由一个包围该元素的矩形框定义.了解框模型的工作原理是理解CSS并更好地控制布局和演示的关键.话不多说,让我们直接讨论一下CSS盒子模型是什么,一个盒子如何影响 ...
css--DIV+CSS布局、常用属性、盒模型、自定义字体、标签的分类及相互转换
目录一.DIV+CSS布局 1.1 布局时常用的属性 1.2 布局 - 上中下结构 1.3 布局 - 上中下 - 左右 1.4 圣杯布局和双飞翼布局二.字体属性 2.1 字体颜色 2.2 字体大 ...
CSS之盒模型（九）
CSS 盒模型 1.盒子模型简介 2.盒子模型属性 2.1.width和height属性 2.2.border边框属性 2.3.padding内边距 2.4.margin外边距 2.5.盒子模型占位计 ...
【web前端HTML5+CSS3】03CSS--layout（布局）之盒模型
目录 1.文档流 2.盒模型 3.盒模型--边框 4.盒模型--内边距 5.盒模型--外边距 6.盒子的水平布局 7.盒子的垂直布局 8.外边框的折叠 9.行内元素的盒模型 10.默认样式 11.练习 ...

box-sizing与盒模型

box-sizing属性可以指定盒子模型种类

box-sizing与盒模型相关推荐

最新文章

热门文章