zoukankan      html  css  js  c++  java
  • CSS 知识汇总

    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;  100px;>
            <span style='display: inline-block; vertical-align: middle;'>Hello world!</span>
            <span style='display: inline-block; vertical-align: middle; 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%);
    }
  • 相关阅读:
    生产者消费者模型
    varchar2存储汉字,英文字符,数字在oracle中的多少
    正则表达式以及邮箱
    爬虫
    创建git本地仓库和GitHub远程仓库并配置连接的从无到有
    CSSHTML实现高度宽度自适应
    实现一个元素在当前窗口垂直水平居中的几种方法
    angular4 rxjs 异步处理多个http请求数据
    angular 4 父子组件异步交互
    同步异步单线程多线程初级理解
  • 原文地址:https://www.cnblogs.com/zhengming2016/p/5532209.html
Copyright © 2011-2022 走看看