IFC布局特点
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布局特点的更多相关文章
- 浅析CSS中的BFC和IFC
1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...
- 解读CSS布局之-水平垂直居
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...
- css布局详解(一)——盒模型
一.网页布局的几种情况 今天让我们总结一下在css布局的各种情况做一个总结,为我们以后布局网页时做一个参考. 先看一张图,这是去年cssConf大会时阿里的 @寒冬winter 老师放出来的: 如图所 ...
- CSS布局之-水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...
- 重拾 BFC、IFC、GFC、FFC
温故知新,巩固基础 从 FC 开始 FC,Formatting Context,格式化上下文,是 W3C CSS2.1 规范中的一个概念,定义的是页面中一块渲染区域,并且有一套渲染规则,它决定了其子元 ...
- css盒模型与bfc与布局与垂直水平居中与css设计模式等
一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布 ...
- 解读 CSS 布局之水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...
- 深入理解BFC和IFC
1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...
- 对于BFC(block format context)理解
目录 前言 Box: CSS布局的基本单位&盒模型 什么是BFC?(Block formatting contexts) 元素与盒 正常流 块级与行内级 产生垂直外边距合并的必备条件 前言 什 ...
随机推荐
- git撤销pull命令
1.运行git reflog命令查看你的历史变更记录 2.然后用git reset --hard HEAD@{n},(n是你要回退到的引用位置)回退. 比如上图可运行 git reset --hard ...
- MyBatis---join 查询
在实际业务中,经常能碰到多表关联查询 下面的Demo,讲举例join查询在MyBatis中的实现 User 类: package com.zy.domain; import java.io.Seria ...
- Javaweb运行时出现Tomcat错误
运行web项目时出现如下错误如何解决 重新配置路径,具体可参考 https://www.cnblogs.com/xueqiuxiang/p/12087947.html 中提到的配置Tomca ...
- stm32 cubemx hal dma uart参考例程,发送和接收
参考:https://blog.csdn.net/toopoo/article/details/80012317https://blog.csdn.net/morixinguan/article/de ...
- ESP8266烧录选项中的QIO 和 DIO解释
https://blog.csdn.net/recclay/article/details/78956580 看到的由烧录引起的QIO和DIO问题探索.. 所以一般选择DIO QIO -> Qu ...
- PHP类知识----值传递和引用传递
JS中数组是引用传递 PHP除了资源和对象等数据类型,其数据类型是值传递(即使数组也如此) 栈内存(快速内存)中存放标量数据类型,复合数据类型的变量名和数据地址 在内存中,我们可以认为内存中有很多格子 ...
- yii 上传视频(ajax)
实现一个功能:提交表单的时候,需要上传视频,把视频上传到oss上,然后把url作为表单值传到后端保存到数据库.需要ajax异步实现. 遇到了一个这样报错:Bad Request: 您提交的数据无法被验 ...
- js中彻底删除对象属性
delete运算符可以删除对象的属性,但是仅仅是断开了属性和宿主对象的联系,而不会去操作被删除属性的属性值,所以就需要彻底删除的出现 function myDelete(obj,propertyNam ...
- ZOJ 2967计算几何+单调栈
ZOJ - 2967Colorful Rainbows 题目大意:给你道彩虹,每条彩虹有两个属性,a斜率和b截距,也就是彩虹描述为y=ax+b的直线,并且不存在垂直的彩虹以及一样的彩虹.然后就说明,如 ...
- POJ2176 Folding
POJ2176 Folding 描述 给定一个长度不超过100的字符串,求其"压缩"后长度最短的字符串.如有多个,输出任意即可. 其中对于一个字符串\(str\)的"压缩 ...