css标准流布局(Nomal flow)

一、正常流

这是指西方语言中文本从左向右,从上向下显示,这也是我们熟悉的传统的HTML文档中的文本布局。注意,在非西方的语言中,流方向可能不同。大多数元素都在正常流中,要让一个元素不在正常流中,唯一的方法就是使之成为浮动元素定位元素

标准流中,块级元素独占一行,垂直放置。行级元素在水平方向上一个接一个的排列。

二、垂直外边距的合并问题(margin collapse)

在标准流布局中垂直外边距的合并有两种情况。

1、在标准流中上下两个盒子的外边距回合,即上盒子的margin-bottom会与下盒子的margin-top合并为两者之间的最大值。

css代码:

 div{
width: 100px; height: 100px; }
.top{
margin-bottom: 50px; background: purple; }
.bottom{
margin-top: 20px; background: pink; }

html代码:

 <div class="top"></div>
<div class="bottom"></div>

2、一个盒子包裹另一个盒子,当包裹盒子没有设置border和padding时,里边盒子的设置的上边距不会起作用。

css代码:

 .father{width: 400px; height: 400px; background: pink; }
.son{width: 200px; height: 200px; background: purple; margin-left: 100px; margin-top: 50px; }

html代码:

<div class="father">
<div class="son">
</div>

设置边框后

解释:

对于父块DIV内含子块DIV的情况,就会按另一条CSS惯例来解释了,那就是:对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离。

解决方法:

解决父子DIV中顶部margin cllapse的问题,需要给父div设置:

(1)、边框,当然可以设置边框为透明;

   border:1px solid transparent

border-top:1px solid transparent

(2)、为父DIV添加padding,或者至少添加padding-top;

此外,还可以通过over-flow来解决,给父DIV写入:

   over-flow:hidden;

三、BFC

1、BFC是什么?

在解释 BFC 是什么之前,需要先介绍 Box、Formatting Context的概念。

Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性,决定了这个 Box 的类型。 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子:

block-level box:display 属性为 block, list-item, table 的元素,会生成 block-level box。并且参与 block fomatting context;

inline-level box:display 属性为 inline, inline-block, inline-table 的元素,会生成 inline-level box。并且参与 inline formatting context;

  

Formatting context

  

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

  

CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。

  

BFC 定义

  

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

BFC布局规则:

  • 内部的Box会在垂直方向,一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  • 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float box重叠。
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算BFC的高度时,浮动元素也参与计算

2、哪些元素会生成BFC?

  • 根元素
  • float属性不为none
  • position为absolute或fixed
  • display为inline-block, table-cell, table-caption, flex, inline-flex
  • overflow不为visible

3、BFC的作用及原理

  1. 自适应两栏布局

    body {
    width: 300px;
    position: relative;
    }

    .aside {

    width: 100px;

    height: 150px;

    float: left;

    background: #f66;

    }

    .main {

    height: 200px;

    background: #fcc;

    }

根据BFC布局规则第3条:

每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。

  因此,虽然存在浮动的元素aslide,但main的左边依然会与包含块的左边相接触。

  根据BFC布局规则第四条:

BFC的区域不会与float box重叠。

我们可以通过通过触发main生成BFC, 来实现自适应两栏布局。

.main {

overflow: hidden;

}

  当触发main生成BFC后,这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度,和aside的宽度,自动变窄。

2. 清除内部浮动

代码

<style>
.par {
border: 5px solid #fcc;
width: 300px;
} .child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>

页面

根据BFC布局规则第六条:

计算BFC的高度时,浮动元素也参与计算

  为达到清除内部浮动,我们可以触发par生成BFC,那么par在计算高度时,par内部的浮动元素child也会参与计算。

  代码:

.par {
overflow: hidden;
}

  效果如下:

3. 防止垂直 margin 重叠

代码

<style>
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p>
<p>Hehe</p>
</body>

页面

两个p之间的距离为100px,发送了margin重叠。

  根据BFC布局规则第二条:

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

  我们可以在p外面包裹一层容器,并触发该容器生成一个BFC。那么两个P便不属于同一个BFC,就不会发生margin重叠了。

  代码:

