css3属性box-sizing:border-box 用法解析击败边框：带border的百分比布局

响应式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以上的版本，其他浏览器均可兼容，同时这个方法不会出现上面提到的阴影问题。
转载自：http://blog.sina.com.cn/s/blog_771875550101hv5f.html

css3属性box-sizing:border-box 用法解析击败边框：带border的百分比布局相关推荐

html图片与周围元素边界5px,css3如何将图像设置为元素周围的边框
css3将图像设置为元素周围的边框的方法:首先创建一个HTML示例文件:然后在body中创建一些p元素:最后通过css3中的border-image属性将图像设置为元素周围的边框即可. 本文操作环境: ...
html怎么把图片放入边框,css3如何将图像设置为元素周围的边框
在网页设计过程中,使用css3图像边框属性可以大大的提升网页整体美观效果,以及丰富页面内容.那么css3中的图像边框属性也就是border-image 属性. 推荐学习:<CSS3教程> ...
html5调盒子边框大小,CSS3 - 盒子大小(CSS3 - Box Sizing)
CSS3 - 盒子大小(CSS3 - Box Sizing) Box大小调整属性用于更改元素的高度和宽度. 从css2开始,box属性的工作方式如下所示 -width + padding + bord ...
css3属性box-sizing:border-box 用法解析
响应式Web设计经常需要我们通过百分比设置组件宽度.如果我们不考虑边框,那么很容易就可以实现,但如果你给每一列以及总宽度都采用百分比设置,那这个时候固定的边框大小就会出来捣乱.下面我们将看到一组方法去 ...
[css] 如何使用CSS3的属性设置模拟边框跟border效果一样？
[css] 如何使用CSS3的属性设置模拟边框跟border效果一样? <!DOCTYPE html> <html lang="en"> <head& ...
html5 box sizing,CSS 盒模型与box-sizing
一.盒模型一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在. MDN的描述: When laying out a docu ...
html5 css3 marquee,marquee的详细用法解析
marquee的详细用法解析更新时间:2006年08月28日 00:00:00 作者: 先看下 marquee 的html 属性 BEHAVIOR="-" BGCOLOR=& ...
html中的变圆的属性,CSS3属性之圆角效果——border-radius属性
在css3之前,要实现圆角的效果可以通过图片或者用margin属性实现(可以参考这里:http://www.hicss.net/css-practise-of-image-round-box/).实现 ...
CSS3属性border-radius参数详解
border-radius,国内翻译成圆角,你可能以为这个属性就是用来画圆角,没错,但是除此之外,它还可以做点别的事情.radius其实指的是边框所在圆的半径,这个CSS3属性不仅能够创建圆角,还可以 ...

css3属性box-sizing:border-box 用法解析击败边框：带border的百分比布局

css3属性box-sizing:border-box 用法解析击败边框：带border的百分比布局相关推荐

最新文章

热门文章

css3属性box-sizing:border-box 用法解析 击败边框：带border的百分比布局

css3属性box-sizing:border-box 用法解析 击败边框：带border的百分比布局相关推荐

最新文章

热门文章

css3属性box-sizing:border-box 用法解析击败边框：带border的百分比布局

css3属性box-sizing:border-box 用法解析击败边框：带border的百分比布局相关推荐