css3 box-sizing属性值详解
2024-08-30 00:05:54
box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。
content-box,border和padding不计算入width之内
padding-box,padding计算入width内
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>
效果如下:
最新文章
- java制作验证码
- PHP 格中方法
- mysql mybatis-generator plugin 有page实体类的分页
- Codeforces Round #381 (Div. 2)B. Alyona and flowers(水题)
- flask-admin章节一:使用chartkick画报表
- PHP程序员7小时学会Kotlin系列
- TextView显示颜色高亮的问题
- bzoj 3234: [Ahoi2013]立方体
- java IO流的体系结构图
- C#多线程交替赋值取值
- poj 1416 Shredding Company( dfs )
- build/core/config.mk
- JS —— 轮播图中的缓动函数的封装
- jQuery常用事件及扩展
- if__name__ == &#39;__main__&#39;
- Docker中mysql大小写敏感配置不起作用的问题排查
- Django知识总结(二)
- hashCode 与 equals
- Java学习笔记:输入、输出数据
- 最菜的小鸟(mkdir -pv)