CSS深入理解流体特性和BFC特性下多栏自适应布局
一、块状元素的流体特性与自适应布局
块状元素像放在容器中的水流一样,内容区域会随着margin
, padding
, border
的出现自动填满剩余空间,这就是块状元素的流体特性。
来一个小实验:
div {
margin-left:100px;
width:100%;
}
此时发现,左侧永远100px留白,而div随着容器宽度变化而自适应变化了
我们需要好好利用左侧100px的留白间距,岂不是就可以实现两栏自适应效果?
为了不影响原本的流体特性,我们可以使用破坏性属性,如浮动(float:left),或者绝对定位(position:absolute)。
然而,利用块状元素流体特性实现的自适应布局有个不足,就是,我们需要知道浮动或绝对定位内容的尺寸。
然后,流体内容才能有对应的margin
或padding
或border
值进行位置修正。
于是,问题来了,我们没法单纯使用一个公用的类名,类似.clearfix
这样,整站通用。因为不同自适应场景的留白距离是不一样的。
此时,我们可以利用块状元素的BFC实现更强大更智能的多栏自适应布局(本文重点)
二、元素的BFC特性与自适应布局
BFC特性很多,参考我之前的文章:深入理解BFC
而我们这里,只关心一个,和float
元素做相邻兄弟时候的表现。
流体特性div
, 当其和浮动元素当兄弟的时候,是覆盖的关系(可以脑补下文字环绕图片效果)。
如果给div overflow:hidden,触发bfc
普通流体元素BFC后,为了和浮动元素不产生任何交集,顺着浮动边缘形成自己的封闭上下文
不与浮动交集,自动退避浮动元素宽度的距离,但,本身作为普通元素的流动性依然存在
2. BFC自适应布局模块间的间距
一般而言,我们需要一点间距。我们的第一反应就是margin
div设置margin-left:10px 但是好像不起作用 ?
这里的margin并不是无效,而是值不够大
当你设置margin-left值大于浮动元素宽度,则生效
但是这样又回到了流体布局,毫无成长
但是,我们可以使用浮动元素的margin-right
或者padding-right
轻松实现间距效果
还可以使用BFC元素的padding-left
撑开间距
3. BFC自适应布局优势与纯流体特性布局相比的优势
- 自适应内容由于封闭,更健壮,容错性强。比方说,内部
clear:both
不会与兄弟float
产生矛盾。而纯流体布局,clear:both
会让后面内容无法和float
元素在一个水平上,产生布局问题。 - 自适应内容自动填满浮动以为区域,无需关心浮动元素宽度,可以整站大规模应用。而纯流体布局,需要大小不确定的
margin
/padding
等值撑开合适间距,无法CSS组件化。
4. BFC元素家族与自适应布局面面观
理论上,任何BFC元素和浮动搭配,都可以实现自动填充的自适应布局。
但是,由于绝大多数的触发BFC的属性自身有一些古怪的特性,所以,实际操作的时候,能兼顾流体特性和BFC特性来实现无敌自适应布局的属性并不多。
下面举一些例子:
对于,浮动(float),绝对定位(position:absolute)以及inline-block的包裹性我称之为“主动包裹”,其标签宽度会收缩至内部元素大小;
而overflow与zoom,我称之为“被动包裹”。
float:left 浮动元素本身BFC化,然而浮动元素有破坏性和包裹性,失去了元素本身的流体自适应性,因此,无法用来实现自动填满容器的自适应布局。不过,其因兼容性还算良好,与堆积木这种现实认知匹配,上手简单,因此在旧时代被大肆使用,也就是常说的“浮动布局”,也算阴差阳错开创了自己的一套布局(圣杯布局以及双飞燕布局(栅格))。
position:absolute 这个脱离文档流有些严重,不宜使用
overflow:hidden 也就是溢出剪裁什么的,本身还是个很普通的元素。因此,块状元素的流体特性保存相当完好,附上BFC的独立区域特性,可谓如虎添翼,一样。由于很多场景我们是不能overflow:hidden
的,因此,无法作为一个通用CSS类整站大规模使用。因此,float+overflow
的自适应布局,我们可以在局部(你确定不会有什么被剪裁的情况下)很happy地使用(IE6有bug不行)。
display:inline-block CSS届最伟大的声明之一,但是,在这里,就有些捉襟见肘了。display:inline-block
会让元素尺寸包裹收缩,完全就不是我们想要的block
水平的流动特性。
大家应该知道,IE6/IE7浏览器下,block
水平的元素设置display:inline-block
元素还是block
水平,也就是还是会自适应容器的可用宽度显示。于是,我们就阴差阳错得到一个比overflow:hidden
更牛逼的声明,即BFC特性加身,又流体特性保留。
当然,*zoom: 1
也是类似效果,比例缩放,跟CSS3中transform:scale差不多;不过只适用于低级的IE浏览器,IE8以下可以清除浮动。(haslayout详解)
display:table-cell 让元素表现得像单元格一样,IE8及以上以上浏览器才支持。跟display:inline-block
一样,会跟随内部元素的宽度显示,看样子也是不合适的命。但是,单元格有个非常神奇的特性,就是你宽度值设置地再大,大到西伯利亚,实际宽度也不会超过表格容器的宽度。
因此,如果我们把display:table-cell
这个BFC元素宽度设置很大,比方说3000像素。那其实就跟block
水平元素自动适应容器空间效果一模一样了。除非你的容器宽度超过3000像素,实际上,一般web页面不会有3000像素宽的模块的。
display:table-row 对width
无感,无法自适应剩余容器空间。
display:table-caption 一无是处……还有其他声明也都是一无是处,我就不全部展开了……
总结:我们对BFC声明家族大致过了一遍,能担任自适应布局重任的也就是:
overflow:auto/hidden
IE7及以上display:inline-block
IE6/IE7display:table-cell
IE8及以上
参考自:http://www.zhangxinxu.com/wordpress/?p=4588
CSS深入理解流体特性和BFC特性下多栏自适应布局的更多相关文章
- 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局
这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...
- BFC特性下多栏自适应布局
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...
- css多栏自适应布局
css多栏自适应布局还是需要总结一下的,都是基本功. 一般使用position属性布局,或者用float属性布局,也可以使用display属性. 看资料说position适合首页布局,因为首页内容往往 ...
- css 多栏自适应布局
在页面重构中,我们经常会需要实现多栏布局,例如n栏固定宽度 + m栏自适应宽度的组合,绝对布局+padding+百分比宽度是容易想到的比较暴力的解决方法,但是作为未来的"工程师", ...
- 你知道BFC、IFC、FFC、GFC及多栏自适应布局吗?
FC(Formatting Context)格式化内容,常见的FC有BFC.IFC.FFC.GFC四种类型,BFC和IFC是W3C CSS2.1规范提出的概念,FFC和GFC是W3C CSS3规范提出 ...
- css实现等高布局 两栏自适应布局 三栏自适应布局
等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...
- 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)
来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...
- css布局 - 两栏自适应布局的几种实现方法汇总
这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需: 整理了几种实现方法,当然,风骚的代码不止这几种能实现,欢迎各位的补充. 方法汇总目录 简 ...
- css实现三栏自适应布局(两边固定,中间自适应)以及优缺点
方法一:绝对定位(absolute + margin) 原理:给左右两边的元素设置absolute,这样左右两边的元素脱离标准文档流的控制,中间的元素自然会上来,然后给中间的元素设置margin留出左 ...
随机推荐
- 如何安装并且使用jmeter进行简单的性能测试
Jmeter 介绍 Jmeter 是一款使用Java开发的,开源免费的,测试工具, 主要用来做功能测试和性能测试(压力测试/负载测试). 而且用Jmeter 来测试 Restful API, 非常 ...
- 二分- Count on Canton
题目: 代码: 是一个蛇形数列,把题目上的那组数倒过来看成一个正三角形. 第一行有1个数,1-2行有三个数,1-4行有6个数,1-4行有10个数,1-5行有15个数..... 现在要求第n个数是多少, ...
- Java精确测量代码运行时间
Java精确测量代码运行时间: --------------- long startTime = System.nanoTime(); //開始時間 for(int i = 0;i<10000; ...
- 七种经典排序算法及Java实现
排序算法稳定性表示两个值相同的元素在排序前后是否有位置变化.如果前后位置变化,则排序算法是不稳定的,否则是稳定的.稳定性的定义符合常理,两个值相同的元素无需再次交换位置,交换位置是做了一次无用功. 下 ...
- [Swift]LeetCode129. 求根到叶子节点数字之和 | Sum Root to Leaf Numbers
Given a binary tree containing digits from 0-9 only, each root-to-leaf path could represent a number ...
- [Swift]LeetCode977. 有序数组的平方 | Squares of a Sorted Array
Given an array of integers A sorted in non-decreasing order, return an array of the squares of each ...
- Kubernetes 笔记 07 豌豆荚之旅(二)
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. Hi,大家好, ...
- Linux篇---Vi的使用
一.前述 Vi类似记事本,所以用好记事本对编程效率有很大得影响,有着事半功倍的效率. 二.具体操作 1.打开文件vim /path/to/somefilevim +# :打开文件,并定位于第#行 v ...
- kNN算法:K最近邻(kNN,k-NearestNeighbor)分类算法
一.KNN算法概述 邻近算法,或者说K最近邻(kNN,k-NearestNeighbor)分类算法是数据挖掘分类技术中最简单的方法之一.所谓K最近邻,就是k个最近的邻居的意思,说的是每个样本都可以用它 ...
- RAID磁盘阵列是什么(一看就懂)
在单机时代,采用单块磁盘进行数据存储和读写的方式,由于寻址和读写的时间消耗,导致I/O性能非常低,且存储容量还会受到限制.另外,单块磁盘极其容易出现物理故障,经常导致数据的丢失.因此大家就在想,有没有 ...