字体

行高

line-height：30px

与字体本身无关，设置文本所在行的高度，呈现垂直居中效果

 

文本之间的间隔

letter-spacing:20px

字母与字母之间的间距对中文有效

 

word-spacing：20px

设置单词之间的间距对中文无效

 

文本

对齐方式

文本对齐方式

text-align

 

left：左对齐

right：右对齐

cengter：居中

juetify：两端对齐

只对块级元素和行内块级元素的文本内容有效，对内联元素的文本无效

 

垂直对齐方式

vertical-align

值

Baseline：将支持va lign特性的对象的内容与基线对齐

Sub：垂直文本下标对齐

Super：垂直文本的上标对齐

Top:将支持valign特性的对象的内容与对象顶端对齐

text-top:将支持valign特性的对象的文本与对象顶端对齐

middle:将支持valign特性的对象的内容与对象中部对齐

bottom:将支持valign特性的对象的文本与对象底端对齐

tent-bottom:将支持valign特性的对象的文本与对象顶端对齐

!!只对内联元素或者表格的单元格有效

 

文本换行

默认自动换行

word-space:nowrap

强制文本在一行之中显示直到遇到br或者文本结束

 

 

背景

background-color:设置对象的背景颜色

background-image:设置背景图片

background-image：url（图片路径）

url:指定图片的地址

background-repeat:设置图片在页面中如何铺排

值

repeat:背景图片在纵向和横向上平铺

no-repeat:不平铺

repeat-x:在纵横向平铺

repeat-y:在纵向平铺

background-position:设置图片在可视窗口的位置

background-position:top center

必须设置垂直方向+水平方向

 

全景背景

 

background-image: url(“imgs/bg.jpg”);

/*

改变背景图片如何铺排

no-repeat–表示不平铺

*/

background-repeat: no-repeat;

/*background-position: 500px 300px ;*/

/*背景图片大小

cover–根据当前可视窗口调整图片大小

*/

background-size: cover;

 

雪碧图

将多张图片整合成一张图片

提高加载速度

解决重新加载图片的问题

.buy{

width: 93px;

height: 29px;

background-image: url(“imgs/btn.png”);

display: inline-block;

background-repeat: no-repeat;

}

.buy:hover{

background-position: -93px 0;

}

.buy:active{

background-position:-186px 0 ;

}