你的位置:首页 > 网页设计

[网页设计]关于box


写在前面

文中错误或不足之处欢迎指正批评,共同交流!

在项目中写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;}