HTML+CSS入门 关于基线、底线、顶线和中线你该知道的
沉沙 2018-08-07 来源 : 阅读 11240 评论 0

摘要:本篇教程介绍了HTML+CSS入门 关于基线、底线、顶线和中线你该知道的,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。

本篇教程介绍了HTML+CSS入门 关于基线、底线、顶线和中线你该知道的,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。

<

基线、底线、顶线、中线、vertical-align
顶线:中文汉字的的上端沿;
中线:横过英文字母x的中间的线;
基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿;
底线:中文汉字的下端沿;
内容区:指底线和顶线包裹的区域(行内元素display:inline可以通过background-color属性显示出来),实际中不一定看得到,但确实存在。内容区的大小依据font-size的值和字数进行变化。
行高(line-height):包括内容区与以内容区为基础对称拓展的空白区域,我们称之为行高。一般情况下,也可以认为是相邻文本行基线间的距离。
行距:指相邻文本行间上一个文本行底线和下一文本行顶线之间的距离。当然,我更愿意认为是(上文本行行高-内容区高度)/2+(下文本行行高-内容区高度)/2。
行内框:是一个浏览器渲染模型中的一个概念,无法显示出来,但是它又确实存在,它的高度就是行高指定的高度。
行框(line box):同行内框类似的概念,行框是指本行的一个虚拟的矩形框,也是浏览器渲染模式中的一个概念。行框高度等于本行内所有元素中行内框最大的值(以行高值最大的行内框为基准,其他行内框采用自己的对齐方式向基准对齐,最终计算行框的高度)。
 
vertical-align
此处需要特别注意的是:垂直对齐属性只对文本有效(是指包含了#Text节点的元素节点才能正确地处理vertical-align属性)。同时,该属性不能继承。
只有元素属于inline或是inline-block ,vertical-align属性才会起作用。
基线对齐(vertical-align : baseline)使元素的基线同基准元素(取行高最高的作为基准)的基线对齐
顶端对齐(vertical-align : top)是将元素的行内框的顶端与行框的顶端对齐
底端对齐(vertical-align : bottom)与顶端对齐(vertical-align : top)相反
中间对齐(vertical-align : middle)通常使用在图片上,将图片的垂直方向的中线与文本行的中线(文字元素的行内框中线)对齐。
文本顶端对齐(vertical-align : text-top)是将元素行内框的顶端同行框的顶线对齐
文本底端对齐(vertical-align : text-bottom)是将元素行内框的底端同行框的底线对齐
上标(vertical-align:super)使元素的基线相对于基准元素的基线升高;
下标(vertical-align:sub)使元素的基线降低,移动的幅度CSS规范中没有规定,由浏览器来决定。
长度值和百分比值和上下标类似,可使元素的基线相对于基准元素的基线升高(正值)或者降低(负值)。
CSS 关键字 unset 是 关键字 initial 和 inherit的组合。 如果有继承父级样式,则将该属性重新设置为继承的值,如果没有继承父级样式,则将该属性重新设置为初始值。换句话说这个unset关键字会优先用inherit的样式,其次会应该用initial的样式。    

本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 22 不喜欢 | 6
看完这篇文章有何感觉?已经有28人表态,79%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程