网页布局方案有那些？

 网页布局的核心 --- 就是用css 来摆放盒子位置

PC端布局：

css 提供了 3种机制来设置盒子的摆放位置， 分别是普通流、浮动和定位。其中：

1.普通流（标准流）:累积盒子。自上而下 就用块级。 从左到右就用行内.

2.浮动： 让盒子从普通流中浮动起来 -- 让多个盒子（div）水平排列成一行.

3.定位： 将盒子定在某一个位置 自由的漂浮在其他盒子的上面 -- css离不开定位 特别是后面的js 特效.

 

移动端布局

 rem适配布局（流行）

1. 页面布局文字能随着屏幕大小变化而变化。

2. 流式布局和flex布局主要针对于宽度布局，rem盒子设置高度。

3. 当屏幕发生变化时，元素高度和宽度等比例缩放。

  /* 最小宽度不能小于320 */
@media screen and (min-width:320px) {
    html {
       font-size: 50px;
   }
}

/* 最小宽度不能小于320 */
@media screen and (min-width:640px) {
  html {
      font-size: 100px;
   }
}

.top {
    height: 1rem;
    background-color: pink;
    font-size: .5rem;
    color: #fff;
}

 

流式布局（百分比布局）

流式布局，就是百分比布局，也称非固定像素布局。

通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式。
max-width 最大宽度px（max-height 最大高度px）
min-width 最小宽度px（min-height 最小高度px）

 

.riven {
    width: 100%;
    max-width: 800px;
    min-width: 300px;
    margin: 0px auto;
    background-color: pink;    
}

.riven .mark {
    width: 50%;
    height: 200px;    
}

.riven .mimi {
    width: 50%;
    height: 200px;    
}

flex弹性布局（强烈建议）

就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

 

响应式布局

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小。

常用响应式尺寸划分。
超小屏幕（手机，小于768px）:                      设置宽度为100%。
小屏幕（平板，大于等于768px）：                设置宽度为750px。
中等屏幕（桌面显示器，大于等于992px）：   宽度设置为970px。
大屏幕（大桌面显示器，大于等于1200px）： 宽度设置为1170px。

 

 

 .container {
    width: 750px;
    margin: 0 auto;
}

ul li {    
    width: 93.75px;
    height: 30px;
    float: left;
    list-style: none;
    background-color: green;
}

@media screen and (max-width: 767px){
.container {
    width: 100%;
}

ul li {
    width: 33.33%;
}
}