H5:入門筆記三

塊級元素
常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>標籤是最典型的塊元素

塊級元素的特點:

  • 1)總是從新行開始
  • 2)高度,行高、外邊距以及內邊距都可以控制。
  • 3)寬度默認是容器的100%
  • 4)可以容納內聯元素和其他塊元素。
行內元素
常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>標籤最典型的行內元素。

行內元素的特點:

  • 1)和相鄰行內元素在一行上。
  • 2)高、寬無效,但水平方向的padding和margin可以設置,垂直方向的無效。
  • 3)默認寬度就是它本身內容的寬度。
  • 4)行內元素只能容納文本或則其他行內元素。(a特殊 a裏面可以放塊級元素 )
行內塊元素
<img />、<input />、<td>

行內塊元素的特點:

  • 1)和相鄰行內元素(行內塊)在一行上,但是之間會有空白縫隙。
  • 2)默認寬度就是它本身內容的寬度。
  • 3)高度,行高、外邊距以及內邊距都可以控制。
標籤顯示模式轉換
塊轉行內:display:inline;
行內轉塊:display:block;
塊、行內元素轉換爲行內塊: display: inline-block;

CSS 三大特性
  • 層疊性:

      1. 樣式衝突,遵循的原則是就近原則。 那個樣式離着結構近,就執行那個樣式。
      1. 樣式不衝突,不會層疊。
  • 繼承性
    書寫CSS樣式表時,子標籤會繼承父標籤的某些樣式,如文本顏色和字號。想要設置一個可繼承的屬性,只需將它應用於父元素即可。
    注意:恰當地使用繼承可以簡化代碼,降低CSS樣式的複雜性。子元素可以繼承父元素的樣式(text-,font-,line-這些元素開頭的都可以繼承,以及color屬性)

  • 優先級
    繼承樣式的權重爲0。即在嵌套結構中,不管父元素樣式的權重多大,被子元素繼承時,他的權重都爲0,也就是說子元素定義的樣式會覆蓋繼承來的樣式。

    行內樣式優先。應用style屬性的元素,其行內樣式的權重非常高,可以理解爲遠大於100。總之,他擁有比上面提高的選擇器都大的優先級。

    權重相同時,CSS遵循就近原則。也就是說靠近元素的樣式具有最大的優先級,或者說排在最後的樣式優先級最大。

    CSS定義了一個!important命令,該命令被賦予最大的優先級。也就是說不管權重如何以及樣式位置的遠近,!important都具有最大優先級。

繼承或者* 的貢獻值 0,0,0,0
每個元素(標籤)貢獻值爲 0,0,0,1
每個類,僞類貢獻值爲 0,0,1,0
每個ID貢獻值爲 0,1,0,0
每個行內樣式貢獻值 1,0,0,0
每個!important貢獻值 重要的 ∞ 無窮大
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章