border-box

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box，border和padding不计算入width之内

padding-box，padding计算入width内

border-box，border和padding计算入width之内，其实就是怪异模式了~

ie8+浏览器支持content-box和border-box；

ff则支持全部三个值。

使用时：

-webkit-box-sizing: 100px; // for ios-safari, android

-moz-box-sizing:100px; //for ff

box-sizing:100px; //for other

<style type="text/css">.content-box{box-sizing:content-box;-moz-box-sizing:content-box;width: 100px;height: 100px;padding: 20px;border: 5px solid #E6A43F;background: blue;}.padding-box{box-sizing:padding-box;-moz-box-sizing:padding-box;width: 100px;height: 100px;padding: 20px;border: 5px solid #186645;background: red;                }.border-box{box-sizing:border-box;-moz-box-sizing:border-box;width: 100px;height: 100px;padding: 20px;border: 5px solid #3DA3EF;background: yellow;}
</style>

转载于:https://www.cnblogs.com/theWayToAce/p/5608257.html

border-box相关推荐

IE的box模型显示bug
原作者charlee.原始链接http://tech.idv2.com/2007/01/02/ie-box-model-bug/以及本声明. box模型即由<div>等块元素的 margi ...
CSS魔法堂：重拾Border之——图片作边框
前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
BFC(Box Formatting Context)的原理
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...
（转）IE的box模型显示bug
box模型即由<div>等块元素的 margin.padding.border.width.height 等属性构成的显示模型,它是CSS布局的基础.通过设置<div>的各种属 ...
Firefox开发者工具里查看HTML元素的Box模型
box模型的组成部分: Content box:通过width和height属性指定大小. padding box:衬垫.包裹content盒模型. border box margin box 如下图 ...
使用chrome development tool观察box 模型
测试代码如下: <html> <style> #parent{width:400px;height:400px;margin:20px;padding:19px;border: ...
CSS 框模型( Box module )
框和布局在 KB005: CSS 层叠中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...
CSS魔法堂：小结一下Box Model与Positioning Scheme
Positioning Scheme的优先级简单粗暴上规则:) Normal flow作为默认的定位模式其优先级自然是最低的; Absolute positioning相比Float,与Norma ...
CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins
前言盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...
css直角线_CSS魔法堂：重拾Border之——不仅仅是圆角
前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-to ...

border-box

border-box相关推荐

最新文章

热门文章