背景

背景颜色

属性:background-color
值:参考颜色的表示方式

背景图片

属性:background-image
值:url();url里跟的是图片的地址。

背景平铺

属性:background-repeat
值:repeat(默认)表示平铺这个标签;no-repea表示不平铺;repeat-x表示沿x轴平铺;repeat-y表示沿y轴平铺。

背景定位

属性:background-position
值:left表示水平方向的左;right表示水平方向的右;center表示中间;top表示垂直方向的上;bottom表示垂直方向的下。
注意:

  • 当方位属性的值只写一个的时候,另外一个值默认居中。
  • 如果写2个方位值,顺序没有要求。
  • 如果写的是2个具体值的时候,第一个值代表距离左侧的距离,第二个值代表距离顶部的距离。

固定背景

属性:background-attachment
值:

  • scroll表示背景在页面的位置不固定,在页面的位置随内容改变而改变。
  • fixed表示背景在页面的位置固定,在页面的位置不会随内容改变而改变。相当于在浏览器页面内进行了定位。

附录:背景属性的连写
background:background-color background-image background-repeat background-position background-attachment;
注意:

  • background后面只写属性的值;
  • background-image的url是必写项,顺序无要求。

行高

行高:是基线与基线之间的距离
行高=文字高度+上下边距
注意:一行文字行高和父元素高度一致的时候,垂直居中显示。
行高的计算
单位除了像素以为,行高都是与文字大小乘积。
在继承的时候,不带单位时,行高等于行高乘以子元素文字大小,em和%的行高等于和行高乘以父元素文字大小相乘。行高以像素为单位,就是定义的行高值。
推荐行高使用像素为单位。行高也可以撑开盒子。不设置行高,默认是盒子的高度
行内元素父元素给了行高之后,子盒子不能使用font,要单独设置字体样式,行内元素尽量不适用font。

Last modification:March 1st, 2018 at 02:43 pm
If you think my article is useful to you, please feel free to appreciate