CSS布局:float、position、flex、grid
1个回答
展开全部
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辅助已经足够应对所有问题。
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辅助已经足够应对所有问题。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询