整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          CSS 行高有無單位的問題

          高有無單位的問題

          Div{font: 12px/1.5 '宋體'}
          Div{font: 12px/1.5em '宋體'}
          Div{font: 12px/150% '宋體;}


          <style>
          .father{
          width:200px;
          height:30px;
          background-color:pink;
          font-size:16px;
          line-height:2em;
          }
          .son{
          font-size:20px; /* 繼承過來的行高為32px */
          }
          </style>
          <div class="father">
          <div class="son"> 我是文字 </div>
          </div>
          <style>
          .father{
          width:200px;
          height:30px;
          background-color:pink;
          font-size:16px;
          line-height:2;  /* 設置文本所在行的行高。默認為normal。 */
          }
          .son{
          font-size:20px; /* 繼承過來的行高為40px 20*2px */
          }
          </style>
          <div class="father">
          <div class="son"> 我是文字 </div>
          </div>

          行高 2em 和 2 不一樣的。

          加em :

          先計算大小, 后繼承。

          不跟單位:

          先繼承, 后計算大小。

          題一: 一般在我們的認識里行內元素是不支持寬高的,如果要讓其支持寬高,必須通過css顯示的轉換:display:block;可是所有的行內元素都不支持寬高嗎?其實不然,來看下面的例子:

          demo1

          demo2

          代碼運行后我們發現input和img標簽居然支持寬高,在我們的印象中input和img是行內元素(inline),是不支持寬高的,但是它們卻有點特殊,原來它們是可替換元素!

          html中的元素可分為替換元素和不可替換元素,替換元素本身是空元素,是由其屬性來決定的,比如這里的input,通過type屬性就可將其設置為文本框或單選按鈕,img也一樣,通過src元素可以來顯示不同的圖片,常見的有<img>、<input>、<textarea>、<select>,他們和一般的行內元素有區別,行內元素不支持寬高,而它們卻支持width和height屬性,如果沒設置寬高,就顯示默認的大小,比如img,就顯示圖片原來的尺寸。

          不可替換元素比較常見,也就是塊級元素(div,p,h1……)或一些行內元素(span,strong,a……),它們是直接顯示元素內容,比如你什么時候見過div通過type來顯示不同的東西?顯然沒有。


          問題二:行內元素除了可替換元素外,比如span元素,一定要display:block;才可以支持寬高嗎?其實也不然。且看下面例子:

          或者這樣設置也可以:

          顯然我并沒有顯示的設置span元素為block,但是同樣能支持寬高,這里的原因是我css設置了span為position:absolute;或者float:left;讓其具有包裹性,從而支持寬高,所以在你設置元素浮動或者絕對定位的情況下,設置元素display:block;就顯得多余了。


          Ps:如果喜歡,那就關注我吧!

          技術等級】初級

          【承接文章】《CSS段落對齊方式,系統認識塊級元素與內聯元素,CSS前端進階篇》

          本文重點講解CSS技術中文本樣式的 line-height 屬性以及該屬性在單行垂直居中問題上的應用。本文屬于前端開發的初級教程,適合于剛剛開始接觸CSS技術的學習者。

          一、設置段落行距:

          CSS技術利用 line-height 屬性來設置行距

          顧名思義,行距就是段落中行與行之間的距離。調整行距可以讓段落看起來更加美觀。

          該屬性的取值是帶有單位的數值。

          例如:p{line-height:30px;}

          上述代碼表明:<p></p>標記對內部文本的行距為30像素。

          本身該屬性的使用是非常簡單的,但是有一個問題需要大家考慮:這個行距是以一行的哪個標準線來進行度量的呢?答案是一行的“基線”。那么,什么是“基線”呢?

          四線三格的第三線就是 “基線”

          上面這張圖為我們解釋了什么是“基線”。基線就是英語本子上四線三格的第三線,是大部分英文字母在書寫時結束的那條線。

          在CSS中,line-height 屬性的調整就是以這條線為標準線的。換句話說,當line-height屬性設置為一定的數值時,段落中任意兩行的行距就是這兩行基線之間的距離。

          二、行距屬性的應用:

          首先,大家看下面這個效果。頂部文本“歡迎關注小海前端”這幾個字在一個粉紅色的塊中顯示,并且是垂直方向居中的,這個應該在頁面中如何設置呢?

          如何實現塊中的垂直居中

          這就需要用到 line-height 屬性的一個小技巧。

          當一行文本(注意:必須是一行)在一個<div></div>塊內部顯示時,將該<div></div>塊的行高設置為這個塊本身的高度,就可以讓內部的一行文本垂直居中了。

          相應的CSS代碼如下所示:

          div{

          width:1000px; height:30px;

          background-color:#ff5857; //該屬性為背景顏色,主要是讓我們能夠看到塊本身

          line-height:30px;

          }

          大家看上述代碼:line-height 屬性的取值和 height 屬性的取值是相同的,這樣內部的一行文本就實現垂直居中了。

          文章預告

          下一篇文章中,小海老師會重點為大家講解vertical-align屬性的使用。該屬性的使用要求較多,使用起來較為繁瑣,希望廣大前端愛好者千萬不要錯過。

          小海教材

          如果大家希望得到更加全面的關于HTML和CSS技術講解的內容,可以私信我。我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你,幫助你在前端開發的道路上闊步前行。

          小海聲明

          在頭條上也已經寫了有十篇文章了。這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章,逐步學到一定的知識,甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗,每寫一篇時我都盡量把握好措辭,用簡單易懂的語言描述,同時精心設計版面,讓版面更加豐富,激發閱讀興趣。所以,每一篇文章可能篇幅不長,但是都要耗費小海老師很久的時間。

          希望收藏了我寫的文章的你同時可以關注一下“小海前端”,因為這些文章都是連載的,并且是經過我精心整理和系統的歸納過的。

          關注“小海前端”,我會繼續為大家奉上更加深入的前端開發文章,也希望更多的初學者跟著學下去,我們共同將前端開發的路努力堅持的走下去。


          主站蜘蛛池模板: 久久久久人妻一区精品果冻| 亚洲av日韩综合一区在线观看| 亚洲人成网站18禁止一区| 国产一区二区在线视频| 手机福利视频一区二区| 精品熟人妻一区二区三区四区不卡| 岛国精品一区免费视频在线观看| 国产在线观看一区精品| 国产精品视频免费一区二区| 亚洲福利一区二区| 精品亚洲一区二区| 精品乱子伦一区二区三区| 日韩A无码AV一区二区三区| 亚洲av无码一区二区三区天堂| 久久亚洲综合色一区二区三区| 无码人妻AⅤ一区二区三区水密桃| 成人免费一区二区无码视频| 亚洲av无码一区二区三区天堂| 国产成人亚洲综合一区| 韩国理伦片一区二区三区在线播放| 一区二区三区日韩精品| 久久久一区二区三区| 亚洲国产成人一区二区三区| 国产精品视频一区二区三区四| 国产a∨精品一区二区三区不卡| 奇米精品一区二区三区在| 少妇无码AV无码一区| 亚洲中文字幕无码一区二区三区 | 天堂Aⅴ无码一区二区三区| 中文字幕亚洲一区二区三区| 成人影片一区免费观看| 国产成人无码AV一区二区| 中文人妻无码一区二区三区| 日本高清不卡一区| 精品一区二区三区免费毛片爱| 韩国福利一区二区美女视频| 国产一区二区在线观看| 日韩美一区二区三区| 精品久久久久一区二区三区| 国99精品无码一区二区三区| 亚洲AV无码一区二区三区牛牛|