自适应网页设计中box-sizing 和 margin 一起使用的方法

假设有两个col2类名的元素,只使用 box-sizing: border-box; 可以实现自适应设计。
.col2 {
    width: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

如果使用margin的话就会出现横向宽度移除导致第二个元素浮动下来。
.col2:first-child {
    margin-right: 24px;
}

解决方案:'margin-right'%+'margin-left'%+'width'% 等于 50% 即可。
.col2 {
    width: 45%;
    margin: 5% 2.5%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

参考资料
http://stackoverflow.com/questions/10808413/css3-box-sizing-margin-box-why-not
http://www.w3.org/TR/CSS2/box.html

自适应网页设计CSS3 Box-sizing的使用

box-sizing主要有两种取值content-box 和 border-box。

CSS中Box model是分为两种,第一种是W3C的标准模型,另一种是IE的传统模型,他们都是对元素计算尺寸的模型,具体说就是对元素的width,height,padding,border以及元素实际尺寸的计算关系;他们的计算方法如下:

1、W3C的标准Box Model:

  /*外盒尺寸计算(元素空间尺寸)*/
  Element空间高度 = content height + padding + border + margin
  Element 空间宽度 = content width + padding + border + margin
  /*内盒尺寸计算(元素大小)*/
  Element Height = content height + padding + border (Height为内容高度)
  Element Width = content width + padding + border (Width为内容宽度)

2、IE传统下Box Model(IE6以下,不含IE6版本或“QuirksMode下IE5.5+”):

  /*外盒尺寸计算(元素空间尺寸)*/
  Element空间高度 = content Height + margin (Height包含了元素内容宽度,边框宽度,内距宽度)
  Element空间宽度 = content Width + margin (Width包含了元素内容宽度、边框宽度、内距宽度)
  /*内盒尺寸计算(元素大小)*/
  Element Height = content Height(Height包含了元素内容宽度,边框宽度,内距宽度)
  Element Width = content Width(Width包含了元素内容宽度、边框宽度、内距宽度)

box-sizing:content-box 使用的是第1种W3C的标准模型。

box-sizing:border-box 使用的是第2种IE传统模型IE5.5+,在自适应网页设计中就需要使用这种方法。

box-sizing现代浏览器都支持,但IE家族只有IE8版本以上才支持,虽然现代浏览器支持box-sizing,但有些浏览器还是需要加上自己的前缀,Mozilla需要加上-moz-,Webkit内核需要加上-webkit-,Presto内核-o-,IE8 -ms-,所以box-sizing兼容浏览器时需要加上各自的前缀:

  /*Content box*/
  Element {
     -moz-box-sizing: content-box;  /*Firefox3.5+*/
     -webkit-box-sizing: content-box; /*Safari3.2+*/
     -o-box-sizing: content-box; /*Opera9.6*/
     -ms-box-sizing: content-box; /*IE8*/
     box-sizing: content-box; /*W3C标准(IE9+,Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
  }
        
  /*Border box*/
  Element {
     -moz-box-sizing: border-box;  /*Firefox3.5+*/
     -webkit-box-sizing: border-box; /*Safari3.2+*/
     -o-box-sizing: border-box; /*Opera9.6*/
     -ms-box-sizing: border-box; /*IE8*/
     box-sizing: border-box; /*W3C标准(IE9+,Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
  }

参考资料
1.CSS3 Box-sizing
http://www.w3cplus.com/content/css3-box-sizing

div css 实现半透明效果

css

.project{ position:relative;width:288px; height:183px;}
.project .box{ position:absolute; top:0px; left:0px; display:block; width:288px; height:183px; color:#FFF; padding:10px; opacity: 0.8;filter: alpha(opacity=80);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";}

html

<div class="project">
<div class="box">
div css 实现半透明效果测试文字
</div>
</div>