移动web布局常见问题(个人问题)?

页面布局:

头部:

logo + 搜索框/网站名称 + 登录/个人信息
布局混乱时,常使用绝对定位,避免出现强行使用背景图而出现空div标签的情况

轮播图:

用于产品展示,或者产品推荐
常使用插件

导航:

有可能有一级或者多级导航
单排或者多排显示多个li,浮动 + 宽度百分比 + 内减盒模型

内容区:

常见的也是多或单排展示多个li,手法同导航

常见问题:

1.必须设置视口,注意2倍图的问题;
2.最外层通常套一个.container的div盒子,用来确定版心;
3.less与伪类选择器的组合使用(同类盒子较多时,可以减少使用类名)

例如:
        header {
        position: relative;
        height: 0.45rem;
        div {
            position: absolute;
        }
        div:nth-child(1) {
            &:after {
                position: absolute;
            }
        } 

4.ul中有li浮动,直接调整ul的padding,li会直接移向右下,右内边距不生效,需要给ul设置内减盒模型,使li局限在ul的内容区,因为外扩型盒子宽高会随着padding的增大而增大.
5.套着图片的外层div最好不要设定高度,会导致图片无法填满div,造成图片与盒子底边的空隙,被误会为怪异模式当然img与父盒底边的6px问题,还是要先解决的;
6.ul内多个li浮动,且li之间还有外边距,如果不使用flex布局,使用百分比是很难控制的,有内减盒子也没用,内减盒只能处理外边框,内边距,等属于盒子内部的东西,所以必须是精准的绝对尺寸或者相对尺寸.
7.调整子盒与父盒的上外边距时,注意外边距塌陷
8.子盒不设置宽高,无法使用定位方法垂直居中.