響應式網頁前端設計

第一階段
加強熟識HTML&CSS

第二階段
學習JavaScript&jQuery

第三階段
Bootstrap協助專案設計

第四階段
w3.css協助專案設計

第五階段
自行開發網站專案設計

第六階段
Pug(Jade)&Sass協助開發效率

=== TSuiling write 2018.07 ===

響應式網頁前端設計【第一階段】加強熟識HTML&CSS

<標籤>特性的基本區分

認識<標籤>特性的基本區分

區塊式標籤
block

非區塊式標籤
inline

同行局部區塊式標籤
inline-block

  • body, div, h1, h2 ~ h6
  • p, ul, ol, li
  • header, main, footer, aside
  • nav, section, article, figure
  • . . . . .
  • a
  • br
  • span
  • . . . . .
  • img
  • iframe
  • . . . . .
一般區塊預設:寬度100% 高度0
position預設為 static , 沒有定位的能力
需要規律左右分欄時, 設定 float
需要有定位能力時, 設定 position
可以設定 padding margin
特性如下圖
一行中的 局部內容
無法設定 寬度、高度
padding 四周可以設定
margin 表示物件外邊界
margin 左右可以設定
margin 上下無法設定
inline 特性有 行高 的存在
一行中的 局部區塊
可以設定寬度、高度
可以設定 padding、margin
但仍屬於所在父層區塊的內容
所以不能使用 margin 左右 auto 的設定
來讓這個區塊相對父層置中對齊
擁有 inline 特性, 所以擁有 行高 的存在

認識區塊的特性

margin的三心二意?