css随记02布局

布局

二栏布局

• 利用absolute, margin

.container {
  position: relative;
}
nav {
  position: absolute;
  left: 0px;
  width: 200px;
}
section {
  /* position is static by default */
  margin-left: 200px;
}

• 利用float, margin

nav {
  float: left;
  width: 200px;
}
section {
  margin-left: 200px;
}

• 利用inline-block,注意它可能会存在空格, 原因与解决方法
• 设置百分百和vertical-align: top;,必要的时候添加box-sizing: border-box;

nav {
  display: inline-block;
  vertical-align: top;
  width: 25%;
}
.column {
  display: inline-block;
  vertical-align: top;
  width: 75%;
}

• 自适应时二栏布局变一栏布局

@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width: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 {
  width: 200px;
}
.flex-column {
  -webkit-flex: 1;
          flex: 1;
}