关于box-sizing属性
写在前面
文中错误或不足之处欢迎指正批评,共同交流!
在项目中写css组件时遇到一个问题:
要求两个按钮均分其父元素宽度,且父元素宽度不固定,像这样:
第一反应很自然的想到使用flex布局,但是由于需要兼容ie9以上,以及安卓微信端那个x5浏览器,加之只有两个按钮布局相对简单,所以选择了浮动的方法:
<div class="mask">
<div class="confirm">
<div class="confirm-text">提示信息</div>
<div class="confirm-btn confirm-btn-sure">确定</div>
<div class="confirm-btn">取消</div>
</div>
</div>
.mask{
...
}
.confirm{
...
}
.confirm-text{
...
clear: both;
}
.confirm-btn{
float: left;
width: 50%;
...
}
但是问题就来了,再给一个按钮加一条侧边的边框,那么就分行显示了。如果每个按钮宽度只给到49%甚至49.5%倒是可以解决这个问题,但如果点击改变背景颜色的时候还是能被发现,而且非常丑,这个时候就可以使用box-sizing: border-box;使元素边框的宽度包含在元素本身宽度内,这样问题就解决了:
.confirm-btn{
box-sizing: border-box;
float: left;
width: 50%;
...
}
.confirm-btn:active{
background: rgb(235,235,235);
}
.confirm-btn-sure{
border-right: 1px solid rgb(235,235,235);
}
下面就来说一说box-sizing这个属性。
box-sizing属性
box,如大家所熟知的,是css布局中最小的单位,所有的布局都是由一个一个矩形的box搭建出来的,就很像是搭积木那样。而每一个box都会由四部分组成,包括:content,padding,border,margin。那么box的高宽是如何计算的呢?css中有一个属性叫box-sizing,该属性取不同的值会决定box高宽不同的计算方式。
先来说说兼容性,目前测试IE9以上版本以及其他现代浏览器都兼容这个属性。
这个属性有三个可取值,分别是:content-box,padding-box,border-box,默认值为content-box,但是padding-box的兼容性似乎存在问题,最新版chrome和safari也不能生效,故本文中暂时不做讨论。
1.content-box(默认值)
这也就是最常规的计算方式,某个box的高等于它的height+padding+border+margin,宽也是同理,以下不再赘述。
2.border-box
当取值为border-box时,这个box的高就等于它的height+margin了,也就是说该box的height是由content部分的height和padding以及border共同组成的了,换言之,padding和border不再向外延伸,而是往里边挤。
.border-box{
box-sizing: border-box;
width: 200px;
height: 200px;
padding: 50px;
}
最新文章
- [New Portal]Windows Azure Storage (14) 使用Azure Blob的PutBlock方法,实现文件的分块、离线上传
- Mysql常用数据类型
- jquery选择器中两个class是什么意思?
- Xwindow 连接 RHEL 5
- 【学习笔记】【C语言】字符串数组
- Jquery EasyUi实战教程布局篇
- 第二篇:gradle脚本运行环境分析(gradle的语义模型)
- linux部署mongodb及基本操作
- C#避免过长的IF和Switch分支的方法
- STL在迭代的过程,删除指定的元素
- HDU 1882 Strange Billboard(状态压缩+转置优化)
- C++ Primer 有感(标准库map类型)
- python计算斐波那契数列
- 前端代理----whistle
- Day 1 For Knowledge Management
- 小妖精的完美游戏教室——人工智能,A*算法,引言
- Requests对HTTPS请求验证SSL证书
- OOP 面向对象的理解
- 开发板测试-Wi-Fi
- JavaScript原生对象及扩展