iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
0
自我挑戰組

網頁學習日誌系列 第 3

CSS : display屬性-區塊和行內元素差異

diplay區塊和行內屬性表格分析:

block(區塊元素) inline(行內元素) inline-block
差異 將整行容器空間占滿,所以會分行排列 與文字段落同行排列 效果同於float,同時具有block(區塊)和inline(行內)屬性
影響範圍 整行都可以點到 元素範圍以外點不到 元素範圍以外點不到
使用地方 使用手機點選按鈕、選單等需大範圍感應區域的元素 a連結 元素並排

block: 區塊將整行空間占滿,後面元素往下行排

https://ithelp.ithome.com.tw/upload/images/20200411/20107321vh1DfsY2pp.png

https://ithelp.ithome.com.tw/upload/images/20200411/20107321OdbNnZRHGI.png

inline:同行排列

https://ithelp.ithome.com.tw/upload/images/20200411/20107321alTJSeSiK8.png

https://ithelp.ithome.com.tw/upload/images/20200411/20107321NA8bm2aQWc.png

display屬性 最常用在 ul li 清單項目,ul li預設都為block所以都會分行排列

https://ithelp.ithome.com.tw/upload/images/20200411/20107321CwtIYmaUdi.png

https://ithelp.ithome.com.tw/upload/images/20200411/20107321skOmjUSHmd.png

所以如果要讓li並排,只要設定li為display:inline 或是 inline-block,ul 和 li都可在同行顯示,但是ul仍然還是區塊元素(block)。

https://ithelp.ithome.com.tw/upload/images/20200411/2010732146fIbahRme.png

https://ithelp.ithome.com.tw/upload/images/20200411/20107321htGmK3snVv.png


上一篇
CSS : position 絕對定位與相對定位
下一篇
CSS : 網頁排版要注意的Box Model(盒模型)
系列文
網頁學習日誌30

尚未有邦友留言

立即登入留言