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>Atas ialah kandungan terperinci css中的线及vertical-align实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Kenyataan：</span><div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div></div></div><div class="nphpSytBox"><span>Artikel sebelumnya：<a class="dBlack" title="详解CSS中的盒子模型" href="http://m.php.cn/ms/faq/368062.html">详解CSS中的盒子模型</a></span><span>Artikel seterusnya：<a class="dBlack" title="分享一篇html入门的实例代码" href="http://m.php.cn/ms/faq/368064.html">分享一篇html入门的实例代码</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Artikel berkaitan</h2><em><a href="http://m.php.cn/ms/article.html" class="bBlack"><i>Lihat lagi</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ms/faq/348757.html" title="Html小知识总结" class="aBlack">Html小知识总结</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/348804.html" title="如何快速学习HTML" class="aBlack">如何快速学习HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/348873.html" title="html xhtml xml的区别" class="aBlack">html xhtml xml的区别</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/348884.html" title="src与href属性的区别" class="aBlack">src与href属性的区别</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ms/"><b class="icon1"></b><p>Rumah</p></a></li><li><a href="http://m.php.cn/ms/course.html"><b class="icon2"></b><p>Kursus</p></a></li><li><a href="http://m.php.cn/ms/wenda.html"><b class="icon4"></b><p>Soal Jawab</p></a></li><li><a href="http://m.php.cn/ms/login"><b class="icon5"></b><p>saya</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ms/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ms/"><b class="icon1"></b><span>Rumah</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/course.html"><b class="icon2"></b><span>Kursus</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/article.html"><b class="icon3"></b><span>Artikel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/wenda.html"><b class="icon4"></b><span>Soal Jawab</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/dic.html"><b class="icon6"></b><span>Kamus</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/xiazai/"><b class="icon8"></b><span>Muat turun</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/faq/zt" title="Topik"><b class="icon12"></b><span>Topik</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ms/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ms/" >Rumah</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/article.html" class="hover">Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/wenda.html" >Soal Jawab</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/course.html" >Kursus</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/faq/zt" >Topik</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/xiazai" >Muat turun</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/game" >Permainan</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/dic.html" >Kamus</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><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>