CSS小技巧

左右布局

左右布局

左中右布局

左中右布局

水平居中

1. 行内元素水平居中，在其父元素上写text-align: center;。
2. 宽度确定的块级元素水平居中，写上margin-left: auto; margin-right: auto;即可。
   
   

   水平居中
3. 设置margin的值实现水平居中的效果。
   
   

   设置margin水平居中

垂直居中

1. 块级元素中的文字垂直居中，设置line-height的值等于height的值。
   
   

   垂直居中
2. 设置padding的值实现居中效果。
   
   

   设置padding垂直居中
3. 用相对定位和负margin值实现居中。
   
   

   相对定位居中

box-sizing

1. content-box
   默认值，标准盒模型。width 和 height 属性只包括内容，不包括 paddding、border、margin。
2. border-box
   这种盒模型的 width、height 属性包括内容、border 和padding，不包括margin。