几种常见的css布局方式

html-css022

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

1、首先设置要了解网页页面布局框架结构,设定宽高和边框,以及设置好class或者ID名称。

2、打开Dreamweaver CS5,点击新建HTML。

3、根据设定的网页布局,设置div网页结构。

4、添加div标签的class名称,这里也可以使用ID类名。

5、 编辑CSS控制div块的宽高和背景。

6、 这样就可以让子元素置于底部。

左右定宽度,分布向两边浮动,中间如果没设置溢出处理默认宽度是100%,设置后就会截取两边的宽度从而实现中间自适应

左右两边定好宽度后,主要用flex:1来占满剩余空间从而实现中间自适应

使用table不仅可以在实现页面自适应的部分,还可以用table-cell来实现对行锤值对齐

4.float+margin实现三列布局

把左右两边的宽度固定然后左右浮动,中间自适应部分用margin:0 和 左右两边的宽度

给左右两边设置相对定位,并分别设置距离页面距离为0,中间自适应部分通过margin:0 左右宽度 来自适应

主要是使用grid-template-columns这一属性时中间的盒子自适应,这一属性定位列属性,比如要定义三列就写3个数值,每个数值代表每一个项目的宽度,auto是自适应占满剩余空间