box_sizing

box-sizing:border-sizing||content-sizing||inherit

取值说明

1、content-box:此值为其默认值，其让元素维持W3C的标准Box Model，也就是说元素的宽度/高度（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度/高度（content width/height）即：Element Width/Height = border+padding+content width/height。

2、border-box:此值让元素维持IE传统的Box Model（IE6以下版本），也就是说元素的宽度/高度等于元素内容的宽度/高度。（从上面Box Model介绍可知，我们这里的content width/height包含了元素的border,padding,内容的width/height【此处的内容宽度/高度=width/height-border-padding】）。

兼容浏览器

box-sizing现代浏览器都支持，但IE家族只有IE8版本以上才支持，虽然现代浏览器支持box-sizing，但有些浏览器还是需要加上自己的前缀，Mozilla需要加上-moz-，Webkit内核需要加上-webkit-，Presto内核-o-,IE8-ms-，所以box-sizing兼容浏览器时需要加上各自的前缀：著作权归作者所有。

1 -moz-box-sizing: content-box;  /*Firefox3.5+*/
2 -webkit-box-sizing: content-box; /*Safari3.2+*/
3 -o-box-sizing: content-box; /*Opera9.6*/
4 -ms-box-sizing: content-box; /*IE8*/
5 box-sizing: content-box; /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/

注：IE6，IE7不支持.为了兼容还需要为他们写一个Hack

/*这里需要减去border的值，如果padding的值不是0还需要减去padding的值，*/*height:15px;
*width: 15px

box-sizing ： content-box || border-box || inherit著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-box-sizing © w3cplus.com

转载于:https://www.cnblogs.com/zwtqf/p/7682929.html

box_sizing相关推荐

让你的div可拖动（手机端）
电脑端引入 jQuery UI 可以实现.而手机并没有 mousemove 等事件,所以这里采用手机事件:touchstart 和 touchmove 实现拖拽. 一.引入: 只要引入 jQuery. ...
CSS 层叠样式表入门使用
CSS:页面美化和布局控制 CSS:Cascading Style Sheets 层叠样式表层叠:多个样式可以作用在同一个html的元素上,同时生效好处功能强大将内容展示和样式控制分离降低耦 ...

box_sizing

box_sizing相关推荐

最新文章

热门文章