-
第二種垂直居中實(shí)現(xiàn)
查看全部 -
第一種垂直居中布局
查看全部 -
垂直居中布局解決方案
查看全部 -
第三種水平居中方法
查看全部 -
第二種解決方案
查看全部 -
第一種解決方案
查看全部 -
水平居中布局當(dāng)前元素在父級元素容器中,水平方向是居中顯示的
三種方案
inline-block+text-align
table+margin
absolute+transform
查看全部 -
position : absolute屬性 的兩種情況
當(dāng)父級元素沒有開啟定位的話,則子級元素是相對于頁面的絕對定位。
當(dāng)父級元素開啟了定位的話,則是相對于父級元素的。
查看全部 -
元素脫離文檔流的三種方式:
float 屬性
position : absolute絕對定位
position : fixed 固定定位
查看全部 -
水平居中布局方案二 :? 只對子級元素設(shè)置display:block + margin : 0 auto;就可以完成水平居中布局
優(yōu)點(diǎn) : 只對自己設(shè)置元素就可以了
缺點(diǎn) : 如果子級元素脫離文檔流的話會導(dǎo)致margin屬性失效
查看全部 -
margin屬性設(shè)置:
一個(gè)值 : 表示上右下左的外邊距相同
兩個(gè)值 : 第一個(gè)表示上下外邊距 第二個(gè)表示左右外邊距
三個(gè)值 : 第一個(gè)表示上邊距 第二個(gè)表示左右外邊距 第三個(gè)表示下外邊距
四個(gè)值 : 分別表示上右下左的邊距
查看全部 -
水平居中布局 text-align:center + display:inline-block 的優(yōu)缺點(diǎn)
1 優(yōu)點(diǎn) : 瀏覽器兼容性好?
2.缺點(diǎn) :子元素的文本內(nèi)容會由于父級元素設(shè)置了text-align:center也居中對齊,需要在子元素中再次設(shè)置text-align屬性。
查看全部 -
display:inline-block行內(nèi)塊元素可以設(shè)置寬高,display:inline內(nèi)聯(lián)元素寬高是無效的。
查看全部 -
水平居中對齊解決方案一:
text-align:center + display:inline-block實(shí)現(xiàn)
text-align元素最初是對文本元素設(shè)置對齊的,當(dāng)元素是inline-block的時(shí)候其實(shí)是同時(shí)具備內(nèi)聯(lián)元素和塊元素的的特征。所以text-align就有效了。
查看全部 -
居中布局 水平居中 垂直居中 水平加垂直居中
查看全部
舉報(bào)