今天来谈谈CSS有哪些布局
六种布局方式总结:圣杯布局、双飞翼布局、Flex 布局、绝对定位布局、表格布局、网格布局。
1、圣杯布局是指布局从上到下分为header、container、 footer, 然后container部分定为三栏布局。这种布局方式同样分为header、container、 footer。 圣杯布局的缺陷在于center 是在container 的padding中的,因此宽度小的时候会出现混乱。
2、双飞翼布局给center部分包裹了一一个main 通过设置margin主动地把页面撑开。
3、Flex布局是由CSS3提供的一种方便的布局方式。
4、绝对定位布局是给container 设置position: relative 和overflow: hidden,因为绝对定位的元素的参照物为第一一个postion不为static的祖先元素。left 向左浮动,right向右浮动。center 使用绝对定位,通过设置left和right并把两边撑开。center 设置top: 0和bottom: 0使其高度撑开。
5、表格布局的好处是能使三栏的高度统一。
6、网格布局可能是最强大的布局方式了,使用起来极其方便,但就目前而言,兼容性不好,网格布局,可以将页面分割成多个区域,或者用来定义内部元素的大小,位置,图层关系。
本期结束,我们下期再见!
点我进群 一起学习交流!(群里有许多的学习资料,我做过的一些网页我都上传在群里了,需要的直接下载就可以了)