IFC(inline formatting context),行内格式化上下文

特点:

1.内联元素在水平线上一个接一个排列

2.内部元素水平方向上的margin、padding、border有效,垂直方向上无效

3.垂直方向上有多种对齐方式: 顶部、底部、基线。。

4.每一列元素构成一个line box,line box的宽度由包含其元素的宽度及有没有float元素决定,高度由内部最高元素决定

5.line box的高度足以包含其内部容器,也肯比他们都高(例如基线对齐),内部容器的垂直位置由其vertial-align决定

6. 一般情况下,line-box的左/右边缘挨着包含其的元素的左/右边缘,但若有浮动元素,会插入左/右边缘之间

7.当line box足以包含其所有子元素,子元素的排列方式由text-align决定

8.当line box内部元素宽度超出line box宽度,此行内框会被分割,且在被分割不为没有视觉效果,若不可分割,则溢出/打断

IFC布局特点的更多相关文章

  1. 浅析CSS中的BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

  2. 解读CSS布局之-水平垂直居

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...

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

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

  4. CSS布局之-水平垂直居中

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...

  5. 重拾 BFC、IFC、GFC、FFC

    温故知新,巩固基础 从 FC 开始 FC,Formatting Context,格式化上下文,是 W3C CSS2.1 规范中的一个概念,定义的是页面中一块渲染区域,并且有一套渲染规则,它决定了其子元 ...

  6. css盒模型与bfc与布局与垂直水平居中与css设计模式等

    一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布 ...

  7. 解读 CSS 布局之水平垂直居中

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...

  8. 深入理解BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

  9. 对于BFC(block format context)理解

    目录 前言 Box: CSS布局的基本单位&盒模型 什么是BFC?(Block formatting contexts) 元素与盒 正常流 块级与行内级 产生垂直外边距合并的必备条件 前言 什 ...

随机推荐

  1. python+Appium自动化:各种元素定位方法

    name定位 driver.find_element_by_name('飞利浦净水').click() 测试结果报错:selenium.common.exceptions.InvalidSelecto ...

  2. HTML5 Canvas绘图基础

  3. mysql中source提高导入数据速率的方法

    示例: 第一步: 第二步: 使用 source 导入你所需要导入的文件 第三步: 在导入的数据停止后,输入  commit; 这样数据就算是导入完成了.

  4. TXNLP 33-40

    词向量: 回顾基于检索的问答系统 倒排表解决:坑爹的翻译...应该翻译成“反向索引” 常规的索引是文档到关键词的映射: 文档——>关键词但是这样检索关键词的时候很费力,要一个文档一个文档的遍历一 ...

  5. @Value和@ConfigurationProperties

    1.@Value用法 https://blog.csdn.net/u010832551/article/details/73826914 2.@ConfigurationProperties用法 ht ...

  6. 微信小程序---密码输入

    设计支付密码的输入框 效果如下: 源码:github地址:https://github.com/fiveTree/-_- 干货: <view class="pay"> ...

  7. WCF错误:由于目标计算机积极拒绝,无法连接;127.0.0.1:3456

    问题描述 最近Windows打完补丁,原来部署在本机的WCF无法连接:出现如下WCF错误:由于目标计算机积极拒绝,无法连接:127.0.0.1:3456 解决方案 检查一下本机的服务:NetTcpAc ...

  8. Laravel进行数据库迁移(migration)

    迁移(migration) 文档的简介是:迁移就像数据库的版本控制,允许团队简单轻松的编辑并共享应用的数据库表结构,迁移通常和 Laravel 的结构构建器结对从而可以很容易地构建应用的数据库表结构. ...

  9. VUE: 移动端长按弹出确认删除地址(后面测试发现IOS有BUG,后面有更新随笔,更新后的亲测有效)

    收货地址的删除方式可能有很多种,我目前见过的暂时只有两种(1.在编辑页删除  2.长按某一条收货地址弹出是否删除地址) 在开发的项目上要求第二种删除方法,于是记录一下我写的代码 ~ 1.首先,在移动端 ...

  10. 课时5:POW,POS,DPOS(矿工/矿机,工作证明)

    比特币钱包