css之小技巧

css之小技巧

1.margin的计算规则

margin百分比都是相对于容器的宽度计算的，
例如：img{margin:10%} div{width:600px;height:200px;}/*父元素*/
图片位于上60px，左60px

2.绝对定位元素的百分比margin

例如：img{margin:10%；position:absolute}
 图片位于上102.4px，距离祖先元素的距离

3.宽度2：1自适应矩形

<div class="box">
    <div></div>
</div>
.box{background: olive;overflow: hidden;}
.box div{margin:50%;}

4.一侧定宽的自适应布局

例如图片（width,float）+文字(margin-left:200px) 

5.vertical-align:middle只有在父元素为table-cell或设置line-height时生效

6.inline-block元素之间产生的间距可以使用font-size：0解决
现代浏览器的最新版都支持inline-block，ie6、7不支持inline-block，但ie6、7可以通过 display：inline；zoom：1；来模拟。

7.去除滚动条 html{overflow:hidden}

8.当没有指定border-color的时候，默认使用color作为边框色。

1. select option direction: lfrl,ltr 文字位于左还是右

10.文字两端对齐 text-align：justify；