網頁佈局需要的基礎知識總結

1. block inline inline-block

2. 盒模型

3. 浮動

4. position

5. 上下左右居中

左右居中

元素左右居中是一件很容易的事

• 元素dispaly屬性是inline或inline-block,使用text-align:center就能將它左右居中
• 元素dispaly屬性是block,將margin-left和margin-right設定爲auto就可以

上下居中

元素的上下居中就沒那麼容易,常用的3個上下居中的方法

1. 第一種方法
   
   

   這時候,元素的左上角就會對應畫面的中心點.
   要將元素的中心點對齊畫面的中心點,將它向左偏移一半距離和向上偏移一半距離,可以通過transform屬性
   
   
   這樣就可以達到上下居中效果了.

2. 第二種方法
   

3. 第三種方法
   
   總結:
   
   第一種方法是將元素自己與畫面中居中,只需調整元素本身的屬性就可以
   第二種和第三種,是先將容器調整成與畫面具備相同的大小,然後再設它的內容的對齊方式

6. css單位

7. flex佈局

8. grid佈局