-
圖片水平垂直居中查看全部
-
行高不會影響圖片實際占據(jù)的高度。 隱匿文本節(jié)點(diǎn) 消除圖片底部間隙的方法： 1.圖片塊狀化-無基線對齊 img{ display:block; } 2.圖片底線對齊 img{ vertical-align:bottom; } 3.行高足夠小-基線上移 .box{ line-height:0; }查看全部
-
body全局?jǐn)?shù)值行高使用經(jīng)驗 body{font-size:14px;line-height:?} 匹配20的使用經(jīng)驗——方便心算。 line-height=20px/14px=1.42857 除chrome瀏覽器的其他瀏覽器都可以，但是chrome會變成19px。所以 body{font-size:14px;line-height:1.4286;} body{font:14px/1.4286 'microsoft yahei';}查看全部
-
1.5與150%/1.5em的差別 1.5：所有可繼承元素重計算； 150%/1.5em：當(dāng)前元素計算，繼承給下面的元素。查看全部
-
line-height支持屬性值： ·normal（默認(rèn)） 跟著用戶瀏覽器走，且與元素字體關(guān)聯(lián) ·<number> 如1.5 ·<length> 如1.5em,1.5rem,20px,20pt ·<percent> 如150% ·inherit（繼承）（IE8+） input框等元素默認(rèn)行高是normal，使用inherit可以讓文本框樣式可控性更強(qiáng)。查看全部
-
內(nèi)聯(lián)元素的高度是由line-height決定的 問：line-height明明是兩基線距離，單行文字哪來行高，還控制了高度？ 答：1.行高由于其繼承性，影響無處不在，即使單行文本也不例外； 2.行高只是幕后黑手，高度的表現(xiàn)不是行高，而是內(nèi)容區(qū)域和行間距。 只不過，正好：內(nèi)容區(qū)域高度（content area）+行間距（vertical spacing）=行 高（line-height） 內(nèi)容區(qū)域高度： 1.內(nèi)容區(qū)域高度只與字號（font-size）以及字體（font-family）有關(guān)，與line-height 沒有關(guān)系。 2.在simsun字體下，內(nèi)容區(qū)域高度等于文字大小值（font-size）。 總結(jié)： 行高決定內(nèi)聯(lián)盒子高度；行間距墻頭草，可大可?。ㄉ踔霖?fù)值），保證高度正好 等同于行高。 問：如果行框盒子（line boxes）里面有多個不同行高的內(nèi)聯(lián)盒子？ 答：（似是而非）看截圖（文本占據(jù)的高度） 含多個行框盒子的包含容器： 多行文本的高度就是單行文本高度累加。查看全部
-
文本占據(jù)的高度查看全部
-
行內(nèi)框盒子模型查看全部
-
line-height的實際應(yīng)用 A、實現(xiàn)單行文字垂直居中 B、大小不固定的圖片、多行文字垂直居中 1、圖片水平垂直居中(ie8+才能支持) .box{line-height:300px;text-align:center;} .box>img{vertical-align:middle;} 2、多行文本水平垂直居中（ie8+才能支持） .box{line-height:250px;text-align:center;} .box>.text{display:inline-block;line-height;nomal;text-align:left;vertical-align:middle;} 多行文字水平垂直居中實現(xiàn)的原理跟圖片的實現(xiàn)原理是一樣的，區(qū)別在于要把多行文本所在的容器display水平轉(zhuǎn)換成和圖片一樣的，也就是inline-block（img就是inline-block），以及重置外部繼承的text-align和line-height屬性值。 實際應(yīng)用： line-height用來代替height，避免ie6/ie7下的haslayout，因為在ie6/ie7下給元素設(shè)置了height高度，該元素就有了layout布局（haslayout），會導(dǎo)致其沖破父元素自適應(yīng)（display：inline-block;/*或float:left*/）的布局,如果對元素使用行高line-height則該元素不會有l(wèi)ayout查看全部
-
行高不會影響圖片實際占據(jù)的高度。 消除圖片底部間隙 1.圖片塊狀化--無基線對齊 img{display:block;} 2.圖片底線對齊 img{vertical-align:bottom;} 默認(rèn)是vertical-align: baseline 3.行高足夠小--基線位置上移 box{line-height:0;} 特例：小圖片和大文字，基本高度就受行高控制 在圖文混排的情況下inline元素在默認(rèn)情況的vertical-align是baseline（基線對其）的，容器的高度取決于inline元素與文字基線對其之后文字行高-基線位置的高度+inline元素的高度。 把圖片放在一個塊容器中圖片呈現(xiàn)的位置理解為塊容器隱藏了一個文本節(jié)點(diǎn)，即有一個看不見的文本（chrome默認(rèn)的文字基線對其之后文字行高-基線位置的高度=3px） 消除圖片底部間隙的方法; 1、圖片塊狀化，原因：因為vertical-align等只適用于內(nèi)聯(lián)inline,inline-block元素，塊狀化(img{display:block})后便不受其影響； 2、圖片底線對齊：img{vertical-align:bottom;} 3、父盒子行高足夠小.box{line-height:0}; 以上第二，第三種的原因是因為盒子容器中隱匿文本節(jié)點(diǎn)的存在，導(dǎo)致圖文基線對齊所致；查看全部
-
line-heigth: normal; 默認(rèn)，不同瀏覽器有所差異，不同字體也有所差異。 line-heigth: <number> 根據(jù)當(dāng)前元素的字體大小計算，line-height = 1.5 * 20px = 30px。 line-height: <length> **em;**rem;**px;**pt。 line-heigth: <percent> 相對于設(shè)置該屬性元素的字體大小計算，line-height = 150% * 20px = 30px。 line-height: <inherit> 行高繼承，ie8+。 應(yīng)用元素有差別： line-height：1.5 所有可繼承元素根據(jù)字體大小重新計算。 line-height：150% / 1.5em 當(dāng)前元素根據(jù)字體大小計算，繼承給后代元素。 body全局行高數(shù)值 一般博客、文章等中閱讀應(yīng)用line-height:1.5左右 其余地方匹配20px line-height: 20px / 14px = 1.42857 = 1.4286 font-size: 14px / 1.4286查看全部
-
1.內(nèi)聯(lián)元素的高度是由行高決定的 2.行高由于其繼承性，影響無處不在，即使單行文本也不例外 3.行高只是幕后黑手，高度的表現(xiàn)不是行高，而是內(nèi)容區(qū)域和行間距 內(nèi)容區(qū)域高度（content area）+行間距（vertical spacing）=行高（line-height） 4.內(nèi)容區(qū)域高度只與字號以及字體有關(guān)，與line-height沒有任何關(guān)系 5.在simsun字體下，內(nèi)容區(qū)域高度等于文字大小值,既 font-size+行間距=line-height 6.行間距上下拆分，就有了“半行間距” 總結(jié)：行高決定內(nèi)聯(lián)盒子高度，行間距墻頭草，可大可小（甚至負(fù)值），保證高度正好等于行高 如果行框盒子里面有多個不同行高的內(nèi)連盒子的行高怎樣表現(xiàn)？ 大部分情況下，是由行高最高的那個盒子決定的。 但比如在屬性中含有vertical-align有值時就一樣。 多行文本的高度就是多行文本高度的累加查看全部
-
四種盒子模型： 1.“內(nèi)容區(qū)域”（content area） 2.“內(nèi)聯(lián)盒子”（inline boxes） 3.“行框盒子”（line boxes） 4.“包含盒子”（containing box） 4>3>2（包含關(guān)系） 2和1之間關(guān)系說不清。 行內(nèi)框盒子模型： 內(nèi)容區(qū)域，一個圍繞文字看不到的盒子，相當(dāng)于鼠標(biāo)選中時候的區(qū)域，與font-size有關(guān)。 內(nèi)聯(lián)盒子，不會讓內(nèi)容成塊顯示，而是排成一行inline，如果是光禿禿的文字，則屬于匿名內(nèi)聯(lián)盒子。如span 行框盒子，每一行都是一個行框盒子，由內(nèi)聯(lián)盒子組成——如果換行就相當(dāng)于是兩個行框盒子。 包含盒子，由一行一行的行框盒子組成，如p查看全部
-
內(nèi)容區(qū)域高度只與字號以及字體有關(guān)，與line-height 無關(guān); 在simsun宋體情況下，內(nèi)容區(qū)域高度等于文字大小值。查看全部
-
行間距注意查看全部
舉報
0/150
提交
取消