自己理解BFC 和 stack context , stack order
1. stack order 发生在BFC计算好了之后。
2.一个一个的BFC里面,不同的block 里面的stack context 会根据 stack order的顺序,进行堆叠。呈现互相遮盖的效果。
例如:
<body>
<style>
div{ border: 1px solid green;}
</style>
<div style="float: left">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div style="float: right;">bbbbbbbbbbbbbbbbbbbbbbbbbbi
<div style="position:relative; border:1px solid red; width:100px;height:100px;margin-top:-30px;left:20px;background-color:green"> </div> </div> </body>

效果如上图所示, 第一个div, 和第二个div都是一个独立的BFC, 各种进行计算之后,在进行stack oder 的堆叠。
自己理解BFC 和 stack context , stack order的更多相关文章
- structs2 对ActionContext valueStack stack context 的理解 图片实例
structs2 对ActionContext valueStack stack context 的理解 ActionConext : The ActionContext is the context ...
- Java 集合深入理解(13):Stack 栈
点击查看 Java 集合框架深入理解 系列, - ( ゜- ゜)つロ 乾杯~ 今天心情不错,再来一篇 Stack ! 数据结构中的 栈 数据结构中,栈是一种线性数据结构,遵从 LIFO(后进先出)的操 ...
- Struts2的Stack Context和ValueStack
1.提到Struts2的传值功能时,经常会见到Stack Context和ValueStack等概念,那么它们到底是什么,有什么作用呢. ValueStack(值栈):Struts2将OGNL上下文设 ...
- struts2.1.6教程四_2、ActionContext 、ValueStack 、Stack Context
ActionContext 一次Action调用都会创建一个ActionContext 调用:ActionContext context = ActionContext.getContext() Va ...
- 27.OGNL与ValueStack(VS)-获取Stack Context中的信息
转自:https://wenku.baidu.com/view/84fa86ae360cba1aa911da02.html 我们知道,除了可以从值栈中获取信息,还可以从Stack Context中获取 ...
- [知识库:python-tornado]异步调用中的上下文控制Tornado stack context
异步调用中的上下文控制Tornado stack context https://www.zouyesheng.com/context-in-async-env.html 这篇文章真心不错, 非常透彻 ...
- Struts2(六.用标签显示用户列表及Value Stack和Stack Context)
一.用Struts2标签显示用户列表 原理: 在struts中可以通过在action中将所有用户的信息存入到某个范围中,然后转向userlist.jsp,进行访问 原则: 在jsp网页上,尽量不要出现 ...
- 对于BFC(block format context)理解
目录 前言 Box: CSS布局的基本单位&盒模型 什么是BFC?(Block formatting contexts) 元素与盒 正常流 块级与行内级 产生垂直外边距合并的必备条件 前言 什 ...
- 全面理解BFC
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...
随机推荐
- IAR EWARM 字体设置
如果只想简单的设置,可进行如下设置 Tools->IDE Options->Editor->Colors and Fonts->Editor Font->Font 但是这 ...
- CRC 概述
Acquired from: ftp.adelaide.edu.au:/pub/rocksoft/crc_v3.txt or ftp://ftp.rocksoft.com/papers/crc_v3. ...
- css的浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 一 css的浮动 CSS提供了元素对 ...
- Delphi开发环境中应用层网络协议的实现
已经进入Internet网络时代了,许多新出的软件都拥有网络功能.其实,在这些软件背后所依靠的技术基础就是一系列的Inernet网络协议标准,亦即TCP/IP系列协议. 下面本人简要介绍一下在Delp ...
- FreeCommander 学习手册
概述 转载请注明出处:http://www.cnblogs.com/skywang12345/p/3470728.html FreeCommander(下文简称FC),是Windows下面比较强大的文 ...
- GCD实现多线程 实践
GCD中弹窗的正确写法 - (void)viewDidLoad { //…… if (![self isStartLoading]) [self startLoading:nil]; //loadin ...
- C#编程小结----集合的小小总结
集合的小结 以上文章介绍了如何处理不同类型的集合,数组的大小是固定的,但可以使用列表作为动态增长的集合.队列以先进先出的方式访问元素.栈以后进先出的方式访问元素.链表可以快速的插入和删除元素,但搜索操 ...
- SQL 参考
本主题将介绍 ArcGIS 中的选择表达式所用的常规查询的各个元素.ArcGIS 中的查询表达式使用常规 SQL 语法. 警告: SQL 语法不适用于使用字段计算器计算字段. 字段 在 SQL 表达式 ...
- 给js创建的一个input数组绑定click事件
<html> <body> <input type="button" name="input[]" value="按钮1 ...
- 一个exception
今天调错,发生了一个错误:java.lang.IllegalStateException: ApplicationEventMulticaster not initialized [closed] 后 ...