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调用Shell命令

    Python经常被称作“胶水语言”,因为它能够轻易地操作其他程序,轻易地包装使用其他语言编写的库,也当然可以用Python调用Shell命令. 用Python调用Shell命令有如下几种方式: 第一种 ...

  2. 阅读之web应用安全

    一.三种坏人与servlet安全 认证可以防止“假冒者”攻击,授权可以防止“非法升级者”攻击,机密性和数据完整性可以防止“窃听者”攻击. 二.认证与授权 Web容器进行认证与授权的过程: 客户端:浏览 ...

  3. .net大文件上传断点续传源码

    IE的自带下载功能中没有断点续传功能,要实现断点续传功能,需要用到HTTP协议中鲜为人知的几个响应头和请求头. 一. 两个必要响应头Accept-Ranges.ETag 客户端每次提交下载请求时,服务 ...

  4. 判断一个ip地址合法性（基础c，不用库函数）

    #include <stdio.h> int judge(char *strIp); int main() { ]; ) { scanf("%s", a); == ju ...

  5. ThinkPHP系统常量

    _ROOT__ : 网站根目录地址 __APP__ : 当前项目(入口文件)地址 __URL__ : 当前模块地址 __ACTION__ : 当前操作地址 __SELF__ : 当前 URL 地址 _ ...

  6. 「SNOI2017」礼物

    题目链接:Click here Solution: 设\(f(x)\)代表第\(x\)个人送的礼物的数量,\(s(x)\)代表\(f(x)\)的前缀和,即: \[ f(x)=s(x-1)+x^k\\ ...

  7. 征途堆积出友情的永恒「堆优化dp」

    直接写题解: 很简单的dp暴力转移式子:f[i]=MAX{f[j]+max(tax[j],sum[i]-sum[j])} 观察式子,只有一个变量sum[i]; 而其他都为定量; 则考虑维护 两个定量: ...

  8. 记一次newApiHadoopRdd查询数据不一致问题

    现象: +----------+-------+--------+-----+-----+-----+----+----+------+---------+-------+--------+----- ...

  9. PHP-windows下IDEA配置网页地址

  10. kali随便写 kali更新源配置

    ./ +文件目录  是执行文件的意思 kali修改更新源及更新 进入源文件进行修改 leafpad /etc/apt/sources.list (其实系统本身就自带了更新源,去掉其注释也是可以的,现在 ...