HTMLCSS2.1中字体文本的基础属性及如何让img垂直水平居中

字体属性 1.font-size 浏览器状态下默认字体大小为16px，最小为12px （当字体大小为负值时，浏览器显示大小为16；当字体大小为正值但小于12时，浏览器大小为12；当字体大小为0，浏览器显示为没有字） font-size：2em（浏览器实际显示大小为32px） 2.font-style font-style:oblique或italic（字体倾斜） 3.font-weight font-weight：bold（字体加粗） 4.font-family 5.line-height 行高 行高：上下文本基线之间的距离 行距：一行的底线到下一行的顶线的距离 内容区：底线和顶线包裹区域，内容区的高度与字体大小有关，这个内容区会生成一个行内框。 如果不存在其他元素，这个行内框就完全等于内容区；如果设置行高，就会影响行内框的高度，但不会影响内容区。 行内框：与行高有关 如果不存在行高，默认情况下行内框等于内容区；如果设置行高，行高减去字体大小除以2分别加在内容区的上下，即为行内框 行框：元素行内框最大值 在前端开发中，如果要处理大量的文本，建议吧行高设置的比字体大小大 行高的继承 1.百分数 行高大小相对于字体带下大小（子元素继承父元素的时候是继承父元素百分数后的大小） 2.行高因子 子元素继承时直接拉下来 body{ line-height：1； } p,span{ line-height:1.5; } 文本 1.color：设置字体颜色 按住shift键点击，会改变颜色的各种格式 2.text-align:设置文本位置 只管行内元素和内联元素，不管浮动元素 3.text-indent：首行缩进2em 4.text-destination：设置下划线 5.letter-spacing：设置字母与字母间距 6.Word-spacing：单词与单词间距 7.white-spacing：nowraps 不换行 使图片垂直水平居中 1.在容器中设置一个撑满框的元素： #warp:after{ content:""; display:inline-block; height:100%; vertical-align:middle; } 2.使图片元素相对于这个行框对齐 #wrap img{ vertical-align:middle; } vertical-align 1.top：元素及其后代的顶端与整行的顶端对齐 2.bottom：元素及其后代与整行的底端对齐 3.text-top：元素的顶端与父元素字体顶端对齐 4.text-bottom：元素的低端与父元素字体低端相对齐 5.baseline： 6.sub 7.super donghe_z 原创文章 6获赞 1访问量 109 关注 私信 展开阅读全文
作者：donghe_z

属性 居中 字体 img CSS HTML