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. git撤销pull命令

    1.运行git reflog命令查看你的历史变更记录 2.然后用git reset --hard HEAD@{n},(n是你要回退到的引用位置)回退. 比如上图可运行 git reset --hard ...

  2. MyBatis---join 查询

    在实际业务中,经常能碰到多表关联查询 下面的Demo,讲举例join查询在MyBatis中的实现 User 类: package com.zy.domain; import java.io.Seria ...

  3. Javaweb运行时出现Tomcat错误

    运行web项目时出现如下错误如何解决 重新配置路径,具体可参考    https://www.cnblogs.com/xueqiuxiang/p/12087947.html   中提到的配置Tomca ...

  4. stm32 cubemx hal dma uart参考例程,发送和接收

    参考:https://blog.csdn.net/toopoo/article/details/80012317https://blog.csdn.net/morixinguan/article/de ...

  5. ESP8266烧录选项中的QIO 和 DIO解释

    https://blog.csdn.net/recclay/article/details/78956580 看到的由烧录引起的QIO和DIO问题探索.. 所以一般选择DIO QIO -> Qu ...

  6. PHP类知识----值传递和引用传递

    JS中数组是引用传递 PHP除了资源和对象等数据类型,其数据类型是值传递(即使数组也如此) 栈内存(快速内存)中存放标量数据类型,复合数据类型的变量名和数据地址 在内存中,我们可以认为内存中有很多格子 ...

  7. yii 上传视频(ajax)

    实现一个功能:提交表单的时候,需要上传视频,把视频上传到oss上,然后把url作为表单值传到后端保存到数据库.需要ajax异步实现. 遇到了一个这样报错:Bad Request: 您提交的数据无法被验 ...

  8. js中彻底删除对象属性

    delete运算符可以删除对象的属性,但是仅仅是断开了属性和宿主对象的联系,而不会去操作被删除属性的属性值,所以就需要彻底删除的出现 function myDelete(obj,propertyNam ...

  9. ZOJ 2967计算几何+单调栈

    ZOJ - 2967Colorful Rainbows 题目大意:给你道彩虹,每条彩虹有两个属性,a斜率和b截距,也就是彩虹描述为y=ax+b的直线,并且不存在垂直的彩虹以及一样的彩虹.然后就说明,如 ...

  10. POJ2176 Folding

    POJ2176 Folding 描述 给定一个长度不超过100的字符串,求其"压缩"后长度最短的字符串.如有多个,输出任意即可. 其中对于一个字符串\(str\)的"压缩 ...