行内元素视觉格式化_html/css_WEB-ITnose

php中文网

发布时间：2016-06-24 11:26:23

1161人浏览过

来源于php中文网

原创

目录 [1]基本术语 [2]构造行框 [3]非替换元素 [4]替换元素

前面的话

　　行内元素没有块级元素那么简单和直接，块级元素只是生成框，通常不允许其他内容与这些框并存。而控制行内元素视觉格式化的主要是font-size、line-height、vertical-align

老式古典悬挂时钟矢量素材

老式古典悬挂时钟矢量素材适用于室内装饰设计、复古风格品牌标识、历史主题展览的视觉元素、古典风格网站和移动应用界面、印刷品如书籍封面、杂志和宣传册、包装设计特别是奢侈品或高端产品的包装、时尚和服装行业的图案设计、教育和文化机构的宣传材料、古董或收藏品等相关设计的AI格式素材。

下载

基本术语

　　在了解行内元素视觉格式化之前要先了解一些涉及到的基本术语

匿名文本

　　匿名文本(anonymous text)是指所有未包含在行内元素中的字符串

立即学习“前端免费学习笔记（深入）”；

em框

　　em框在字体中定义，也称为字符框(character box)。实际的字形可能比其em框更高或更矮。在CSS中，font-size的值确定了各个em框的高度

内容区

　　在非替换元素中，内容区可能在两种。内容区可以是元素中各字符的em框串在一起构成的框，也可以是由元素中字符字形描述的框；而在替换元素中，内容区就是元素的固有高度再加上可能有的外边距、边框或内边距。内容区类似于一个块级元素的内容框

行间距

　　行间距(leading)是font-size和line-height之差。这个差实际上要分为两半，分别应用到内容区的顶部和底部

　　[注意]行间距只应用于非替换元素

行内框

　　行内框通过向内容区增加行间距来描述。对于非替换元素，元素行内框的高度等于line-height的高度；对于替换元素，元素行内框的高度则恰好等于内容区的高度

行框

　　这是包含该行中出现的行内框的最高点和最低点的最小框。换句话说，行框的上边界要位于最高行内框的上边界；而行框的底边要放在最低行内框的下边界

构造行框

　　1、替换元素：得到各元素的height、margin-top、margin-bottom、padding-top、padding-bottom、border-top-width、border-bottom-width值，把它们加在一起；非替换元素：得到各行内非替换元素及不属于后代行内元素的所有文本的font-size值和line-height值，再将line-height减去font-size，得到行的行间距，这个行间距除以2，将其一半分别应用到em框的顶部和底部

　　2、对于各内容区，确定它在整行基线的上方和下方分别超出多少。替换元素：将其底边放在整行的基线上；非替换元素：确定各元素及匿名文本各部分的基线的位置，并知道该行本身基线的位置，然后将其对齐

　　3、对于指定了vertical-align值的元素，确定其垂直偏移量。由此可知，该元素的行内框要向上或向下移动多远，并改变元素在基线上方或下方超出的距离

　　4、既然已经知道了所有行内框会放在哪里，再来计算最后的行框高度。为此，只需将基线与最高行内顶端之间的距离加上基线与最低行内框底端之间的距离

行内非替换元素

内容区

　　对于行内非替换元素或匿名文本某一部分，font-size值确定了内容区的高度。如果一个行内元素的font-size为15px，则内容区的高度为15px

行内框

　　内容区加上行间距等于行内框。如果一个行内非替换元素的font-size为15px，line-height为21px，则相差6px。用户代理将这6像素一分为二，将其一半分别应用到内容区的顶部和底部，这就得到了行内框

　　当line-height小于font-size时，行内框实际上小于内容区

行框

　　行框定义为行中最高行内框的顶端到最低行内框底端之间的距离，而且各行框的顶端挨着上一行行框的底端

框属性

　　内边距、外边距和边框不影响行框的高度，即不影响行高

　　行内元素的边框边界由font-size而不是line-height控制

　　外边距不会应用到行内非替换元素的顶端和底端

　　margin-left、padding-left、border-left应用到元素的开始处；而margin-right、padding-right、border-right应用到元素的结尾处

div{    width: 200px;    border: 1px solid red;}    span{    border: 1px solid black;    background-color: yellow;    padding: 6px;        margin: 6px;    font-size: 30px;    line-height: 50px;}

测试文字测试文字测试文字

行内替换元素

框属性

　　行内替换元素有固有的高度和宽度，替换元素的整体包括内容、外边距、内边距和边框来定义元素的行内框

　　替换元素可以增加行框的高度，但不影响line-height值

div{    width: 300px;    border: 1px solid red;}    span{    border: 1px solid black;    background-color: yellow;    font-size: 30px;    line-height: 50px;}img{    height: 26px;    padding: 2px;    margin: 2px;}