iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
Modern Web

30天CSS&Bootstrap排版統整 系列

實驗室椅子被拿走了 咩噗

鐵人鍊成 | 共 30 篇文章 | 9 人訂閱 訂閱系列文 RSS系列文 團隊nutc imac 惠靈頓牛排
DAY 1

Day1 --水平置中(1)

使用margin: 0 auto; margin屬性若只有兩個參數,前者代表top和bottom,後者代表left和right,所以margin:0 aut...

2020-09-16 ‧ 由 zxc29019009 分享
DAY 2

Day2--水平置中(2)

使用position:absolute; 子元素設置為position:absolute時,其父元素不能是position:static(fixed、rela...

2020-09-17 ‧ 由 zxc29019009 分享
DAY 3

Day3--水平置中(3)

使用justify-content: center; 想讓元素使用彈性布局,需給其父元素設置display:flex。 生效條件1.給父元素設置justif...

2020-09-18 ‧ 由 zxc29019009 分享
DAY 4

Day4--水平置中(4)

使用justify-content-center (Bootstrap結合Flexbox) 容器是Bootstrap中最基本的佈局元素,設置.containe...

2020-09-19 ‧ 由 zxc29019009 分享
DAY 5

Day5--水平置中(文字、圖片、...)

使用text-align:center; CSS的text-align屬性是用來設定網頁容器(ex:div,span,...)內的文字、圖片等元素的水平對齊效...

2020-09-20 ‧ 由 zxc29019009 分享
DAY 6

Day6--垂直置中(1)

使用position:absolute; 子元素設置為position:absolute時,其父元素不能是position:static(fixed、rela...

2020-09-21 ‧ 由 zxc29019009 分享
DAY 7

Day7--垂直置中(2)

使用align-items: center; 想讓元素使用彈性布局,需給其父元素設置display:flex。 生效條件1.給父元素設置align-item...

2020-09-22 ‧ 由 zxc29019009 分享
DAY 8

Day8--垂直置中(3)

使用align-items-center (Bootstrap結合Flexbox) 容器是Bootstrap中最基本的佈局元素,設置.container容器會...

2020-09-23 ‧ 由 zxc29019009 分享
DAY 9

Day9--首尾DIV固定,中間DIV能夠自適應高度

首尾DIV固定,中間DIV能夠自適應高度 範例 .custom-font{ top:50%; tra...

2020-09-24 ‧ 由 zxc29019009 分享
DAY 10

Day10--DIV自適應內容寬度,超過一定寬度即換行

CSS .parent{ font-size: 20px; display: inline-block;...

2020-09-25 ‧ 由 zxc29019009 分享