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的新特性
Sep 05 HTML / CSS
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
Jan 11 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 HTML / CSS
移动端HTML5 input常见问题(小结)
Sep 28 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 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中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
jquery键盘事件使用介绍
2011/11/01 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
浅谈django中的认证与登录
2016/10/31 Python
Python基础之getpass模块详细介绍
2017/08/10 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
Python 处理图片像素点的实例
2019/01/08 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
Django设置Postgresql的操作
2020/05/14 Python
组织关系转移介绍信
2014/01/16 职场文书
年终考核评语
2014/01/19 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
五水共治捐款倡议书
2014/05/14 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
批评与自我批评发言稿
2014/10/15 职场文书