常见的css布局(浅谈css网页的几种布局)

2024-03-28 18:40:02 :49

常见的css布局(浅谈css网页的几种布局)

大家好,今天小编来为大家解答以下的问题,关于常见的css布局,浅谈css网页的几种布局这个很多人还不知道,现在让我们一起来看看吧!

本文目录

浅谈css网页的几种布局

布局的话,现在基本都不用table了,所以当前主流布局都是浮动float布局,display:inline-block行内块元素布局,display:flex布局(得做ie的兼容,手机端贼好用),有些特殊的用position定位布局。

网站中常见的网页布局类型及应用范围

最简单的就是用表格来布局了

现在主流的是DIV+CSS布局

当然,以前还变态的使用空的GIF图片来布局

至于应用范围没什么一定,也没什么特定。看你熟练的程度。

表格布局没什么技术含量,但它最兼容,操作简单上手

DIV+CSS布局技术含量高,移植性强,表现力超强,但兼容性存大一定问题。

几种常见的css布局方式

四种方式

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

最简单、最快捷的方式。

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的值也要注意计算哦~

浅谈css网页的几种布局的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于浅谈css网页的几种布局、浅谈css网页的几种布局的信息别忘了在本站进行查找哦。

常见的css布局(浅谈css网页的几种布局)

本文编辑:admin
Copyright © 2022 All Rights Reserved 威海上格软件有限公司 版权所有

鲁ICP备20007704号

Thanks for visiting my site.