- 七种实现左侧固定,右侧自适应两栏布局的方法
- 圣杯布局
- 双飞翼布局
- 圣杯布局和双飞翼布局
- CSS深入理解流体特性和BFC特性下多栏自适应布局
- 块状元素的流体特性。
- 图片宽度一直
width:100%
,结果随着margin
,padding
,border
的出现,其可用宽度自动跟着减小,形成了自适应效果。就像放在容器中的水流一样,内容区域会随着margin
,padding
,border
的出现自动填满剩余空间(box-sizing:border box;感觉) - 然而,利用块状元素流体特性实现的自适应布局有个不足,就是,我们需要知道浮动或绝对定位内容的尺寸。然后,流体内容才能有对应的
margin
或padding
或border
值进行位置修正。 - 此时,我们可以利用块状元素的BFC特定实现更强大更智能的多栏自适应布局
元素的BFC特性与自适应布局
1. BFC元素简介与基本表现
BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。BFC元素特性表现原则就是,内部子元素再怎么翻江倒海,翻云覆雨都不会影响外部的元素。
什么时候会触发BFC呢?常见的如下:
float
的值不为none
。overflow
的值为auto
,scroll
或hidden
。display
的值为table-cell
,table-caption
,inline-block
中的任何一个。position
的值不为relative
和static
2. BFC自适应布局模块间的间距。
- 我们可以使用浮动元素的
margin-right
或者padding-right
轻松实现间距效果。间距是20
像素 - 3. 与纯流体特性布局的优势
- BFC自适应布局优势我总结了下面2点:
- 自适应内容由于封闭,更健壮,容错性强。比方说,内部
clear:both
不会与兄弟float
产生矛盾。而纯流体布局,clear:both
会让后面内容无法和float
元素在一个水平上,产生布局问题。 - 自适应内容自动填满浮动以为区域,无需关心浮动元素宽度,可以整站大规模应用。而纯流体布局,需要大小不确定的
margin
/padding
等值撑开合适间距,无法CSS组件化。
- 自适应内容由于封闭,更健壮,容错性强。比方说,内部
- 4. BFC元素家族与自适应布局面面观
理论上,任何BFC元素和浮动搞基的时候,都可以实现自动填充的自适应布局。但是,由于绝大多数的触发BFC的属性自身有一些古怪的特性,所以,实际操作的时候,能兼顾流体特性和BFC特性来实现无敌自适应布局的属性并不多。下面我们牵驴遛马一个一个瞅瞅(类似行为仅出1个代表示意,你懂的,如
float:left/right
):- float:left 浮动元素本身BFC化,然而浮动元素有破坏性和包裹性,失去了元素本身的流体自适应性,因此,无法用来实现自动填满容器的自适应布局。不过,其因兼容性还算良好,与堆积木这种现实认知匹配,上手简单,因此在旧时代被大肆使用,也就是常说的“浮动布局”,也算阴差阳错开创了自己的一套布局。
- position:absolute 这个脱离文档流有些严重,过于清高,不跟普通小伙伴玩耍,我就不说什么了……
- overflow:hidden 这个超棒的哦!不像浮动和绝对定位,玩得有点过。也就是溢出剪裁什么的,本身还是个很普通的元素。因此,块状元素的流体特性保存相当完好,附上BFC的独立区域特性,可谓如虎添翼,宇宙无敌!哈无诶瓦(However), 就跟清除浮动:
.clearfix { overflow: hidden; _zoom: 1; }
一样。由于很多场景我们是不能
overflow:hidden
的,因此,无法作为一个通用CSS类整站大规模使用。因此,float+overflow
的自适应布局,我们可以在局部(你确定不会有什么被剪裁的情况下)很happy地使用。 - display:inline-block CSS届最伟大的声明之一,但是,在这里,就有些捉襟见肘了。
display:inline-block
会让元素尺寸包裹收缩,完全就不是我们想要的block
水平的流动特性。唉,只能是一声叹气一枪毙掉的命!然而,峰回路转,世事难料。大家应该知道,IE6/IE7浏览器下,block
水平的元素设置display:inline-block
元素还是block
水平,也就是还是会自适应容器的可用宽度显示。于是,我们就阴差阳错得到一个比overflow:hidden
更牛逼的声明,即BFC特性加身,又流体特性保留。.float-left { float: left; } .bfc-content { display: inline-block; }
当然,
*zoom: 1
也是类似效果,不过只适用于低级的IE浏览器,如IE7~ - display:table-cell 让元素表现得像单元格一样,IE8+以上浏览器才支持。跟
display:inline-block
一样,会跟随内部元素的宽度显示,看样子也是不合适的命。但是,单元格有个非常神奇的特性,就是你宽度值设置地再大,大到西伯利亚,实际宽度也不会超过表格容器的宽度。
因此,如果我们把display:table-cell
这个BFC元素宽度设置很大,比方说3000像素。那其实就跟block
水平元素自动适应容器空间效果一模一样了。除非你的容器宽度超过3000像素,实际上,一般web页面不会有3000像素宽的模块的。所以,要是你实在不放心,设个9999
像素值好了!.float-left { float: left; } .bfc-content { display: table-cell; width: 9999px; }
看上去,好像还不错。但是,还是有两点制约,一是IE8+以上浏览器兼容,有些苦逼的团队还要管IE6;二是应付连续英文字符换行有些吃力(可以嵌套
table-layout:fixed
解决)。但是,总体来看,适用的场景要比overflow:hidden
广博很多。 - display:table-row 对
width
无感,无法自适应剩余容器空间。 - display:table-caption 一无是处……还有其他声明也都是一无是处,我就不全部展开了……
总结:我们对BFC声明家族大致过了一遍,能担任自适应布局重任的也就是:
overflow:auto/hidden
IE7+display:inline-block
IE6/IE7display:table-cell
IE8+
由于overflow有剪裁和出现滚动条等隐患,不适合作为整站通用类,于是,最后,类似清除浮动的通用类语句:
.clearfix { *zoom: 1; } .clearfix:after { content: ‘‘; display: table; clear: both; }
两栏或多栏自适应布局的通用类语句是(
block
水平标签,需配合浮动):.cell { display: table-cell; width: 9999px; *display: inline-block; *width: auto; }
这就是zxx.lib.cssCSS样式库中
.cell
的由来!当然,由于和浮动元素合作,清除浮动还是要的,于是,就有了
.fix
+.l/.r
+.cell
的无敌组合,可以多栏,也可以无限嵌套。如果是局部,且确认安全;或有连续英文字符换行的隐患,你也可以使用
.fix
+.l/.r
+.ovh
的无敌组合,可以多栏,也可以无限嵌套。 - 三种三栏网页宽度自适应布局方法
原文地址:https://www.cnblogs.com/xxh-2014/p/9031265.html