css学习_css BFC特性(块级格式化上下文)
块级元素会有bfc条件------可以触发bfc--------利用bfc的特性来解决一些问题
1、什么是BFC?
就是一个封闭独立的渲染的区域
2、什么元素会有BFC的条件? ---块级元素会有,行内元素没有
3、什么情况下块级元素可以产生bfc?(触发bfc)
四种中有一种就行,可以触发bfc
BFC特性
4、BFC主要用途(块级元素会有bfc条件------可以触发bfc--------利用bfc的特性来解决一些问题)
1、清除浮动
2、解决外边距合并的问题
3、做右侧自适应
css学习_css BFC特性(块级格式化上下文)的更多相关文章
- 基础总结(02)--BFC(块级格式化上下文)
BFC(块级格式化上下文)布局规则 1.元素垂直排列. 2.同一个BFC相邻两个元素的margin会重叠. 3.BFC区域不会与浮动元素重叠. 4.BFC就是页面上的一个隔离的独立容器,容器里面的子元 ...
- BFC(块级 格式化上下文)的理解
本文转载(https://segmentfault.com/a/1190000013647777) 一.BFC的概念 1.规范解释 块格式化上下文(Block Formatting Context,B ...
- BFC(块级格式化上下文)
渲染规则 1.内部的box会在垂直方向,一个接一个的放置 2.box垂直方向的距离由margin决定,属于同一个bfc的两个相邻box的margin会发生重叠 3.每个元素的margin box的左边 ...
- css 块级格式化上下文(BFC)
一.块级格式化上下文(BFC) 1.什么是块级格式化上下文? Block Formatting Contexts (BFC,块级格式化上下文)就是一个块级元素 的渲染显示规则 (可以把 BFC 理解为 ...
- 详解块级格式化上下文(BFC)
相信大家和我一样,第一次听到别人说CSS 块级格式化上下文(block formatting context,简称:BFC)的时候一头雾水,为了帮助大家弄清楚块级格式化上下文,我翻阅了W3C的CSS规 ...
- 块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解
CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案.定位方案用以控制元素的布局,在CSS2.1中,有三种定位方案——普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inli ...
- 块级格式化上下文(block formatting context)
在CSS2.1中,有三种定位方案--普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inline元素水平排列,直到行被占满后换行,block元素则被渲染为完整的一行,除非指定,所有元素 ...
- css中margin重叠和一些相关概念(包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes )
平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...
- BFC块级格式化上下文简述
做过页面编写的各位应该对定位不陌生了,这个样式表中的重头戏,也是最难把控的元素之一,今天在这里我们要讲到的就是与浮动与清除浮动相关的定位元素,对于定位有很多种,有绝对定位,还有相对定位,固定定位,静态 ...
随机推荐
- MacOS下好用的截图软件snip
1 官网下载,腾讯出的 https://snip.qq.com/ 2 下一步下一步安装就好,然后设置一下自己喜欢的快捷键,我的是command + control+J,选择自己喜欢的或者默认都可以 3 ...
- 用可配置外部工具的编辑器编译与执行java
用可配置外部工具的编辑器编译与执行java 最近用了everedit.觉得比之前平时用的Editplus有更多的细节与功能要好许多. 这里就写写用everedit编译与执行java的方法. 原理 ja ...
- C++设计模式——解释器模式
解释器模式 在GOF的<设计模式:可复用面向对象软件的基础>一书中对解释器模式是这样说的:给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子.如 ...
- 帆软报表(finereport)常用函数
1. SUM SUM(number1,number2,…):求一个指定单元格区域中所有数字之和.Number1,number2,…:1到30个参数或指定单元格区域中所有数字. 注: 函数将直接键入参数 ...
- 【原创】大叔问题定位分享(21)spark执行insert overwrite非常慢,比hive还要慢
最近把一些sql执行从hive改到spark,发现执行更慢,sql主要是一些insert overwrite操作,从执行计划看到,用到InsertIntoHiveTable spark-sql> ...
- mac os app 开发
macOS 新手开发:第 1 部分 macOS 新手开发:第 2 部分 macOS 新手开发:第 3 部分
- Python学习笔记八
类的高级用法 多态: 在其他语言,使用的是类的继承. 在python中,不需要指定数据类型. 基于TCP协议的socket通信实现: 类似于打电话的情景. 服务端: 1.买手机 2.插卡 3.开机 ...
- ansible的Filter
filter的格式: value..| filter() 在python中就是类的实例化 filter(self,*args,**kwargs) self就是filter中管道符前的value. ...
- MSB4064 错误
把项目从vs2008转成vs 2012 后,受用msbuild 编译出错 错误Code:MSB4064 修改 把msbuild 的路径从 %windir%\Microsoft.NET\Framewor ...
- Expression Trees 参数简化查询
ASP.NET MVC 引入了 ModelBinder 技术,让我们可以在 Action 中以强类型参数的形式接收 Request 中的数据,极大的方便了我们的编程,提高了生产力.在查询 Action ...