CSS学习笔记06

24、行高

行高是指文字占有的实际高度:默认行高1.3333px

line-height:20,实际大小为20X1.333px

行高会在字体框的上下平均分配height=line-height就是垂直居中

注：行间距=行高–字体大小

25、字体的简写

font-weight:bold(粗体) normal(正常) 100-900(九个等级)
font-style:italic(斜体) norma(正常)l

简写：

font : bold(粗体)    italic(斜体)       50px/2 （字体大小/行高）  字体族  
注：字体大小/行高和字体族必须写在最后面

26、文本的方式对齐

文本水平对齐方式
text-align：
text-align：left左侧对齐(默认)
text-align：center居中对齐
text-align：right右侧对齐
text-align：justify两端对齐

文本垂直对齐方式
vertical-align：
vertical-align：baseline基线对齐(默认)
vertical-align：top顶部
vertical-align：bottom底部
vertical-align：middle居中
vertical-align：像素值/100px上下移动像素值

注意：图片设置对齐方式为baseline时会出现以下情况，缝隙，要设定除baseline即可

文本修饰样式
text-decoration:
text-decoration:undeerline下划线
text-decoration:none无
text-decoration:line-through删除线
text-decoration:overline上划线

text-decoration:underline red solid新语法ie8以下不支持

文本多余显示
white-space:如何处理空白区域
white-space:normal正常
white-space:nowrap不换行
white-space:pre保留空白

实现多文字省略号效果

div{
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis
}

27、背景

背景图片
background-image：url("图片路径")

背景颜色
background-color："red"
同时设定以上二者，背景颜色将作为背景图片的背景色

背景图片重复
background-repeat："repeat"默认双方向重复

background-repeat："repeat-x"沿x方向重复

background-repeat："repeat-y"沿y方向重复

background-repeat："no-repeat"不重复

背景图片位置

background-position： 可选值top、botton、right、left、center、像素值

background-position："top left"（1）
background-position："top center"（2）
background-position："top right"（3）
background-position："center left"（4）
background-position："center center"（5）
background-position："center right"（6）
background-position："botton left"（7）
background-position："botton center"（8）
background-position："bottom right"（9）
分别对应九个位置如图

背景图片范围

background-clip： 可选值border-box、padding-box、content-box

background-clip："border-box"默认边界为border

background-clip："padding-box"默认边界为padding

background-clip："content-box"默认边界为content

背景原点

background-orign： 可选值padding-box、content-box、border-box

background-orign：padding-box内边距起点
background-orign：content-box内容区起点
background-orign：border-box边框外起点

背景图片范围

background-size： 可选值像素值、cover(比例不变，将元素铺满)、contain(比例不变，完整显示)

background-size:100px 100px

background-size:cover比例不变，将元素铺满

background-size:contain比例不变，完整显示

背景图片滑动

background-attachment：背景图片跟随元素移动问题

background-attachment：scroll默认跟随元素

background-attachment：fixed不会移动

背景属性简写方式

div{
	background:url() #bfa  center center/contain border-box content-box no-repeat
}

无顺序问题，但是size要写在position之后，clip在origin之后