1、行高(line height)
文字占有的实际高度
行高=上间距+字体大小+下间距
默认情况,上间距=下间距=(行高-字体大小)/2
行间距=下间距+上间距=行高-字体大小
line-height属性
可选值:
(1)直接放一个大小单位 xxpx xxem xxrem
(2)直接放倍数 例如:1 2 3
是当前字体大小的倍数
(3)放百分比
是当前字体大小的百分比
2、单行文本在父元素中垂直居中
3、font中也可以指定行高
font: bold italic 25px/3 serif;
1、box-shoadow: h-shadow v-shadow blur color;
参数:
第一个参数:阴影的水平位移距离 (必填) 正值向右,负值向左
第一个参数:阴影的垂直位移距离 (必填) 正值向下,负值向上
第三个参数:阴影的模糊半径
第四个参数:阴影的颜色 (默认是黑色)
9: vertical-align 设置元素垂直对齐的方式
可选值:
baseline 基线对齐 沿着字母x最下方对齐
top bottom middle
功能:
1、设置元素垂直对齐的方式 ,这种功能,只针对图片,文字,表格,不针对块元素
2、解决图片三像素的问题(面试题)
方案一:
vertical-align样式,设置一个非baseline的样式值
方案二:
设置父元素的font-size为0
方案三:
将图片转成块元素
方案四:
将元素脱离文档流
文档流(normal flow)
网页是一个多层的结构,设置样式,也是一层一层的设置,最终我们看到的最上面的一层
文档流是网页最底层
我们创建的元素默认情况下,都在文档流中
元素分为两种状态:在文档流中,脱离文档流
元素在文档流中的特点
块元素
1:会独占一行
2:块元素的宽度默认是父元素的100%
3:块元素的高度默认是被内容撑开的
内联元素(行内元素)
1:不会独占一行
2:宽度高度默认都是被内容撑开的,不能自己定义宽高
行内块元素
元素脱离文档流后的特点
元素脱离文档流之后,就不再区分块元素,行内元素,行内块元素,
也就是块元素不会独占一行,行内也可以设置宽高,三像素问题也没有
元素怎么脱离文档流
浮动 绝对定位 flex 等等