H5+CSS基础总结（1）

一、标签复合写法总结

1.字体

众所周知，font包括四个属性style、weight、size、line-height、family。为了减少代码量，经常采用复合写法，其中style\weight属性可以不用写明，直接采用默认属性值，但是size/family必须写明。写法可以如下（顺序可以乱）：

2.背景图片

背景图片有四个属性，url、repeat、attachment、position。写法如下，顺序可乱：

position不写明水平垂直距离，默认居中

3.边框

三个属性分别是，style、color、width。其中style必须标明，不然不会显示边框。写法如下：

4.阴影

（1）盒子阴影 box-shadow

（2）文字阴影

其余类似padding、border-top就不赘述了。

二、小技巧总结

1.如何让单行文字在盒子中垂直居中

让文字line-height=盒子高度就行（行高包括上边距文字高及下边距）

2. 盒子水平居中，置于页面中央

（1）块级盒子，左右外边距为auto即可

 

（2）行内、行内块元素水平居中 父级元素添加text-align

3.子元素中图片自适应宽度

4.在盒子设置高宽后，设置padding/border的对应水平垂直边距或边框会导致盒子被撑大。