响应式Web设计经常需要我们通过百分比设置组件宽度。如果我们不考虑边框,那么很容易就可以实现,但如果你给每一列以及总宽度都采用百分比设置,那这个时候固定的边框大小就会出来捣乱。下面我们将看到一组方法去解决这个问题,你会学到如何创建一个流式布局,而不用担心额外的边框以及内边距。
假设我们需要一个五列的布局。我们要考虑的第一件事就是外边距(margins).假设所有的列都需要4%的外边距,我们需要为所有的外边距保留20%(4%*5(5列)=20%)的占宽比;然后我们从总宽比(100%)里面减去20%,得到的就是所有列实际占的总宽比。所以每一列的占宽比即16%(80% /5)。下面是一个详细的图表:
 

相应的CSS代码如下:
.column{ 
   width:16%; 
   margin: 2% 2%;
   float: left;
   background: #03a8d2;  
对应的界面是:

当我们给每一列添加一个2px的边框时,问题出现了,如下图,最后一列被挤到下面去了。

解决方案当然应该是:在之前的计算中我们应该考虑到边框(border),但是我们怎么去做呢?结论是,我们不能用百分比去设置border边框的大小,只能用一个固定的值。因为如果所有的都使用百分比设置,那么我们留给border的空间也会是一个变化的值,也就是说当页面宽度变化时,border的值也会跟着变化,这样是有问题的。这使得我们没有办法去决定我们边框的宽度!
 
解决方案
设置CSS的box-sizing属性值为“border-box”,这样就会把borders和padding全都包含在定义的宽高里面。这就意味着一个带有2px边框的200px的div仍然宽度是200px!!是不是很神奇呢?
.column{ 
    width: 16%; 
    margin: 2% 2%; 
    float: left; 
    background:#03a8d2; 
    border: 2px solid black; 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
 

即使我们加上padding,也同样可以正常显示:

浏览器兼容性问题:
兼容性和上面的一样,除了IE需要8以上的版本,其他浏览器均可兼容,同时这个方法不会出现上面提到的阴影问题。
 

css3属性box-sizing:border-box 用法解析的更多相关文章

  1. css3盒模型学习--利用box自适应布局

    box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典   的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box-flex属性还没 ...

  2. CSS3弹性盒模型 display:box

    刚开始做网页时就有一个困惑,为什么display:block只能垂直排列,如果要水平排列就要使用float:left等方式.这种方法最难受的当然是当子元素的数量改变时,需要去修改子元素的宽度使重新适应 ...

  3. CSS3弹性盒子(Flex Box)

    CSS3弹性盒子(Flex Box) 一.容器的属性:flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content 1 ...

  4. css3属性中background-clip与background-origin的用法释疑

    困惑在哪里? background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性,它们有相同的可选值,即border.padding.content 三种 ...

  5. css3 属性——calc()

    其实在之前学习CSS3的时候,我并没有注意到有calc()这个属性,后来在看一个大牛的代码的时候看到了这个,然后就引发了后来的一系列的查找.学习,以及这篇博客的诞生.好了,废话不多说了,来干正事. 一 ...

  6. 如何处理CSS3属性前缀(转载)总结

    今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...

  7. 如何处理CSS3属性前缀

    今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...

  8. [css]需警惕CSS3属性的书写顺序

    转载张鑫旭:http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7% ...

  9. 详解CSS3属性前缀(转)

    原文地址 CSS3的属性为什么要带前缀 使用过CSS3属性的同学都知道,CSS3属性都需要带各浏览器的前缀,甚至到现在,依然还有很多属性需要带前缀.这是为什么呢? 我的理解是,浏览器厂商以前就一直在实 ...

  10. CSS3 属性组参考资料

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

随机推荐

  1. 在github上参与开源项目贡献代码

    1 登录github, 点击自己感兴趣的repository的fork按钮,这样自己的github主页会有一个拷贝. 2 在自己本地修改同时保持和原来的repository同步: git remote ...

  2. 在HTML中用循环语句

    <%for(){%  > <tr> <td></td> <td></td> </tr> <%}%> 注意 ...

  3. 移动端H5拍照代码实现及外网部署

    最近的工作中,遇到了一个需求:对于无APP登陆权限的人员,提供拍照上传功能,以便生成更完善的出工记录.经研究讨论,决定实现的机制为:由合法的人员登陆APP认领相关工作任务,并生成当天当工作的唯一二维码 ...

  4. setTimeout中调用this

    项目案例: 左右切换tab容器的动作,封装到一个对象中: var slidingComp = { startX : 0 , moveX : 0 , ...... start : function(e) ...

  5. C语言里有没有像C++里面的sort函数一样的函数?有!

    C 库函数 - qsort() 描述 C 库函数 void qsort(void *base, size_t nitems, size_t size, int (*compar)(const void ...

  6. 剑指Offer 9. 变态跳台阶 (递归)

    题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级……它也可以跳上n级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 题目地址 https://www.nowcoder.com/practice/ ...

  7. vim分屏操作

    启动分屏 1.使用大写O参数进行垂直分屏 $ vim -On file1 file2 ... 2.使用小写o参数进行水平分屏 $ vim -on file1 file2 ... 注: n是数字,表示分 ...

  8. APP加急审核

    提交加急审核需要理由,一般涉及到银行信息,或者崩溃打不开这种的比较容易通过.反正苹果很苛刻,一般不给处理.如果处理第二天就可以下载最新了,省去了漫漫的等待.一个成功加急审核的借口-- We found ...

  9. linux 怎么上传下载-- 文件

    https://www.cnblogs.com/lynn-li/p/6078595.html yum install lrzsz rz:从本地上传文件至服务器 sz filename:从服务器下载文件 ...

  10. 记录 spf13-vim 遇到的问题

    一.spf13-vim 常用快捷键: https://blog.csdn.net/BjarneCpp/article/details/80608706 https://www.cnblogs.com/ ...