CSS背景以及行高那些事

1、行高那些事（line-height）

       --利用最多的地方就是：可以让单行文本在盒子中垂直居中对齐

• 单行文本垂直居中 ----文字高度=盒子高度
• 行高=上距离+内容距离+下距离   
• 上距离与下距离总是相等的，因此文字看上去垂直居中

  　　　行高与高度关系：如果行高=高度，文字会垂直居中

　　　　　　　　　　　 若行高大于高度，文字会偏下

　　　　　　　　　　　  若行高小于高度，文字会偏上

 

 

 

 

2、CSS背景（background）

　　2.1  背景颜色   ----语法：

　　　　　　　　　　　　　background-color:颜色值；    默认值为 transparent  透明

　　2.2   背景图片  -----语法： 

　　　　　　　　　　　　　background-image : none  |  url (url)       

　　　　　　注意：none   无背景图（默认的）      使用绝对或相对地址指定背景图像

　　2.3  背景平铺    ----语法：

　　　　　　　　　　　　background-repeat : repeat  |  no-repeat  |  repeat-x  |  repect-y 

 

 

　　2.4  背景位置 （position）重点

　　　　　　语法：background-position : length  || length

　　　　　　　　　background-position : position  || positon 

　　　　注意：length     百分数  |  由浮点数字与单位标识符组成的长度值

　　　　　　　position    top  center  bottom  left   center   right  方位名词

 

             注意2：必须先指定background-image属性

　　　　　　　position 后面属性是x坐标与y坐标   可以使用方位名词或者精确单位

　　　　　　　若指定一个方位名词，另一个值默认居中，为50%

　　　　　　　若只指定一个数值，那该数值用于x坐标，另一个默认是y坐标，默认居中

　　　　若指定2个值，两个值都是方位名字，则2个值前后顺序无关，比如left ,top ,与top.left 效果一样

　　　　　　　若指定2个值，精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

　　

 

 

 

　　2.5  背景附着-----解释背景是浮点的还是固定的

　　　　语法：

　　　　　background -attachment: scroll  |  fixed 

　　　　　　注意：scroll   背景图像随着对象内容滚动     

　　　　　　　　　　fixed : 背景图像固定

 

 

 

　　2.6 背景透明  （css3）

　　　　　语法：

　　　　　　　background : rgba(0,0,0,0.3);

   　　　注意：最后一个参数是alpha 透明度  取值范围是 0-1之间

　　　　　　   习惯把0.3的0省略掉  

　　　　　　   背景半透明是指盒子背景半透明  盒子里边内容不受影响

　　　　　　　因为css3，所以低于ie9的版本浏览器是不支持的