基础总结(02)--BFC(块级格式化上下文)
BFC(块级格式化上下文)布局规则
1.元素垂直排列。
2.同一个BFC相邻两个元素的margin会重叠。
3.BFC区域不会与浮动元素重叠。
4.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
5.计算BFC的高度时,浮动元素也参与计算。
如何创建BFC
1.根元素
2.浮动float
3.absolute或fixed
4.overlfow部位visible
5.display为inline-block, table-cell, table-caption, flex, inline-flex
BFC多用来清除浮动、阻止外边距折叠、阻止元素被浮动元素覆盖(两列布局)
基础总结(02)--BFC(块级格式化上下文)的更多相关文章
- CSS2系列:BFC(块级格式化上下文)IFC(行级格式化上下文)
BFC 块级格式化上下文,不好理解,我们暂且把她理解成"具有特殊的一类元素" 哪些元素会生成BFC? 根元素 float属性不为none position为absolute或fix ...
- BFC块级格式化上下文
BFC块级格式化上下文 触发条件 overflow 值不为 visible 的块元素 根元素 html 元素 浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 ...
- BFC——块级格式化上下文
BFC(块级格式化上下文) 一.BFC是什么? 从样式上看,具有BFC的容器和普通的容器没有区别.从功能上看,具有BFC的容器可以看作是隔离了的容器,容器里面的元素不会影响到外面的元素,并且BFC具有 ...
- BFC块级格式化上下文简述
做过页面编写的各位应该对定位不陌生了,这个样式表中的重头戏,也是最难把控的元素之一,今天在这里我们要讲到的就是与浮动与清除浮动相关的定位元素,对于定位有很多种,有绝对定位,还有相对定位,固定定位,静态 ...
- 我理解的BFC(块级格式化上下文)
BFC(Block formatting context) 直译为"块级格式化上下文". BFC它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Bl ...
- BFC(块级格式化上下文)
转载自:https://www.cnblogs.com/asheng2016/p/7281784.html https://blog.csdn.net/jiaojsun/article/details ...
- BFC(块级格式化上下文)笔记
BFC特性: 1.BFC是一个独立的布局容器,内部元素不会影响BFC外面的元素,反之亦然. 2.计算BFC高度时,会计算内部的浮动元素. 3.BFC会阻止外边距的合并. 4.BFC的区域不会与外部浮动 ...
- BFC 详说 Block Formatting Contexts (块级格式化上下文)
定位方案是控制元素的布局,在 CSS 2.1 中,有三种定位方案——普通流 (Normal Flow) .浮动 (Floats) 和绝对定位 (Absolute Positioning) ,下面分别对 ...
- BFC(Box,Formatting,Context) —— 块级格式化上下文
Box:CSS布局的基本单位 Formatting context是页面中的一块渲染区域,最常见的是BFC和IFC,CSS3增加了GFC和FFC BFC定义:块级格式化上下文,它是一个独立的渲染区域, ...
随机推荐
- AI之旅(3):升维与最小二乘法
前置知识 矩阵的逆 知识地图 首先我们将了解一种叫升维的方法,用已有特征构造更多的特征.接着通过对空间与投影建立一定的概念后,推导出最小二乘法. 当特征数量不足时 在上一篇<初识线性 ...
- s21day17 python笔记
s21day17 python笔记 一.内容回顾及补充 回顾 补充 第三方模块补充 需要下载安装后才能导入使用 安装方式: pip包管理工具 # 把pip.exe 所在的目录添加到环境变量中. pip ...
- jmeter使用手册
1.在bin文件中找到jmeter.bat文件启动 2.创建测试计划-填写计划名称 3.添加线程组(右键点击) 4.设置线程-红框内均可设置,线程数-并发次数 5.在线程组下添加http请求 6.在h ...
- 解决eclipse使用tomcat启动项目后访问项目404的问题
今天启动项目的时候发现项目启动没有问题,但是一直访问不到页面,F12发现根本没有交互,百度后解决了,故记下来为以后提供方法,若有不同的解决方法,欢迎指教 1.首先要确保你的tomcat下没有项目,怎么 ...
- python中常见的报错,总结一下,以后看。
AttributeError 试图访问一个对象没有的属性,比如,乔峰.nameIOError 输入.输出异常:基本上无法打开文件ImportError 无法引入模块或者是包:基本上是路径问题,或者是名 ...
- vue重温之mint-ui------------点击事件绑定
第一次接触mint-ui,在使用它的tabbar时,为了达到点击切换页面的效果,采用了点击事件的方式,然后就碰到了这么个问题: 是的,点击事件是不起作用的. 然后刚好一个朋友也在做这块,而且有一段时间 ...
- 关于符号匹配题的一些思考过程--含cin.getline()函数的一些基本原理
刚刚拿到题目的时候,还没啥感觉,就是觉得要用到if--else就可以了,但是一联想到现在是在学栈,那么是不是要用到栈呢? 一.那么先看看题目吧 给定一串字符,不超过100个字符,可能包括括号.数字.字 ...
- Linux 开(关) ICMP 回应(防止被ping)
临时生效的办法 关闭回应: [root@host ~]# echo 1 > /proc/sys/net/ipv4/icmp_echo_ignore_all // 客户端测试 ➜ ~ ping 0 ...
- FileDb
filedb FileDB - A C# database to store files FileDB is a free, fast, lightweight C# (v3.5) DLL proje ...
- 通过企业微信API接口发送消息
最近给公司测试组内部开发一个记账小工具,当账目出现问题的时候需要发送消息通知大家,前期主要采用的QQ发送通知消息,但是有一天突然无法连接到QQ服务器,运维的同学建议采用微信的方式对接然后进行告警,所以 ...