3-3 页面布局（总结）
2019-04-26 本文已影响0人
一杯浊酒
- 问题:
3-1 页面布局（一）.mp4_20171124_120645.110_看图王.jpg
1: 浮动解决方案
.left-float {
float: left;
}
.right-float {
float: right;
}
-
优点-兼容性好,用清除浮动和处理好周边的元素后,兼容性是比较好的
-
缺点- 浮动之后是脱离文档流的,处理不好会出现问题
2: 绝对定位解决方案
.father-position {
position: relative;
}
.father-position div {
position: absolute;
}
.left-position {
left: 0;
width: 300px;
}
.center-position {
right: 300px;
left: 300px;
}
.right-position {
right: 0;
width: 300px;
}
-
快捷,如果再配合JavaScript使用的话,不容易出问题
-
由于元素脱离文档流了,下面的子元素也必须脱离文档流,导致可实用性降低
3:flex-box 布局解决方案
.father-flex {
display: flex;
margin-top: 250px;
}
.left-flex {
width: 300px;
}
.center-flex {
flex: 1;
}
.right-flex {
width: 300px;
}
- css3中新出现的,解决上述两个布局方案的不足出现的,比较完美的一个方案
4:表格布局结局方案
.father-table {
display: table;
width: 100%;
}
.father-table div {
display: table-cell;
}
.left-table {
width: 300px;
}
.right-table {
width: 300px;
}
-
兼容性好
-
缺点:当其中间的一个单元格超出高度的时候,他两侧的单元格也是要调整高度的
5:网格布局解决方案
.father-grid {
/*显示为网格布局*/
display: grid;
width: 100%; /*内容宽度为100%*/
grid-template-rows: 200px; /*设定有几行,行的高度是多少*/
grid-template-columns: 300px auto 300px;/*设定有几列,没一列的宽度是多少,分别写出来*/
}
- 代码简单
-
问题二:在不定高的情况下,上面哪几种方法依然可行?
-
经检验,flex-box和table方法依然可行
