1、左右布局

这就要说到一个属性float，使用float: left;就可以让浮动元素 会脱离正常的文档布局流，并吸附到其父容器的左边。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间。但是，子类使用float来使元素并排，那么父类就需要使用clearfix来防止子元素下方的标签浮动上来贴和。

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

这样所有元素就会紧贴左边浮动，如果想要左右浮动，就可以把最右边的元素设置为float: right;这样就可以实现左右布局。

2、左中右布局

左中右布局，父元素有三个子元素，首先先把三个子元素浮动并排起来如左右布局一样，然后给后两个元素都设置一个margin左边距，父元素设置水平居中;就可以实现左中右布局

<ol>
    <li id="portfolio1">所有</li>
    <li id="portfolio2">框架</li>
    <li id="portfolio3">原生 JS&CSS</li>
</ol>
li{
    float: left;
    margin-left: 40px;
}
ol {
    margin: 0 auto;
    display: inline-block;
    vertical-align: top;
}

3、水平居中

  • 对于行内元素(inline)：text-align: center;
  • 对于块级元素(block)：设置宽度且 marigin-left 和 margin-right 是设成 auto
  • 对于多个块级元素：对父元素设置 text-align: center;，对子元素设置 display: inline-block;；或者使用 flex 布局

4、垂直居中

  • 对于行内元素(inline)设置上下 pandding 相等；或者设置 line-height 和 height 相等
  • 对于块级元素(block)，父元素需使用相对定位：子元素使用绝对布局 top: 50%;，再用负的 margin-top 把子元素往上拉一半的高度

5、其他小技巧

  • box-shadow可以给块设置阴影，看起来更立体，谷歌搜索css shadow generator可以自己调整样式。
  • transition: all 0.3s;动画属性，可以给所有变化加入过渡动画和过渡时间。
  • cursor: pointer;鼠标悬停时I型可以变成手指点击形状
  • border: 1px solid red; border边框可以用来调试标签的所占位置。
  • 当设置display: inline-block; 需要加上vertical-align: top; 来去除底层多出的空间。
  • background-image: url(../img/girl.jpg); 设置背景图片background-position: center center;可以使背景图片垂直水平居中， background-size: cover;使背景图片可以按比例缩放。
  • 谷歌搜索css linear-gradient generator可以设置一个元素的渐变色，来使一个元素包含多种颜色。