几种常见的css布局方式

html-css014

几种常见的css布局方式,第1张

四种方式

比如想要做这样一个布局,有哪几种方式。

最简单、最快捷的方式。

element-ui提供的布局容器,el-header头标签,有height属性。el-aside左侧边栏标签,有width属性。el-footer底部标签,有height属性。其他样式可以通过class进行控制。

相对简单的方式。

利用el-col将每行分为24等分的特性,进行布局。其他属性通过class进行控制。

原生css布局的方式,float布局,也是最基础的方式。

将aside向左浮动,固定好宽度。main向右浮动,注意固定好宽度是 100vw - 左侧边栏的宽度 ,注意高度是 100vh - 上下header和footer高度之和 。footer也由于浮动而被挤到到最下面,这边指定float为left、right都是可以的,都可以达到浮动到最下方的效果。

原生css布局的方式,position布局,也是最基础的方式。

sideBar设置好宽度,利用绝对定位将固定在最左边(由于是绝对定位,所以注意已经脱离了文档流)。main设置margin-left为侧边栏宽度,这样就可以使得main不会被遮挡。footer设置为固定定位,bottom为0固定在底部。其他height、width的值也要注意计算哦~

要native另做一个同步功能了。若native开启缓存,web静态资源非覆盖式发布,既能享受类似本地的快感,还能做到及时更新。

补充:

在静态服务器新建一个文本或json文件,里面写好版本号,版本号任意,要更新的时候就去改这个版本号。

native每次或定时去拉这个文件,并将版本号存在本地,以后拉取时比对本地版本号,有变化则重新拉取静态资源到本地。

更好的方法:

静态文件打包时生成改动文件映射表,这个表只有已经改动的文件名称或地址,native每次拉取这个映射表,发现有改动文件则只拉取改动文件。