网页布局总结

最新推荐文章于 2020-05-06 09:39:01 发布

绝望的东北大米

最新推荐文章于 2020-05-06 09:39:01 发布

阅读量364

点赞数

文章标签： css css3 html html5

本文链接：https://blog.csdn.net/u013386919/article/details/104602707

版权

常用的网页布局包括：

网格布局
flex弹性布局
流式布局
等比缩放布局（rem布局）
响应式布局

一、网格布局

1.简介

将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。

2.应用场景

Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。

二、flex弹性布局

1.简介

Flex容器：采用 Flex 布局的元素的父元素；

Flex项目：采用 Flex 布局的元素的父元素的子元素；

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

2.特点

默认情况下，弹性盒子中的子元素都是左右排列的
主轴是水平方向时，宽高不写的时候，高度继承父容器，宽度由内容决定
当子项的总宽度/高度大于父容器时，子元素宽度/高度会适应父元素，进行收缩，弹性优先级高于子元素宽高（子元素内部的行高不受弹性影响）
当子项的内容已经达到父容器最小宽度，会出现溢出的现象
注意：当使用了弹性布局，那么在CSS里的float、clear和vertical-align就会失效
在弹性盒中，margin：auto；会让上下左右都生效

3.应用场景

flex常用于做一维布局，即一行或一列。

三、流式布局

1.简介

流式布局，也叫做百分比布局。结构中常需要用到flex布局。

2.特点

高度定死，宽度自适应
文字大小行高间距固定，不会随着设备大小的改变而变化
同一行的块元素间距随设备变化而增大或减小
图片采用等比缩放，避免被拉伸，宽度100%，高度自适应

3.应用场景

应用于移动端布局。

4.优缺点

优点：屏幕变大时，可以显示更多内容

缺点：对于大屏幕来说，用户体验不是很好，比例会不协调

四、等比缩放布局

1.简介

也叫rem布局，利用rem相对单位，使元素随着屏幕的改变而变化。

rem : 是一个相对单位，1rem等于根元素（html)的font-size值。

2.原理

页面中的元素采用rem作为尺寸或者间距的单位。

动态改变html标签的font-size大小，这样就可以适配不同的设备进行等比缩放。

3.特点

所有元素都动态等比缩放。

4.应用场景

应用于移动端。

5.优缺点

优点：无论设备屏幕怎样变化，元素布局不变

缺点：显示的内容固定

五、响应式布局

1.简介

用同一套代码，去适配不同的设备。

2.原理

利用媒体查询（media queries），针对不同的媒体类型定义不同的样式，从而实现响应式布局。也可以针对不同的分辨率设置不同的样式。

1024分辨率以上：PC端
1024 ~ 768 : pad pro
768 ~ 450 : pad mini , mobile 横屏
450分辨率以下： mobile 竖屏

 /* 正常的样式 , 针对PC端的 */
    100行CSS

 /* 针对pad pro  */
    @media all and (max-width:1024px){
        50行CSS
    }

 /* 针对pad mini 和 mobile 横屏  */
    @media all and (max-width:768px){
        50行CSS
    }

 /* 针对 mobile 竖屏  */
    @media all and (max-width:450px){
        50行CSS
    }