只需用HTML、CSS就可以了。

HTML

HTML 的話，只要熟悉html標簽的意思，一般就是單詞意思，就能所謂的語義化的結構。

如果是在很久以前，還沒有css的時候，那就是看文章，用瀏覽器給他們的生成的自帶樣式也就夠了，可是現(xiàn)在的網(wǎng)頁布局很“復雜”，所以就要學會css。
css的學習就是背單詞而已，真的，背會了，簡簡單單的頁面就可以做出來了，但是還有一些奇怪的問題要注意，因為可能在你寫樣式的時候，就兩兩一配合，然后我就可以恭喜你了，問題出來了，O(∩_∩)O哈哈~

常見CSS問題

• 浮動的時候，父元素高度塌陷
• 元素就是標簽的上下方向的margin會合并，當然這是有前提條件的
• css的優(yōu)先級
• 如何能觸發(fā)bfc現(xiàn)象
• css中的，哪些屬性觸發(fā)回流，哪些屬性觸發(fā)重繪
• 子元素固定定位+父元素添加transform屬性：固定定位失效，變成絕對定位
• 布局：定位布局、浮動布局、flex 布局、grid布局
• 居中問題
• 響應式
• 內聯(lián)元素（包括 inline-block）：都要使用vertical-align，值可以是任意一個
  • 內聯(lián)元素之間有任何看不見的字符（回車、空格），都會轉為1個空格（試試用浮動代替）

• position+float：他們會有啥 bug？

  
  
  絕對定位.png
  
  
  相對定位.png
• 何時直接定寬高，何時要用其他屬性把容器撐開

CSS 選擇器：就是為了選中元素

link 標簽：媒體查詢

CSS 一開始設計出來的時候并沒有想到大家會這么依賴 CSS，所以設計的時候想得特別簡單：你要什么功能我就加什么屬性。

• 你要顏色，就有 color: red; background-color: red;
• 你要圖文混排，就有 float: left
• 你要絕對定位，就有 position: absolute

CSS 不正交，因而有些反直覺。不正交主要表現(xiàn)在兩點：

• 各屬性之間互相影響

  • margin V.S. border、display:block、display:flex

    • 兄弟節(jié)點
    • border、padding、 display:inline-block|flex|table、overflow:hidden
    • 父子節(jié)點

  • 小圓點 V.S. display

  • position: absolute V.S. display: inline

• 各元素之間互相影響
  • position: fixed V.S. transform
  • float 影響 inline 元素（只影響文字，容器沒影響）

CSS 學習的易點

背套路即可應付日常工作

• 水平居中
• 垂直居中：避免 parent 容器的高度固定

布局套路.png

水平居中.png

垂直居中.png

巧用工具

• CSS 3 Generator

文檔流（Normal Flow）

• 內聯(lián)元素的寬高
  • 字體的行高是由設計師決定的，所以不同字，默認行高不同
• 塊級元素的寬高
  • 高度：由內部文檔流總和決定（是決定，不是相等）的（如果只有文字，那就是 line-height*行數(shù)）
  • div 的寬度，不是由文字決定的。默認就好，根據(jù)父級寬度。
• 水平居中
• 垂直居中：flex
• 文字溢出省略（多行）

image.png

文字垂直居中：padding+適當?shù)?line-height

盒模型

• 一比一的 div

  
  
  一比一的 div.png

• outline

• border 調試大法