css中的线及vertical-align实例详解

行内元素格式化顺序：font-size-->em框-->内容区-->行内框-->根据基线放置行内框-->确定行框高度

相关概念： 
leading（行间距）：指填充在两行文字间的铅条，等于line-height 和 font-size之差，其中一半leading加到文字上方，另一半leading加到文字下方，只用于非替换元素。

em框：em框指示没有行间距时基线之间的距离，不指定字符间的边界，实际的字形可能比其em框更高或更矮。

font-size ：确定给定字体的em框（em box）的高度，但不能保证实际显示的字符就是这种大小。font-size属性和实际字体大小的具体对应关系由字体的设计者确定。

基线：the line upon which most letters "sit" and below which descenders extend，并不是汉字的下端沿，而是英文字母"x"的下端沿。

内容区（content area）：非替换元素即em框串在一起组成的框，间接由font-size确定；替换元素：即元素固有的高度加可能的边距和框。

行内框（inline box）：虚拟的矩形框，无法显示，大小为内容区加leading。对非替换元素，等于line-height值；对替换元素，等于内容区的高度。同一行内的若干元素可以有不同的行高和行内框高。

行框（line box）：包含该行内所有行内框的最高点和最低点的最小框，行框的高度只同本行内元素的行高有关，而和line-height无直接关系，和父元素的高度（height）也无关。行内框在行中根据其vertical-align属性值垂直对齐。

匿名文本：指所有未包含在行内元素中的字符串。

line-height：指文本行基线之间的距离，确定了各个元素框增加或减少多少，默认为元素本身字体大小的1.2倍。

line-height值从父元素继承时，要继承在父元素上计算的值，而不是在子元素上计算的值（em等）。如果是缩放因子（没有单位的纯数字值），则继承的是缩放因子，不是计算的值，最终会计算缩放因子和子元素的font-size的乘积。

图1：

图2：css中的线

图3：确定行框高

替换元素
替换元素的边距和边框会影响该元素的行内框，继而影响行框的高度。
其内容不受CSS视觉格式化模型控制的元素,比如、、、<select>、<object>，标签起到占位符的作用，实际内容不在文档中，叫做替换元素。浏览器会根据元素的标签类型和属性来显示这些元素。比如,img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸:一个固有的宽度,一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度,从而也有固有的宽高比率。另一方面,其他文档也可能没有固有的尺寸,比如一个空白的html文档。<br>CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object,video,textarea,input也是替换元素,audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。</p> </div> <p><strong>非替换元素</strong></p> <p>替换元素之外的所有其他元素都是非替换元素,实际内容在文档流中，由CSS的视觉格式化模型负责非替换元素的渲染。<br>非替换元素的边距和边框不会影响行元素行内框的高度。</p> <p><strong>vertical-align：</strong>垂直对齐，只适用于行内元素、替换元素和表单元格，不能被继承。<br>　　默认值为baseline，将行内元素的基线和所在行的基线对齐；文本都是按基线对齐的。如果一个垂直对齐元素没有基线，比如图像、表单输入元素或其他替换元素，则把<strong>该元素的底端与其父元素的基线对齐</strong>。</p> <p style="text-align: center">     <img src="https://img.php.cn/upload/article/000/000/001/57293ccae2928d6c6f7ea9436d990f90-3.png" alt=""> </p> <p>　　There is space below that line for the descenders you find on letters like f, j, p and q.修复方法：通过设置图片的vertical-align的属性值或改变dislay:block；或者修改父元素的font-size/line-height使行内框的高度小于图片。在父元素的font-size:0;的极端情况下，中线和基线会重合。<br>　　bottom：将元素行内框的底端和行框的底端对齐。<br>　　middle：把行内元素框的中线与基线上方0.25em处的一个点对其，也等于与基线的距离为小写字母x高度的一半（即0.5ex）。x字符的中点并不是内容区的绝对中线，因为x字符会有所下沉。<br>　　百分数：<strong>相对于元素的</strong><strong>line-height</strong><strong>计算</strong>。行内可替换元素的line-height的作用就是帮助计算vertical-align。<br>　　具体长度的值：把一个元素相对于父元素基线升高或降低指定的距离。垂直对其的文本并不会覆盖其他行的文本，只会影响当前行的行高，以使足以包含最高行内框的顶端和最低行内框的底端。</p> <p><strong>行内块：inline-block</strong>，行内块元素会作为替换元素放在行中，即行内块的底端默认放在文本行的基线上。ie6/ie7要使用{display:inline; zoom:1;...}才生效。通常用于横向菜单列表或不等高列表元素整齐排列。但是li标签之间的空格会当作inline元素在页面显示4px的空白，可以通过父元素font-size:0,子元素font-size:12px;消除空白。对于ie6/ie7/safari需要使用word-spacing和letter-spacing加以调整。 </p> <p><img src="https://img.php.cn/upload/article/000/000/001/5a22f0187e7baaa6ecff1c74b5adbe42-4.png" alt=""></p> <p>行内块默认是baseline对齐，但是baseline的确定有特殊规定。The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.所以会出现如下图显示的布局，可以通过改变vertical-align:top;修复。 </p> <p><img src="https://img.php.cn/upload/article/000/000/001/5a22f0187e7baaa6ecff1c74b5adbe42-5.png" alt=""></p><p>以上是css中的线及vertical-align实例详解的详细内容。更多信息请关注PHP中文网其他相关文章！</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn</div></div></div><div class="nphpSytBox"><span>上一篇：<a class="dBlack" title="详解CSS中的盒子模型" href="https://m.php.cn/zh/faq/368062.html">详解CSS中的盒子模型</a></span><span>下一篇：<a class="dBlack" title="分享一篇html入门的实例代码" href="https://m.php.cn/zh/faq/368064.html">分享一篇html入门的实例代码</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>相关文章</h2><em><a href="https://m.php.cn/zh/article.html" class="bBlack"><i>查看更多</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/zh/faq/348757.html" title="Html小知识总结" class="aBlack">Html小知识总结</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh/faq/348804.html" title="如何快速学习HTML" class="aBlack">如何快速学习HTML</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh/faq/348873.html" title="html xhtml xml的区别" class="aBlack">html xhtml xml的区别</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh/faq/348884.html" title="src与href属性的区别" class="aBlack">src与href属性的区别</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>公益在线PHP培训，帮助PHP学习者快速成长！</p></div><div class="footermid"><a href="https://m.php.cn/zh/about/us.html">关于我们</a><a href="https://m.php.cn/zh/about/disclaimer.html">免责声明</a><a href="https://m.php.cn/zh/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>