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