zoukankan      html  css  js  c++  java
  • css随记02布局

    布局

    二栏布局

    • 利用absolute, margin
    .container {
      position: relative;
    }
    nav {
      position: absolute;
      left: 0px;
       200px;
    }
    section {
      /* position is static by default */
      margin-left: 200px;
    }
    
    • 利用float, margin
    nav {
      float: left;
       200px;
    }
    section {
      margin-left: 200px;
    }
    
    • 利用inline-block,注意它可能会存在空格, 原因与解决方法
    • 设置百分百和vertical-align: top;,必要的时候添加box-sizing: border-box;
    nav {
      display: inline-block;
      vertical-align: top;
       25%;
    }
    .column {
      display: inline-block;
      vertical-align: top;
       75%;
    }
    
    • 自适应时二栏布局变一栏布局
    @media screen and (min-600px) {
      nav {
        float: left;
         25%;
      }
      section {
        margin-left: 25%;
      }
    }
    @media screen and (max-599px) {
      nav li {
        display: inline;
      }
    }
    
    • 二栏及多栏布局的一些新的属性: column , flexbox
    //三栏布局
    .three-column {
      padding: 1em;
      -moz-column-count: 3;
      -moz-column-gap: 1em;
      -webkit-column-count: 3;
      -webkit-column-gap: 1em;
      column-count: 3;
      column-gap: 1em;
    }
    //二栏布局
    .container {
      display: -webkit-flex;
      display: flex;
    }
    nav {
       200px;
    }
    .flex-column {
      -webkit-flex: 1;
              flex: 1;
    }
    
  • 相关阅读:
    查看数据库表中的数据
    exec和execsql
    CPI
    百度硬盘可以检索的字节测试
    HDU2095
    Vigenere密码
    斌神无所不能
    HDU p1017
    POJ1316
    head区的代码详解
  • 原文地址:https://www.cnblogs.com/jinkspeng/p/4887851.html
Copyright © 2011-2022 走看看