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 盒模型以及box-sizing属性全面了解
Sep 20 HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
Apr 24 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
Nov 19 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 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数据缓存的使用说明
2013/05/10 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
PHP和MYSQL实现分页导航思路详解
2017/04/11 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
2011/09/19 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
用Python写的图片蜘蛛人代码
2012/08/27 Python
python正则表达式re模块详细介绍
2014/05/29 Python
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
带刀到教室的检讨书
2014/10/04 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
食堂卫生管理制度
2015/08/04 职场文书
MySQL Innodb关键特性之插入缓冲(insert buffer)
2021/04/08 MySQL
Selenium浏览器自动化如何上传文件
2022/04/06 Python
Oracle中DBLink的详细介绍
2022/04/29 Oracle