写在前面

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

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

关于box-sizing属性的更多相关文章

  1. css display:box 新属性

    一.display:box; 在元素上设置该属性,可使其子代排列在同一水平上,类似display:inline-block;. 二.可在其子代设置如下属性 前提:使用如下属性,必须在父代设置displ ...

  2. CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  3. Box Model,边距折叠,内联和块标签,CSSReset

    一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与 ...

  4. CSS3与页面布局学习笔记(二)——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  5. 移动端布局,C3新增属性

    <html5拖拽> 1.给元素设置 draggable="true" 属性,这个元素就可以被拖拽了 <拖拽元素事件> 2.ondragstart 拖拽前触发 ...

  6. CSS Display属性与盒模型

    由于HTML流式文档的特性,页面布局往往是新手最为头疼的问题之中的一个. 每一个HTML元素都会渲染为一个Box,可分为inline Box和block Box. 依据display属性的不同.Box ...

  7. CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins

    前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...

  8. 重新认识Box Model、IFC、BFC和Collapsing margins

    尊重原创,转载自: http://www.cnblogs.com/fsjohnhuang/p/5259121.html 肥子John^_^ 前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了I ...

  9. CSS属性一览

    CSS 属性 CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打 ...

  10. css 参考属性大全

    动画属性 属性 描述 CSS @keyframes 定义一个动画,@keyframes定义的动画名称用来被animation-name所使用. 3 animation 复合属性.检索或设置对象所应用的 ...

随机推荐

  1. nmap 扫描工具

    Nmap 7.30 ( https://nmap.org ) 使用方法: nmap [扫描类型(s)] [选项] {目标说明}目标说明:通过主机名称, IP 地址, 网段, 等等.协议: scanme ...

  2. 51nod 1011 最大公约数GCD

    输入2个正整数A,B,求A与B的最大公约数. 收起   输入 2个数A,B,中间用空格隔开.(1<= A,B <= 10^9) 输出 输出A与B的最大公约数. 输入样例 30 105 输出 ...

  3. 关于verilog中小数直接赋值

    verilog中小数直接赋值的话小数会近似成1,如0.1,0.6,0.9赋值的话就会变成1,5.1,5.9也都会变成6.并且quartus默认小数是64位.

  4. CLR值类型和引用类型

    知识点:引用类型.值类型.装箱.拆箱 CLR支持两种类型:引用类型和值类型.引用类型在堆上分配内存,值类型在线程栈上分配内存.值类型与引用类型如下所示: 值类型对象有两种表示形式:未装箱和已装箱.将一 ...

  5. rmmod: can't change directory to '/lib/modules': No such file or directory

    [root@iTOP-4412]# mount /dev/sda1 /mnt/udisk/ [root@iTOP-4412]# insmod /mnt/udisk/linux/hello.ko  [ ...

  6. android中HttpClient的应用(POST方法)

    首先在http://hc.apache.org/downloads.cgi下载HttpClient包 直接看代码 import android.os.Handler; import android.o ...

  7. 蓝桥杯 算法训练 ALGO-50 数组查找及替换

    算法训练 数组查找及替换   时间限制:1.0s   内存限制:512.0MB 问题描述 给定某整数数组和某一整数b.要求删除数组中可以被b整除的所有元素,同时将该数组各元素按从小到大排序.如果数组元 ...

  8. (转)IE=EmulateIE7 标签的作用

    本文转载自:http://www.cnblogs.com/0000/archive/2009/11/01/1593851.html 对于 Web 开发人员来说,文本兼容性是一个要考虑的重要问题.Win ...

  9. java代码水仙花

    总结:分离出百位,十位,各位,我总是模模糊糊的,总是分不清取膜与除号的作用区别: “%”的意思是“取膜”,表示取得的是余数 “/”的意思是除,得到的是除数. package com.a; //求水仙花 ...

  10. Android BindService中遇到的一个小问题

    今天在使用BindService的时候遇到个小问题,我希望通过Bindservice获取到这个服务,然后执行服务内的某个自定义方法,如下: if(bindService==null){ Intent ...