简介
box-sizing属性包括content-box(default),border-box,padding-box。
1、content-box,border和padding不计算入width之内
2、padding-box,padding计算入width内
3、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>
截图(ff):
总结
以上就是这篇文章的全部内容,希望本文的内容对大家学习或者使用CSS3能有所帮助,如果有疑问大家可以留言交流。
围绕文字、符号、链接三个方面,主要是中文,草拟的个人行文经验: 1. 文字避免...
前言 是不是觉得C++写个服务太累,但又沉迷于C++的真香性能而无法自拔?作为一个...
请在主流浏览器中打开测试页面,在Fiddler里查看http请求。 1. 隐藏图片 img src...
设计是世界上最美,最难以用言语表达的事情。 根据superside网站报道,Konsus正...
2017年5月2日TOP云(zuntop.com)科技报道,五一小长假已过,回程的大家利用网络...
提要: chia允许多台服务器矿机连接单一全节点钱包的方式进行挖矿,而不必在每台...
本文作者:陆康、陈驰枻、聂帅 当前造车新势力越来越火,汽车智能化成为风口,很...
在一个页面中,有许多的控件(元素或标签)。为了更方便的操作这些标签,就需要给...
最近公司开始考核企业站下所有站点,首先从itpub开始进行。为此,开始学习关于如...
前言 很久没写文章了,今天来学习下大名鼎鼎的 布隆过滤器 。 正文 什么是布隆过...