CSS 汇总

Posted 2020-07-13 Hello World

1:   inline-block 元素

　　IE6 7下只有 inline 的元素有 inline-block, 比如 span元素，如果要使其它元素有 inline-block，比如 div 有 inlne-block，只要设置它为 inline, 再给它一个 zoom: 1 使 它有 layout。

2:　margin-top: 10%

　　指的是包含它的 containing block 的 宽度的 百分比，其它属性也是这样 margin-bottom padding-top padding-bottom (参考 http://www.w3.org/TR/CSS2/box.html#margin-properties)

3:　垂直居中的代码

　　1)　display table 属性 IE8 和 IE8 以上支持，所以可以这么写。

<div style=‘height: 200px;display: table-cell; vertical-align: middle;‘>
        Test
</div>

 

　　2)　对于垂直居中 如果用百分比来实现，position: relative; top: -50%; 对于 IE8 IE9 Chrome FF, 是不起作用的，必须显示的设置containing block 的高度，而恰恰 IE6 和IE7 却不需要，这是一个BUG。(https://bugzilla.mozilla.org/show_bug.cgi?id=260348)

// 对于IE6 IE7 垂直居中
<div style=‘position: relative‘>
    <div style=‘position: absolute; top: 50%;‘>
        <div style=‘position: relative; top: -50%;‘>Test</div>
    </div>
 </div>

// Chrome IE8 IE9 FF
<div style=‘height: 200px;display: table-cell; vertical-align: middle;‘>
        Test
</div>

// 都支持 浏览器
<div style=‘height: 200px; width: 100px;>
        <span style=‘display: inline-block; vertical-align: middle;‘>Hello world!</span>
        <span style=‘display: inline-block; vertical-align: middle;width: 1px; height: 100%;‘></span>
</div>

 

　　3) Wap 手机端的居中, 虽然可以用 display: table-cell; 但是我更喜欢用 translateX, translateY 来操作

/* 上下左右都居中 */
.center{
  left: 50%;
  top: 50%;
  position: absolute;
  
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

/* 水平居中 */
.center-horizontal{
  left: 50%;
  position: absolute;
  
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%);
}

/* 垂直居中 */
.center-vertical{
  top: 50%;
  position: absolute;
  
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
}