块级元素会有bfc条件------可以触发bfc--------利用bfc的特性来解决一些问题

1、什么是BFC?

就是一个封闭独立的渲染的区域

2、什么元素会有BFC的条件? ---块级元素会有,行内元素没有 

3、什么情况下块级元素可以产生bfc?(触发bfc)

四种中有一种就行,可以触发bfc

BFC特性

4、BFC主要用途(块级元素会有bfc条件------可以触发bfc--------利用bfc的特性来解决一些问题)

1、清除浮动

    

 2、解决外边距合并的问题

3、做右侧自适应

css学习_css BFC特性(块级格式化上下文)的更多相关文章

  1. 基础总结(02)--BFC(块级格式化上下文)

    BFC(块级格式化上下文)布局规则 1.元素垂直排列. 2.同一个BFC相邻两个元素的margin会重叠. 3.BFC区域不会与浮动元素重叠. 4.BFC就是页面上的一个隔离的独立容器,容器里面的子元 ...

  2. BFC(块级 格式化上下文)的理解

    本文转载(https://segmentfault.com/a/1190000013647777) 一.BFC的概念 1.规范解释 块格式化上下文(Block Formatting Context,B ...

  3. BFC(块级格式化上下文)

    渲染规则 1.内部的box会在垂直方向,一个接一个的放置 2.box垂直方向的距离由margin决定,属于同一个bfc的两个相邻box的margin会发生重叠 3.每个元素的margin box的左边 ...

  4. css 块级格式化上下文(BFC)

    一.块级格式化上下文(BFC) 1.什么是块级格式化上下文? Block Formatting Contexts (BFC,块级格式化上下文)就是一个块级元素 的渲染显示规则 (可以把 BFC 理解为 ...

  5. 详解块级格式化上下文(BFC)

    相信大家和我一样,第一次听到别人说CSS 块级格式化上下文(block formatting context,简称:BFC)的时候一头雾水,为了帮助大家弄清楚块级格式化上下文,我翻阅了W3C的CSS规 ...

  6. 块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解

    CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案.定位方案用以控制元素的布局,在CSS2.1中,有三种定位方案——普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inli ...

  7. 块级格式化上下文(block formatting context)

    在CSS2.1中,有三种定位方案--普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inline元素水平排列,直到行被占满后换行,block元素则被渲染为完整的一行,除非指定,所有元素 ...

  8. css中margin重叠和一些相关概念(包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes )

    平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...

  9. BFC块级格式化上下文简述

    做过页面编写的各位应该对定位不陌生了,这个样式表中的重头戏,也是最难把控的元素之一,今天在这里我们要讲到的就是与浮动与清除浮动相关的定位元素,对于定位有很多种,有绝对定位,还有相对定位,固定定位,静态 ...

随机推荐

  1. 【汇编语言】Doxbox 0.74 修改窗口大小

    1.打开Doxbox安装路径,找到DOXBox 0.74-2 Option.bat,双击打开. 2.找到windowresolution和output,将其值修改为下图中的值. 注意:图中,1280x ...

  2. Django logging配置

    1,在项目下建个文件夹    log 2,在django的setting的配置下添加路径     BASE_LOG_DIR = os.path.join(BASE_DIR, "log&quo ...

  3. if 语句中的判断

    经常写shell的朋友可能已经很熟了.有不同意见的同学请指出来,在这里多谢大家了. bash中如何实现条件判断?条件测试类型:    整数测试    字符测试    文件测试 一.条件测试的表达式: ...

  4. Ubuntu16.04 Liunx下同时安装Anaconda2与Anaconda3

    先根据Ubuntu预装的python2.7来安装Anaconda2,然后将Anaconda3作为其环境安装在envs文件夹下. 重要提示:有一些软件需要py2.7的环境,比如XX-Net, 最好是先安 ...

  5. 【原创】Linux基础之iptables

    iptables 1.4.21 官方:https://www.netfilter.org/projects/iptables/index.html iptables is the userspace ...

  6. windows上安装gcc/g++环境(MinGW,msys64等)

    1 前言 经过折腾安装gcc环境,记录一下 2 工具  MinGW安装器: 下载地址1:MinGW官网 下载地址2:SourceForge (MinGW w64) 下载地址3:win-builds-1 ...

  7. 【git】将本地项目上传到远程仓库

    飞机票 一. 首先你需要一个github账号,所有还没有的话先去注册吧! https://github.com/ 我们使用git需要先安装git工具,这里给出下载地址,下载后一路直接安装即可: htt ...

  8. 使用Pycharm创建一个Django项目

    在使用python写脚本一段时间后,想尝试使用Django来编写一个python项目,现做以下记录备忘: 1.创建项目 如果本地没有安装与所选python版本对应Django版本,pycharm会自动 ...

  9. 连接慢的主要原因是DNS解析导致

    连接慢的主要原因是DNS解析导致解决方法: 1.在ssh服务端上更改/etc/ssh/sshd_config文件中的配置为如下内容:UseDNS no# GSSAPI optionsGSSAPIAut ...

  10. process.argv

    返回进程启动时的命令行参数. 第一个元素是 process.execPath. 使用 process.argv0 可以获取 argv[0] 原始的值. 第二个元素是当前执行的 JavaScript 文 ...