Web移动端第三天

目录

                  1.PC端和Web移动端的区别

2.百分比布局[流式布局 不常用]

3.flex布局[弹性布局 重点]

---

1.PC端和Web移动端的区别

PC端

屏幕大，网页固定版心

PC端浏览器繁多，更多考虑兼容性问题。（布局： 浮动+定位+标准流）

移动端

手机屏幕小， 网页宽度多数为100%， 是适配手机屏幕宽度

移动端则基本不需要考虑兼容性问题，放心大胆使用CSS新特性

2.分辨率

物理分辨率:硬件所支持的,屏幕出厂就设定无法修改

逻辑分辨率:软件可以达到的

在PC端1逻辑分辨率=1物理分辨率,比例是相同的.

在移动端1逻辑分辨率=2物理分辨率等,根据不同型号手机,比例有所不同.不过移动端主流设备分辨率还是1逻辑分辨率等于2物理分辨率.

分辨率越大,清晰度越高.

3.百分比布局[流式布局 不常用]

效果:宽度自适应,高度固定

4.flex布局[弹性布局 重点]

作用:

1.灵活控制盒子的布局方式,避免脱离标准流.

2.方便结构式布局.

使用方法:在父级盒子添加display:flex即可

组成:弹性容器+弹性盒子+主轴+侧轴.

3.主轴对齐方式

对齐方式属性:justify-content

.box{
            width: 800px;
            height: 220px;
            margin: 200px auto;
            display: flex;
            justify-content: space-between;
        }
        .box div{
            width: 220px;
            height: 220px;
            background-color: aquamarine;
        }
        .box div:nth-child(2){
            background-color: blueviolet;
        }

 4.侧轴对齐方式

对齐方式属性:align-items[添加在弹性容器中--父级盒子]

                       align-self控制某个盒子的侧轴对齐方式[添加在弹性盒子中--子级盒子]

重点记忆align-items:center

*利用主轴和侧轴实现盒子居中:

先给父级盒子添加display:flex,将盒子转换为弹性容器.

然后将弹性盒子的主轴以及侧轴分别居中,也就是justify-content:center和align-items:center.然后就可以实现盒子的居中了.

 5.flex伸缩比

属性:flex

取值:数值(正数)

.box{
            width: 800px;
            height: 150px;
            background-color: blueviolet;
            margin: 200px auto;
            display: flex;
        }
        .box>div{
            flex: 1;
            background-color: aquamarine;
            margin-left: 10px;
        }

占的是父盒子的宽度,将父盒子宽度分成几等份.

 *圣杯布局(flex布局)[重点]

两边固定中间自适应,两边设置固定宽高,中间设置flex:1,让中间的占满剩下的宽.