1、左右布局

/*float左右布局，左边固定宽度，右侧div自适应*/
.left {
        float: left;
        width: 300px;
        height: 300px;
        background-color: red;
      }
 .right {
        background-color: orange;
        margin-left: 310px;
        height: 300px;
      }

2、左中右布局

/*左中右布局，左右两边固定宽度，中间自适应*/
#content{
        height:300px;
        } 
.left{
        width: 200px;
        height:100%;
        float: left;
        background-color: #00a0dc;
        } 
.middle{
        height:100%;
        margin-left:200px;
        margin-right: 200px;
        background-color: red;
        } 
.right{
        height:100%;
        width: 200px;
        float: right;
        background-color: #00a0dc;
        }

3、水平居中

/*固定宽度水平居中*/
.center {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/*子元素display:inline-block,父元素设text-align:center实现水平居中*/
div{
  text-align:center;
}
div .center{
  display:inline-block;
}

4、垂直居中

/*固定尺寸垂直居中*/
#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    position: relative;
}
#child {
    width: 150px;
    height: 100px;
    background: orange;
    position: absolute;
    top: 50%;
    margin: -50px 0 0 0;
    line-height: 100px;
}

/*绝对定位和负外边距进行垂直居中*/
#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    position: relative;
}
#child {
　　width: 50%;
    height: 30%;
    background: pink;
    position: absolute;
    top: 50%;
    margin: -15% 0 0 0;
}

更多居中方式参考：https://css-tricks.com/centering-css-complete-guide/
布局参考：http://zh.learnlayout.com/

5、等其他小技巧

重置CSS样式：https://meyerweb.com/eric/tools/css/reset/

/*用伪元素前后添加内容，减少div*/
p:before{ 
    content: " -Read more… ";
    color:#f00;
}
p:after{ 
    content: " -Read more… ";
    color:#f00;
}

/*首字母变大*/
p:first-letter{
    display:block;
    float:left;
    margin:3px;
    color:#f00;
    font-size:300%;
}

h2 {text-transform：uppercase; } /* 全部大写*/
h2 {text-transform：lowercase; } /* 全部小写*/
h2 {text-transform：capitalize; } /*将每个单词的第一个字母大写。*/

/*当你设置一个元素为 box-sizing: border-box;时，此元素的内边距和边框不再会增加它的宽度。*/
.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/*选择2的倍数的子元素进行不同样式的，操作具体用法可参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child*/
.skill ol li:nth-child(2n) {
    float: right;
}