版面常用的三種標籤介紹

零下一度
發布: 2017-07-17 15:00:50
原創
2443 人瀏覽過

元素就是標籤,佈局中常用的有三種標籤,塊元素、內聯元素、內聯塊元素,了解這三種元素的特性,才能熟練的進行頁面佈局。

內嵌元素(行內元素)  

佈局中常用的標籤如:a、span、em、b、strong、i等等都是內聯元素,它們在佈局中的行為:

  a、支援部分樣式(不支援寬、高、margin上下、padding上下)

  b、寬高由內容決定。

  c、盒子並在一起

  d、程式碼換行,盒子之間會產生間距。

  e、子元素是內聯元素,父元素可以用text-align屬性設定子元素的水平對齊方式,用line-height屬性值設定垂直對齊方式

#區塊元素

也稱為行元素,佈局中常用的標籤如:div p、ul、li、h1~h6、dl、dt、dd等等都是區塊元素,它在佈局中的行為:

  a、支援全部的樣式

  b、如果沒有設定寬度,預設寬度為父級寬度的100%

# c、盒子佔據一行、即使設定了寬度

解決內聯元素間隙的方法:

  a、去掉內聯元素之間的換行

  b、將內聯元素的父級設定font-size為0,內聯元素自身再設定font-size

#內聯區塊元素

也叫行內區塊元素,是新增的元素類型,現有元素沒有歸於此類別的,img和input元素的行為類似這種元素,但是也歸類於內聯元素,我們可以用dispaly屬性將區塊元素或內聯元素轉換為這種元素。它們在佈局中的表現行為:

  a、支援全部樣式

  b、如果沒有設定寬高,寬高由內容決定

  c、程式碼換行,盒子會產生間距

  d、子元素是內聯塊元素,父元素可以用text-align屬性設定子元素水平對齊方式,並用line-height屬性值設定子元素的垂直對齊方式。

這三種元素,可以透過display屬性來相互轉化,不過實際開發中,塊元素用得比較多,所以我們經常把內聯元素轉化為塊元素,少量轉化為內聯塊,而要使用內聯元素時,直接將內聯元素,而不用塊元素轉換了。

display屬性 

用來設定元素的型別與隱藏,常用的屬性有:

  a、none 元素隱藏且不佔位置

  b、block 元素以區塊元素顯示

  c、inline 元素以內嵌元素顯示

  d、inline-block元素以內聯塊元素顯示。

元素類型實際應用

#

以上是版面常用的三種標籤介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板