HTML、CSS學習總結一:塊狀元素、內嵌元素、內聯塊狀元素

來源:互聯網
上載者:User

  從開始接觸HTML+CSS布局開始,也有將近半年時間了,除去中間打醬油的三四個月,自己也大概在上面花了一個月的功夫,時間不長,暫且把學過的東西總結一下。
  首先談談HTML的元素,主要分三類,塊狀元素、內嵌元素和內聯塊狀元素。

  1. 塊狀元素display:block的特性是水平展開,垂直包裹,可以設定寬度和高度。對於展開我是這樣理解的,比如先定義了頁面的body,一般情況下body的寬度差不多等於頁面的寬度(有8px的margin),這時如果你定義了一個p元素的話,如果未設定p元素的寬度,那麼p元素會自動展開至body的寬度。包裹的意思就是p的垂直高度恰好能包住其中的常值內容,你寫了幾行文字就是幾個line-height。塊狀元素還有個特性就是它的margin如果碰不到祖先元素的border或者padding,會與祖先元素垂直方向的margin-top、margin-bottom交疊。上下相鄰的同級元素的margin也會交疊,就產生了margin合并。
  2. 內嵌元素display:inline的特性的自動包裹,水平和垂直方向會自動包裹至內容的寬度。因為元素的內聯的,是嵌入到行裡面的,所以對內嵌元素垂直方向設定的margin-top、margin-bottom不會影響span元素的layout,但是水平方向設定的margin-left、margin-right會影響內嵌元素的縮排。因為其具有自動包裹的特性,所以overflow屬性無效。
  3. 內聯塊狀元素display:inline-block,除了具有內嵌元素自動包裹的特性外,還具有塊狀元素可以設定高度和寬度的特性。內聯塊狀元素還有一個重要的特性就是可以通過設定它的margin來改變其layout,但是內聯塊狀元素的margin不與其他元素的margin交疊。

  有如下的原始碼:

<div style="position:relative; width:200px; margin:20px auto; height:200px; background-color:yellow; border:1px solid black;">    <span style="font-weight:bold; position:absolute; top:0;left:0">block</span>    <div style="width:120px; height:120px; background-color:green; margin:40px;">      <div style="display:block; width:40px; height:40px; background-color:blue; margin:40px"></div>    </div></div>

  通過改變最裡層div元素的display屬性來比較三種元素:

block

 inline-block

 inline

.

  可以看到,水平方向的margin是都不會合并的,但是垂直方向上,block產生了合并,inlinemargin屬性無效,而inline-blockmargin不與其他元素的產生交疊。上例中,儘管設定了內嵌元素的大小為40px*40px,但事實上由於div中無內容,應該變成0*0的,為了方便表示,在最裡層的div中加了一個span元素,內容是一個“.”。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.