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) 元素与盒 正常流 块级与行内级 产生垂直外边距合并的必备条件 前言 什 ...
随机推荐
- hadoop/hbase/hive单机扩增slave
原来只有一台机器,hadoop,hbase,hive都安装在一台机器上,现在又申请到一台机器,领导说做成主备, 要重新配置吗?还是原来的不动,把新增的机器做成slave,原来的当作master?网上找 ...
- Linux之screen用法
Screen被称之为一个全屏窗口管理器,用他可以轻松在一个物理终端上获得多个虚拟终端的效果. Screen功能说明: 简单来说,Screen是一个可以在多个进程之间多路复用一个物理终端的窗口管理器,这 ...
- 平衡搜索树-B树。
B Tree 系列 摘录: https://blog.csdn.net/v_JULY_v/article/details/6530142 B+树介绍 B+树的几点介绍 动态查找树有: 二叉查找树,自平 ...
- C语言1-2019秋第一周作业
第一周作业 1.你对软件工程专业或者计算机科学与技术专业了解是怎样? 软件技术专业是计算机科学的一个分支,和软件科学与技术专业相比较,软件技术专业的侧重点在开发和技术的实际应用,而对软件开发的理论要求 ...
- Vue 实现 登陆后打开主页面(登陆组件 + 主页面组件)
本次演示,项目所需iview,router 首先 在 views 目录 新建 两个 组件 ( login.vue ,index.vue ) login.vue <template> < ...
- Qt 多线程使用moveToThread
Qt有两种多线程的方法,其中一种是继承QThread的run函数,另外一种是把一个继承于QObject的类用moveToThread函数转移到一个Thread里. Qt4.8之前都是使用继承QThre ...
- Codeforces 838E Convex Countour
题 OvO http://codeforces.com/contest/838/problem/E (IndiaHacks 2nd Elimination 2017 (unofficial, unra ...
- jquery blur()函数 语法
jquery blur()函数 语法 作用:当元素失去焦点时发生 blur 事件.blur() 函数触发 blur 事件,或者如果设置了 function 参数,该函数也可规定当发生 blur 事件时 ...
- 数位dp入门 HDU 2089 HDU 3555
最基本的一类数位dp题,题目大意一般是在a~b的范围,满足某些要求的数字有多少个,而这些要求一般都是要包含或者不包含某些数字,或者一些带着数字性质的要求,一般来说暴力是可以解决这一类问题,可是当范围非 ...
- python 多线程实现循环打印 abc
python 多线程实现循环打印 abc 好久没写过python了, 想自己实践一下把 非阻塞版 import threading import time def print_a(): global ...