<style>
.wrap {
overflow: hidden;
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>
</body>

页面

总结

其实以上的几个例子都体现了BFC布局规则第五条:

BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。

因为BFC内部的元素和外部的元素绝对不会互相影响,因此, 当BFC外部存在浮动时,它不应该影响BFC内部Box的布局,BFC会通过变窄,而不与浮动有重叠。同样的,当BFC内部有浮动时,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

IFC

IFC(Inline Formatting Contexts)直译为"内联格式化上下文",IFC的line box(线框)高度由其包含行内元素中最高的实际高度计算而来(不受到竖直方向的padding/margin影响)

IFC中的line box一般左右都贴紧整个IFC,但是会因为float元素而扰乱。float元素会位于IFC与与line box之间,使得line box宽度缩短。 同个ifc下的多个line box高度会不同。 IFC中时不可能有块级元素的,当插入块级元素时(如p中插入div)会产生两个匿名块与div分隔开,即产生两个IFC,每个IFC对外表现为块级元素,与div垂直排列。

那么IFC一般有什么用呢?

水平居中:当一个块要在环境中水平居中时,设置其为inline-block则会在外层产生IFC,通过text-align则可以使其水平居中。

垂直居中:创建一个IFC,用其中一个元素撑开父元素的高度,然后设置其vertical-align:middle,其他行内元素则可以在此父元素下垂直居中

GFC

GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文",当为一个元素设置display值为grid的时候,此元素将会获得一个独立的渲染区域,我们可以通过在网格容器(grid container)上定义网格定义行(grid definition rows)和网格定义列(grid definition columns)属性各在网格项目(grid item)上定义网格行(grid row)和网格列(grid columns)为每一个网格项目(grid item)定义位置和空间。

那么GFC有什么用呢,和table又有什么区别呢?首先同样是一个二维的表格,但GridLayout会有更加丰富的属性来控制行列,控制对齐以及更为精细的渲染语义和控制。

FFC

FFC(Flex Formatting Contexts)直译为"自适应格式化上下文",display值为flex或者inline-flex的元素将会生成自适应容器(flex container),可惜这个牛逼的属性只有谷歌和火狐支持,不过在移动端也足够了,至少safari和chrome还是OK的,毕竟这俩在移动端才是王道。

Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素,而设置为 inline-flex 的容器则渲染为一个行内元素。

伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说,Flexbox 定义了伸缩容器内伸缩项目该如何布局。

css布局详解(二)——标准流布局(Nomal flow)的更多相关文章

  1. Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)

    [Android布局学习系列]   1.Android 布局学习之——Layout(布局)详解一   2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)   3.And ...

  2. css布局详解(一)——盒模型

    一.网页布局的几种情况 今天让我们总结一下在css布局的各种情况做一个总结,为我们以后布局网页时做一个参考. 先看一张图,这是去年cssConf大会时阿里的 @寒冬winter 老师放出来的: 如图所 ...

  3. Grid 网格布局详解

    Grid网格布局详解: Grid布局与Flex布局有着一定的相似性,Grid布局是将容器划分成行和列,产生单元格,可以看做是二维布局. 基本概念: 采用网格布局的区域,称为"容器" ...

  4. Android布局详解之一:FrameLayout

      原创文章,如有转载,请注明出处:http://blog.csdn.net/yihui823/article/details/6702273 FrameLayout是最简单的布局了.所有放在布局里的 ...

  5. PopUpWindow使用详解(二)——进阶及答疑

      相关文章:1.<PopUpWindow使用详解(一)——基本使用>2.<PopUpWindow使用详解(二)——进阶及答疑> 上篇为大家基本讲述了有关PopupWindow ...

  6. 【转载】图说C++对象模型:对象内存布局详解

    原文: 图说C++对象模型:对象内存布局详解 正文 回到顶部 0.前言 文章较长,而且内容相对来说比较枯燥,希望对C++对象的内存布局.虚表指针.虚基类指针等有深入了解的朋友可以慢慢看.本文的结论都在 ...

  7. Android View 的绘制流程之 Layout 和 Draw 过程详解 (二)

    View 的绘制系列文章: Android View 的绘制流程之 Measure 过程详解 (一) Android View 绘制流程之 DecorView 与 ViewRootImpl 在上一篇  ...

  8. 弹性盒布局详解(display: flex;)

    弹性盒布局详解 弹性盒介绍 弹性盒的CSS属性 开启弹性盒 弹性容器的CSS属性 flex-direction设置弹性元素在弹性容器中的排列方向 主轴与侧轴(副轴) flex-wrap设置弹性容器空间 ...

  9. pika详解(二) BlockingConnection

    pika详解(二) BlockingConnection   本文链接:https://blog.csdn.net/comprel/article/details/94592348 版权 Blocki ...

随机推荐

  1. SQL从入门到基础–08 Union、Union all及案例

    一.联合结果集 1. 简单的结果集联合: Select FNumber,FName,FAge from T_Employee union select FidCardNumber,FName,FAge ...

  2. Markdown 入门教程

    Markdown 是一种轻量级的标记语言,轻到你甚至可以不叫他语言,因为 Markdown 很容易上手,就是简单地记住几个常用的标签用法就OK了,Markdown 有诸多好处:专注于文字,简单,高效. ...

  3. 东软实训4-JDBC连接数据库

    JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言编写的类和接口 ...

  4. poj1127 Jack Straws(线段相交+并查集)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Jack Straws Time Limit: 1000MS   Memory L ...

  5. js判断当前操作系统

    function validataOS(){ if(navigator.userAgent.indexOf(“Window”)>0){ return ”Windows”; }else if(na ...

  6. 百度云观测优化建议解决方案:未设置max-age或expires

    网页的缓存是由 HTTP 消息头中的 “Cache-control” 来控制的,常见的取值有 private.no-cache.max-age.must-revalidate 等,默认为private ...

  7. 浅析JavaScript和PHP中三个等号(===)和两个等号(==)的区别

    先做个简单的介绍,让先有个直观的认识 == equality 等同 === identity 恒等 == 两边值类型不同的时候,要先进行类型转换,再比较. === 不做类型转换,类型不同的一定不等. ...

  8. Python入门-----Windows安装

    摘要:Python,windows安装 1.进入python的官方网站下载:https://www.python.org 点击Download,选择windows版本:

  9. IIC 概述之用IO模拟

    最近做的一个项目,是基于IIC总线通信的传感器系统.由于另外一个传感器使用的是类IIC协议,而不是标准IIC,所以MCU不能与其通信,最后没有办法,只有通过I/O口模拟的方式实现IIC的总线通信.具体 ...

  10. 更新项目经常使用的Linux命令

    在公司经常在服务器上更新项目,总结了自己经常使用的命令: 1.删除:rm -rf 文件名2.复制:copy 文件 目标地址3.压缩:zip -r 压缩后文件名 被压缩目录4.移动:move 文件 目标 ...