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) 元素与盒 正常流 块级与行内级 产生垂直外边距合并的必备条件 前言 什 ...
随机推荐
- okhttp框架源码分析从同步&异步请求使用开始
对于okhttp在如今项目中的普及程度已经不言而喻啦,基本上如今网络请求都会基于它去进行封装,而非前几年用Android的网络框架HttpURLConnection和Apache HttpClient ...
- 获取header信息
获取header信息 function _get_all_header() { // 忽略获取的header数据.这个函数后面会用到.主要是起过滤作用 $ignore = array('host',' ...
- Thinkphp清除缓存文件
Thinkphp的缓存在开发中是非常烦人的,因为有的时候因为缓存的问题而出现的错误是非常难找的.删除缓存更是麻烦,还要去文件夹下删除.如果是linux开发服务器的话还要登陆服务器进行删除.所以这个时候 ...
- 报表开发神器!DevExpress Reporting v19.1全平台新功能解析
行业领先的.NET界面控件DevExpress Reporting全新发布了v19.1版本,本文主要为大家介绍.NET Reporting v19.1中发布的所有平台的新功能,欢迎下载v19.1试用, ...
- BBS-media配置
media配置: 在上传头像的时候会用到media,首先需要在setting中加下面这一句话 MEDIA_ROOT=os.path.join(BASE_DIR,"blog",&qu ...
- ALIENTEK 战舰ENC28J60 LWIP和UIP补充例程(LWIP WEB有惊喜)
前面的话:自从接触网络模块,到现在有一阵子时间了,未来必定是网络的世界.学一些网络方面的知识是有必要的.我们ALINTEK 推出的ENC28J60网络模块块作为入门还是不错的.详细见此贴:http:/ ...
- mysql router使用配置
mysql router使用配置 参考资料: https://www.jianshu.com/p/7fc8d77bea59 一.架构图 介绍: MySQL Router是处于应用client和dbse ...
- SQL进程死锁排查
--进程执行状态 SELECT der.[session_id],der.[blocking_session_id], sp.lastwaittype,sp.hostname,sp.program_n ...
- 【Winform-自定义控件】 DataGridView多维表头
[datagridview与treeview绑定] treeview 代码: DataTable dtable = new DataTable("Rock") ...
- [Python之路] 日志操作
使用logging模块来写日志 日志直接输出到准备输出 import logging logging.basicConfig(level=logging.WARNING, format="% ...