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

所属分类: 网页制作 / CSS 阅读数: 1787
收藏 0 赞 0 分享

基础知识
语法:
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
 

兼容性:

类型 IEInternet Explorer FirefoxFirefox ChromeChrome OperaOpera SafariSafari
版本 (×)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效果截图

更多精彩内容其他人还在看

纯CSS实现微信小程序仿QQ顶部提示弹框动画效果

这篇文章主要介绍了纯CSS实现微信小程序仿QQ顶部提示弹框动画效果,需要的朋友可以参考下
收藏 0 赞 0 分享

使用CSS实现无滚动条滚动的两种方法

这篇文章主要介绍了使用CSS实现无滚动条滚动的两种方法,需要的朋友可以参考下
收藏 0 赞 0 分享

深入浅析CSS 选择器分组

这篇文章主要介绍了CSS 选择器分组的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

css 评分效果的星星示例

这篇文章主要介绍了css 评分效果的星星示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

CSS3实现文本垂直排列的方法

这篇文章主要介绍了CSS3实现文本垂直排列的方法,也就是运用了CSS的writing-mode属性,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

利用CSS3实现文字折纸效果实例代码

这篇文章主要给大家介绍了关于利用CSS3实现文字折纸效果的相关资料,文中给出了完整的示例代码,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

通过css使用background-color为背景图添加遮罩效果的两种方法

这篇文章主要介绍了通过css使用background-color为背景图添加遮罩效果的两种方法,需要的朋友可以参考下
收藏 0 赞 0 分享

css遮罩全屏居中对齐的实现方式

本文通过实例代码给大家介绍了css遮罩全屏居中对齐的实现方式,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
收藏 0 赞 0 分享

HTML+CSS实现下拉菜单的实现

这篇文章主要介绍了HTML+CSS实现下拉菜单的实现的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

CSS中的导航栏和下拉菜单的实现

这篇文章主要介绍了CSS中的导航栏和下拉菜单的实现的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多