css3 box-sizing属性使用参考指南


Posted in HTML / CSS onJanuary 08, 2013

基础知识
语法:
box-sizing : content-box | border-box | inherit

相关属性 : 无

取值
content-box:此值维持css2.1盒模型的组成模式,border|padding|content {element width=border+padding+content}
border-box:此值改变css2.1盒模型组成模式,content|border|padding {element width=content}
说明:
改变容器的盒模型组成方式。

引擎类型 Gecko Webkit Presto Internet Explorer
Box-sizing -moz-box-sizing -webkit-box-sizing -o-box-sizing/box-sizing -ms-box-sizing
 

兼容性:

类型 Internet Explorer Firefox Chrome Opera Safari
版本 (×)IE6 (√)Firefox 2.0 (√)Chrome 1.0.x (√)Opera 9.63 (√)Safari 3.1
(×)IE7 (√)Firefox 3.0 (√)Chrome 2.0.x (√)Safari 4
(√)IE8 (√)Firefox 3.5
 

代码与实例
CSS代码:

复制代码
代码如下:

.box_sizing{
width:180px;
padding:40px 20px;
background:#a0b3d6;
overflow:hidden;
}
.box_sizing .in{
width:100%;
border:12px double #34538b;
background:white;
padding:5px;
box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}

HTML代码:
复制代码
代码如下:

<div class="box_sizing">
<div class="in">此处12像素的border和5像素的padding值算在宽度里面了~~</div>
</div>
               
效果截图
css3 box-sizing属性使用参考指南
HTML / CSS 相关文章推荐
一款基于css3的动画按钮代码教程
Nov 23 HTML / CSS
详解CSS3选择器的使用方法汇总
Nov 24 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
CSS3中设置3D变形的transform-style属性详解
May 23 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 HTML / CSS
CSS3 实现的火焰动画
Dec 07 HTML / CSS
Canvas与Image互相转换示例代码
Aug 09 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
Sep 09 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
Apr 24 HTML / CSS
VW、VH适配移动端的解决方案与常见问题
May 21 HTML / CSS
css3背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 #HTML / CSS
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
Jan 07 #HTML / CSS
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 #HTML / CSS
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 #HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 #HTML / CSS
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 #HTML / CSS
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 #HTML / CSS
You might like
PHP解析html类库simple_html_dom的转码bug
2014/05/22 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
php过滤html标记属性类用法实例
2014/09/23 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
python版本的读写锁操作方法
2016/04/25 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
python的数学算法函数及公式用法
2020/11/18 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
瑞典度假品牌:OAS
2019/05/28 全球购物
J2EE中常用的名词进行解释
2015/11/09 面试题
小学运动会报道稿
2014/10/04 职场文书
2014年司机工作总结
2014/11/21 职场文书
中学教师个人总结
2015/02/10 职场文书
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers