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之后