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