一、标签复合写法总结

1.字体

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

H5+CSS基础总结(1)

2.背景图片

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

H5+CSS基础总结(1)

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

3.边框

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

H5+CSS基础总结(1)

4.阴影

(1)盒子阴影 box-shadow

H5+CSS基础总结(1)

(2)文字阴影

H5+CSS基础总结(1)

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

二、小技巧总结

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

H5+CSS基础总结(1)

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

H5+CSS基础总结(1)

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

(1)块级盒子,左右外边距为auto即可

 

H5+CSS基础总结(1)

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

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

H5+CSS基础总结(1)

H5+CSS基础总结(1)

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

H5+CSS基础总结(1)

H5+CSS基础总结(1)

H5+CSS基础总结(1)

 

 

相关文章: