CSS布局笔记

1.左右布局

<div class="box clearfix">/*打断文档流，将块级元素横置*/
    <div class="small">l</div>
    <div class="small">r</div>  
</div>

.box{
  border:solid 1px red;
  height:30px;/*内部的block脱离文档流之后，box'空了'，高度坍缩，故须设置高度*/
  width:200px;
  padding: 5px;
}
.small{
  float: left;/*打断文档流，将块级元素横置*/
  width:50%;/*不使用border-box的话，两个block不会并排，
  因为width默认的是padding以内的本体，而border又占据了4px*/
  height:100%;
  border:solid 1px green;
  box-sizing:border-box;/*border-box使元素宽度包含padding和border*/
}

2.左中右布局

与左右布局类似

<div class="box clearfix">
    <div class="small">l</div>
    <div class="small">m</div>
    <div class="small">r</div>  
</div>

.box{
  border:solid 1px red;
  height:30px;
  width:200px;
  padding: 5px;
}
.small{
  float: left;
  width:33.3%;
  height:100%;
  border:solid 1px green;
  box-sizing:border-box;
}

3.水平居中
独立block

<div class="box"></div>

.box{
  border:solid 1px red;
  height:30px;
  max-width:200px;/*使用max-width缩放窗口时box也会自动调整*/
  margin:0 auto;/*左右margin自动调整实现居中*/
}

盒中盒

<div class="box">
  <div class="small"></div>
</div>

.box{
  border:solid 1px red;
  height:100px;
  max-width:100px;
  margin:0 auto;
  text-align:center;
}
.small{
  width:30%;
  height:100%;
  border:solid 1px green;
  display:inline-block;
  box-sizing:border-box;
}

4.垂直居中

<div class="box">
  <div class="small"></div>
</div>

.box{
  background:black;
  height:100px;
  position:relative; 
}
.small{
  width:100%;
  height:10%;
  background:white;
  position: absolute; /*position: absolute 元素的 containing block 
是由其最近的 position 为 absolute / relative / fixed 的祖先元素决定的。*/
  top: 45%;
  bottom:45%;
}

5.block的层叠

<div class="under"></div>
<div class="upper"></div>

.under{
  background:black;
  height:100px;
}
.upper{
  width:50px;
  height:100px;
  background:grey;
  margin-top:-30px;/*用负margin-top把block向上推，负margin-left可向左移*/
}