姬成html課程重點摘要

語言: CN / TW / HK

文字框H5新增屬性

  • required 非空
  • autofocus 自動獲得焦點
  • placeholder

瀏覽器外殼和核心

  • ie---trident
  • chrome---blink
  • firefox---Gecko
  • safari---webkit
  • opera---blink

選擇器優先順序

  • !importang > 行間樣式 > id > class = 屬性選擇器 > 標籤 > 萬用字元

css權重

  • !important-----------infinity
  • 行間樣式-----------------1000
  • id-------------100
  • class|屬性選擇器|偽類------------10
  • 標籤|偽元素-------------1
  • 萬用字元-----------0

瀏覽器內部原理

  • 自右向左由內往外尋找標籤

設定字型大小

  • 即設定字型大小其實是設定字型的高

瀏覽器標準字型及顏色

font-family:arial; color:#424242;

行級元素、塊級元素、行內塊元素

  • 凡是帶有inline的元素,都有文字特性;

body預設的margin值

  • 8px

巢狀元素margin-top塌陷問題,通過BFC(block format context)解決,父級新增以下任意一個

  1. position:absolute;
  2. display:inline-block;
  3. float:left/right;
  4. over-flow:hidden

浮動元素產生了浮動流

  • 所有產生了浮動流的元素,塊級元素看不到他們,但是產生了bfc的元素和文字類屬性(inline)的元素以及文字都能看到浮動元素
  • 實現圖片文字環繞效果 在img標籤上加 float屬性

解決父級元素因浮動造成塌陷問題

  • 在子元素最後新增一個p元素,然後設定其css屬性,clear:both

任何一個標籤從生成起,其內部前後就存在偽元素::befor ::after,利用偽元素清浮動

浮動元素的父級 div::after{ content:''; display:block; // 只有塊級元素才能清浮動 clear:both; }

單行文字溢位打點

white-space:nowrap;over-flow:hidden;text-overflow:ellipsis;

標籤巢狀規則

  • 行級元素裡面只能套行級元素
  • 塊級元素裡面可以套任意元素
  • 特殊點:p標籤裡面不能套div
  • 特殊點:a標籤裡面不能套a標籤

設定了定位position屬性或 float屬性的元素

  • 其內部預設把元素轉換成inline-block,支援寬高且大小由內容撐開;