一、块状元素的流体特性与自适应布局

块状元素像放在容器中的水流一样,内容区域会随着marginpaddingborder的出现自动填满剩余空间,这就是块状元素的流体特性。

来一个小实验:

div {

margin-left:100px;

width:100%;

}

此时发现,左侧永远100px留白,而div随着容器宽度变化而自适应变化了

我们需要好好利用左侧100px的留白间距,岂不是就可以实现两栏自适应效果?

为了不影响原本的流体特性,我们可以使用破坏性属性,如浮动(float:left),或者绝对定位(position:absolute)。

然而,利用块状元素流体特性实现的自适应布局有个不足,就是,我们需要知道浮动或绝对定位内容的尺寸

然后,流体内容才能有对应的marginpaddingborder值进行位置修正。

于是,问题来了,我们没法单纯使用一个公用的类名,类似.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自适应布局优势与纯流体特性布局相比的优势

  1. 自适应内容由于封闭,更健壮,容错性强。比方说,内部clear:both不会与兄弟float产生矛盾。而纯流体布局,clear:both会让后面内容无法和float元素在一个水平上,产生布局问题。
  2. 自适应内容自动填满浮动以为区域,无需关心浮动元素宽度,可以整站大规模应用。而纯流体布局,需要大小不确定的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声明家族大致过了一遍,能担任自适应布局重任的也就是:

  1. overflow:auto/hidden IE7及以上
  2. display:inline-block IE6/IE7
  3. display:table-cell IE8及以上

参考自:http://www.zhangxinxu.com/wordpress/?p=4588

CSS深入理解流体特性和BFC特性下多栏自适应布局的更多相关文章

  1. 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

    这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...

  2. BFC特性下多栏自适应布局

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...

  3. css多栏自适应布局

    css多栏自适应布局还是需要总结一下的,都是基本功. 一般使用position属性布局,或者用float属性布局,也可以使用display属性. 看资料说position适合首页布局,因为首页内容往往 ...

  4. css 多栏自适应布局

    在页面重构中,我们经常会需要实现多栏布局,例如n栏固定宽度 + m栏自适应宽度的组合,绝对布局+padding+百分比宽度是容易想到的比较暴力的解决方法,但是作为未来的"工程师", ...

  5. 你知道BFC、IFC、FFC、GFC及多栏自适应布局吗?

    FC(Formatting Context)格式化内容,常见的FC有BFC.IFC.FFC.GFC四种类型,BFC和IFC是W3C CSS2.1规范提出的概念,FFC和GFC是W3C CSS3规范提出 ...

  6. css实现等高布局 两栏自适应布局 三栏自适应布局

    等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...

  7. 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)

    来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...

  8. css布局 - 两栏自适应布局的几种实现方法汇总

    这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需: 整理了几种实现方法,当然,风骚的代码不止这几种能实现,欢迎各位的补充. 方法汇总目录 简 ...

  9. css实现三栏自适应布局(两边固定,中间自适应)以及优缺点

    方法一:绝对定位(absolute + margin) 原理:给左右两边的元素设置absolute,这样左右两边的元素脱离标准文档流的控制,中间的元素自然会上来,然后给中间的元素设置margin留出左 ...

随机推荐

  1. 如何安装并且使用jmeter进行简单的性能测试

    Jmeter  介绍 Jmeter  是一款使用Java开发的,开源免费的,测试工具, 主要用来做功能测试和性能测试(压力测试/负载测试). 而且用Jmeter 来测试 Restful API, 非常 ...

  2. 二分- Count on Canton

    题目: 代码: 是一个蛇形数列,把题目上的那组数倒过来看成一个正三角形. 第一行有1个数,1-2行有三个数,1-4行有6个数,1-4行有10个数,1-5行有15个数..... 现在要求第n个数是多少, ...

  3. Java精确测量代码运行时间

    Java精确测量代码运行时间: --------------- long startTime = System.nanoTime(); //開始時間 for(int i = 0;i<10000; ...

  4. 七种经典排序算法及Java实现

    排序算法稳定性表示两个值相同的元素在排序前后是否有位置变化.如果前后位置变化,则排序算法是不稳定的,否则是稳定的.稳定性的定义符合常理,两个值相同的元素无需再次交换位置,交换位置是做了一次无用功. 下 ...

  5. [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 ...

  6. [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 ...

  7. Kubernetes 笔记 07 豌豆荚之旅(二)

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. Hi,大家好, ...

  8. Linux篇---Vi的使用

    一.前述 Vi类似记事本,所以用好记事本对编程效率有很大得影响,有着事半功倍的效率. 二.具体操作  1.打开文件vim /path/to/somefilevim +# :打开文件,并定位于第#行 v ...

  9. kNN算法:K最近邻(kNN,k-NearestNeighbor)分类算法

    一.KNN算法概述 邻近算法,或者说K最近邻(kNN,k-NearestNeighbor)分类算法是数据挖掘分类技术中最简单的方法之一.所谓K最近邻,就是k个最近的邻居的意思,说的是每个样本都可以用它 ...

  10. RAID磁盘阵列是什么(一看就懂)

    在单机时代,采用单块磁盘进行数据存储和读写的方式,由于寻址和读写的时间消耗,导致I/O性能非常低,且存储容量还会受到限制.另外,单块磁盘极其容易出现物理故障,经常导致数据的丢失.因此大家就在想,有没有 ...