三栏布局一般指的是页面中一共有三栏, 左右两栏宽度固定,中间自适应的布局 ,三栏布局的具体实现:
利用浮动和负边距来实现。父级元素设置左右的 padding,三列均设置向左浮动,中间一列放在最前面,宽度设置为父级元素的宽度,因此后面两列都被挤到了下一行,通过设置 margin 负值将其移动到上一行,再利用相对定位,定位到两边。
实现方式:左右元素浮动,中间元素左右marign值撑开两边距离。
例:
此时看似没有问题,可是如果中间内容过多,超出左右两边高度,我们将看到 文字环绕 问题,如下如所示。
解决办法:
补充flex左右布局,左边固定,右边自适应,并且两列等高自适应
六种布局方式总结:圣杯布局、双飞翼布局、Flex布局、绝对定位布局、表格布局、网格布局。
圣杯布局是指布局从上到下分为header、container、footer,然后container部分定为三栏布局。
基础HTML:
基础CSS:
对于container,给它设置一个 overflow: hidden 使其成为一个 BFC ,使三栏浮动,并相对定位,给左右两个容器设置 200px 的宽度中间的容器设置 100% 的宽度。
此时 left 和 right 被相对于父元素 container 宽度的 100% 的 center 挤到下面。
BFC 的作用:
步骤:
这时,圣杯布局就完成了,但是在拖到很小的时候,布局会乱,以下是最终样式。
这种布局方式同样分为header、container、footer。圣杯布局的缺陷在于 center 是在 container 的 padding 中的,因此宽度小的时候会出现混乱。
双飞翼布局给 center 部分包裹了一个 main 通过设置 margin 主动地把页面撑开。
基础HTML:
步骤 1 和 2 同圣杯布局
区别:
第三步:
给 main 设置 margin: 0 200px ,同时设置 overflow: hidden 使其成为一个 BFC
这时窗口宽度过小时就不会出现混乱的情况了,关键点在于内容部分是包裹在 main 中。
以下是最终样式:
Flex布局是由CSS3提供的一种方便的布局方式。
基础HTML:
步骤:
flex-shrink :
定义项目的缩小比例,默认为1,如果空间不足则项目缩小,如果有一项为0,其他为1,当空间不足时,前者不缩小。
可以看到,flex 布局是一种极其灵活的布局方式。
以下是最终样式:
基础HTML:
步骤:
这种方式的缺点是依赖于left 和 right 的高度,如果两边栏的高度不够,中间的内容区域的高度也会被压缩。
表格布局的好处是能使三栏的高度统一。
基础HTML:
步骤:
这种布局方式能使得三栏的高度是统一的,但不能使center放在最前面得到最先渲染。
网格布局可能是最强大的布局方式了,使用起来极其方便,但目前而言,兼容性并不好。网格布局,可以将页面分割成多个区域,或者用来定义内部元素的大小,位置,图层关系。
基础HTML:
步骤:
仅仅四条样式命令就能完成三栏布局,可见网格布局之强大