四种方式
比如想要做这样一个布局,有哪几种方式。
最简单、最快捷的方式。
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布局方式有很多,从远古时代的table(表格)布局-->float(浮动)布局-->position(定位)布局-->flex(弹性)布局-->grid(网格)布局(还未正式推出),下面咱们简单谈一谈各种布局的用法及其优缺点。
table布局就是将网站当做一个表单来做,这里不做展开,因为现在基本不这么用了。
float:浮动。float刚开始并不是为了用来网页布局,而是用来解决图文信息中图片与文本冲突的问题的。
如下图:
这种常见的图文效果,没有float之前是很难达到的。有了float之后只需要加一个float:left,轻松搞定。
‘咦,如果float可以处理图文的问题,那用来布局不也可以吗?’,后来有人用float试着用于网页布局,还真的可以。
网页中最常见的布局如下:
用float做
比table布局要方便不少,不过float随之而来的带来了 “浮动高度塌陷”的问题:
如果浮动元素的父元素没有设定高度,当其子元素浮动后,父元素就因为内部没有子元素撑起从而高度变为0;
引申:网页元素一般分为 普通流,浮动流,定位流。其中普通流和浮动流在一个层级上,定位流>浮动流>普通流。
之后为了解决这个问题搞出来一系列清除“浮动高度塌陷”的策略方法,非常麻烦。
position:定位;顾名思义,就是确定位置。position同样可以用做网页布局。
同样的效果
不过position需要计算每一个元素的位置,而且这个位置是定死的,略显繁琐和笨重。实际上position我平常只用来定位一些小的标签之类的东西。position优点在于不像float那样会影响其他元素。
关键点:子绝父相。需要定位的元素用absolute绝对定位,其父元素用 relative相对定位。还有fixed固定定位,他是以html为父元素的定位。
flex:弹性;弹性布局很好的解决了float和position的问题,非常好用。
使用方法:
在父元素使用 display:flex确定弹性作用的范围。
然后
justify-content:center(space-around,space-between等);水平方向布局;
align-items:center(flex-start,flex-end等)垂直方向布局;
不过flex不兼容IE8及以下的浏览器。
大部分情况下flex布局已经能满足需要,不过flex只能用作一维布局,也就是说,flex一次只能作用于一条线。如果想要进行二维布局,必须翻转坐标二次弹性,这样会显得不够优雅,这时候grid(网格)布局就发展起来了。
grid布局用法和flex相似,但是作用于二维布局。
先在父元素使用 display:grid确定网格作用范围;
然后
grid-template-columns: 40px 50px auto 50px 40px(行)
grid-template-rows: 25% 100px auto(列)
等等属性,这里只简单介绍,大家了解有这个东西就行。
在现实工作用,以flex为主,position辅助已经足够应对所有问题。
因为父元素div设置了margin为8,修改为:
div{
margin:0
}
fixed:表示固定定位,相对移动的坐标是视图(屏幕内的网页窗口)本身。
由于视图本身是固定的,不会随浏览器窗口的滚动条滚动而变化,除非在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。
扩展资料:
层模型:
层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作。
层模型有三种形式:
1、绝对定位(position:absolute)
2、相对定位(position:relative)
3、固定定位(position:fixed)
绝对定位:
为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
相对定位:
如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。
相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。