html的塊級元素和內聯元素


常用的塊級元素:

   address , center , div , dl ,, form , h1 , h2 , h3 , h4 , h5 , h6 , menu , ol , p , table , ul , li

  在HTML5的規范中,<header><nav><footer><article><section>等標簽其實就是<div>,而這些新標簽出現的意義是為了更好的划分整體HTML文檔顯示邏輯結構,

比如,在<header>標簽中只能定義與頁首相關的內容,而不是將頁首定義為一個<div class="header">,這就是這些標簽與<div>的主要區別。

 

常用內聯的元素:

  a , b , br , em , font , img , input , label , select , small , span , textarea 

可變元素(根據上下文關系確定該元素是塊元素還是內聯元素):

  button

塊元素和內聯元素的區別:

在標准文檔流里面,塊級元素具有以下特點:

①總是在新行上開始,占據一整行;
②高度,行高以及外邊距和內邊距都可控制;
③寬帶始終是與瀏覽器寬度一樣,與內容無關;
④它可以容納內聯元素和其他塊元素。

行內元素的特點:

①和其他元素都在一行上;
②高,行高及外邊距和內邊距部分可改變;
③寬度只與內容有關;
④行內元素只能容納文本或者其他行內元素。
不可以設置寬高,其寬度隨着內容增加,高度隨字體大小而改變,內聯元素可以設置外邊界,但是外邊界不對上下起作用,只能對左右起作用,也可以設置內邊界,但是內邊界在ie6中不對上下起作用,只能對左右起作用

CSS改變元素類型

利用CSS我們可以擺脫上面表格里HTML標簽歸類的限制,自由地在不同標簽/元素上應用我們需要的屬性。

       主要用的CSS樣式有以下三個:

  • display:block  -- 顯示為塊級元素

  • display:inline  -- 顯示為內聯元素

  • dipslay:inline-block -- 顯示為內聯塊元素,表現為同行顯示並可修改寬高內外邊距等屬性

注意

內聯元素的margin-left / margin-right及padding-left / padding-rigtht是可以控制的,所以可以通過這4個屬性來控制內聯元素的寬度。

內聯元素的內部也可以放塊級元素標簽,而且內部的塊級元素標簽會撐大外部的內聯標簽,所以可以通過放塊元素來控制內聯元素的高度(網上介紹的是內聯元素只能放文本及其他內聯元素)

例如:

  <a> 

    <div style="width:100px;height:100px;">測試</div>

    </a>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM