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) 元素与盒 正常流 块级与行内级 产生垂直外边距合并的必备条件 前言 什 ...
随机推荐
- 热门前沿知识相关面试问题-android插件化面试问题讲解
插件化由来: 65536/64K[技术层面上]随着代码越来越大,业务逻辑越来繁杂,所以很容易达到一个65536的天花板,其65536指的是整个项目中的方法总数如果达到这个数量时则不无法创建新的方法了, ...
- JAVA面试/笔试经典题
1.short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错? 对于short s1 = 1; s1 = s1 + 1; 由于s1+1运算时 ...
- CF875F Royal Questions[最大生成基环树森林]
这题这场比赛一堆人秒切..果然还是我太菜了吗 题意:二分图,右边$m$个点每个点$i$向左边有且仅有两条连边,边权都是$a_i$.求最大匹配. 一个朴素思想,二分图匹配,用贪心带匈牙利搞一搞,但是复杂 ...
- Atcoder CODE FESTIVAL 2016 Final G - Zigzag MST[最小生成树]
题意:$n$个点,$q$次建边,每次建边选定$x,y$,权值$c$,然后接着$(y,x+1,c+1),(x+1,y+1,c+2),(y+1,x+2,c+3),(x+2,y+2,c+4)\dots$(画 ...
- jquery实现在光标位置(input、textarea)插入内容的方法
通过扫码枪扫码.按钮点击事件在光标处插入文本,这是前台js常用的功能.但是在input输入框和textarea文本框定位光标,插入数据是有点不同的 首先最简单的,适用于input输入框的方法 HTML ...
- Hadoop-No.3之序列化存储格式
序列化存储指的是将数据结构转化为字节流的过程,一般用于数据存储或者网络传输.与之相反, 反序列化是将字节流转化为数据结果的过程.序列化是分布处理系统(比如Hadoop)的核心,原因在于他能对数据进行转 ...
- Error from server (ServiceUnavailable): the server is currently unable to handle the request
grep image /root/kubernetes-metrics-server/kubernetes-metrics-server/metrics-server-deployment.yaml ...
- js中彻底删除对象属性
delete运算符可以删除对象的属性,但是仅仅是断开了属性和宿主对象的联系,而不会去操作被删除属性的属性值,所以就需要彻底删除的出现 function myDelete(obj,propertyNam ...
- selenium 与appium的关系
selenium是web端的自动化,appium是app端的自动化,它继承了webdriver(也就是selenium 2) 关系如下:
- Selenium 的页面加载以及几种等待的问题
1. PageLoadStrategy : 当调用driver.get("https://xxxx.xxx.xxx")来访问某页面时,get方法通常会阻塞浏览器直到页面完全加载后才 ...