-
注釋及其解釋
查看全部 -
當(dāng)前元素對(duì)父元素居中
查看全部 -
垂直居中布局? ?父元素設(shè)置css 改變子元素，同時(shí)影響父元素 display：table-cell? vertical-align：middle
查看全部 -
公式：間距+容器寬度=（間距+列寬度）?N（列數(shù)）
查看全部 -
兩列布局
兩列布局一般情況下是指寬度與自適應(yīng)布局，兩列中左列是確定的寬度，右列是自動(dòng)填滿剩余所有空間的一種布局效果。
實(shí)現(xiàn)方式：?
float +margin?
float+overflow
display屬性的table
查看全部 -
居中布局的第二種方案
#parent{
position:relative;
}
children{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
優(yōu)點(diǎn)：
缺點(diǎn)：transform 和transition 屬性屬于CSS3，不兼容低版本的I瀏覽器。
查看全部 -
居中布局第一種方案
#parent{
display:
display：table-cell;
vertical-align:middle;
}
#children{
display:block;
margin：0 auto；
}
優(yōu)點(diǎn)：兼容性比較好
缺點(diǎn)：為了對(duì)子元素進(jìn)行居中，對(duì)父元素設(shè)置了CSS樣式。
查看全部 -
父元素{
????position:absolute;
}
子元素{
????position:absolute;
????left:50%;
????transform:translateY(-50%);
}
優(yōu)點(diǎn)：父級(jí)元素是否脫離文檔流，都不影響子級(jí)元素的垂直居中效果。
缺點(diǎn)：transform是CSS3新增屬性，對(duì)瀏覽器支持情況不好。
查看全部 -
垂直居中第一種方案：
父元素設(shè)置:????display:table-cell;
????????????????????? ?vertical-align:middle;
display:table-cell：把當(dāng)前元素設(shè)置為<td>元素（單元格）
vertical-align:用于設(shè)置行內(nèi)元素垂直方向的對(duì)齊方式。
top(頂部對(duì)齊) middle（居中對(duì)齊） bottom（底部對(duì)齊）
優(yōu)點(diǎn)：display:table-cell 和vertical-align屬于CSS2的內(nèi)容，CSS2對(duì)大部分瀏覽器兼容性比較好。
缺點(diǎn)：父元素如果有行內(nèi)元素，也會(huì)進(jìn)行垂直居中。提交
查看全部 -
第三種水平居中方案
子元素設(shè)置 absolute 父元素設(shè)置relative/absolute 目的：相對(duì)于父元素進(jìn)行定位
子元素設(shè)置 left:50%;(向右移動(dòng)寬度為父元素的50%)
????????????????????transfrom:translate(-50%);（想左移動(dòng)本身寬度的50%）
查看全部 -
第二種水平居中方案
display:block/table? ?+margin: 0 auto ;
優(yōu)點(diǎn)：針對(duì)寬度確定的塊級(jí)元素，子元素只需要設(shè)置 margin:0 auto 即可
缺點(diǎn)：如果水平居中元素脫離了文檔流，導(dǎo)致margin失效，則無(wú)法水平居中
查看全部 -
第一種水平居中方案
text-align +display:inline-block?
優(yōu)點(diǎn)：兼容性較好
缺點(diǎn)：text-align 屬性針對(duì)子元素的行內(nèi)元素也生效，如果對(duì)子元素的行內(nèi)元素有其他位置的變更，需要重新對(duì)子元素設(shè)置 text-align元素重新賦值。
查看全部 -
居中布局的分類
水平居中
垂直居中
水平居中+垂直居中布局
查看全部 -
給父級(jí)元素設(shè)置dispaly:table;給子級(jí)元素設(shè)置display:table-cell;利用不給表格單元設(shè)置寬度是，表格單元會(huì)自動(dòng)等分父級(jí)元素的寬度的特性，實(shí)現(xiàn)等分布局。
查看全部 -
水平居中布局實(shí)現(xiàn)方式：
inline-block + text-algin 屬性配合使用
table + margin 屬性配合使用
absolute + transform 屬性配合使用
查看全部
舉報(bào)
