Css 排版歷史
排版歷史
在 css 的戰國時代裡,大部分在網路上找到的排版方法,大多是 float 跟 inline-block 這兩種,沒聽課的話還真的不知道排版的歷史:
- table
- float
- inline-block
- flex
- grid
之後會想來玩玩看 flex 跟 grid,反正是自己的部落格,IE8 以下的用戶就不好意思了。用 table 排版已經太舊太久遠就先不管。然而現在最常用的兩種排版方法 float 跟 inline-block ,還是會有一些問題存在:
float 問題
水平置中困難,需要精算推擠的距離。
假設寬度為 100px 的區塊,在 left: 50%
置中過後,則必須使用 margin-left: -50px
把區塊給推回來。
1 | <div class="center">center</div> |
1 | div { |
center
這麼做雖然可以置中,但是只要改變了一下寬度或是加個 padding,版面一下子就跑掉了。要這麼做不如使用 absolute 這種強大的定位方式,不管你怎麼加 padding 或是改變寬度,都不會發生問題。
inline-block 問題
在 inline-block 的物件之間,會有一個的空白文字大小的寬度(大約 4px):
1 | <ul> |
1 | li { |
- a
- b
- c
不想要那醜醜 4px 的間隔,就必需要在排版的時候調整文字大小:
1 | <ul> |
1 | ul { |
- a
- b
- c
但仔細想一下,為什麼要在排版的時候修改文字的大小啊,雖然問題是解決了,可是這根本是降低程式碼的維護,而且如果那天想要修改文字大小……就到時候再說。
Summary
之後就來做一些 block, inline, inline-block 的小整理:
- float 問題: 水平置中困難,需要精算推擠的距離
- inline 問題: 垂直高度不會推擠到,可能會吃到下面的文字
- inline-block 問題: 中間會有一個文字的空格,需要調整文字大小
block | inline | inline-block | |
---|---|---|---|
width height | v | x | v |
padding | v | left right | v |
margin | v | left right | v |
水平排列 | float | default | default |
空白字元 | 清除 | 保留 | 保留 |
水平置中 | x | text-align | text-align |
垂直對象 | x | v | v |