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宽度,此行内框会被分割,且在被分割不为没有视觉效果,若不可分割,则溢出/打断

时间: 2024-10-04 13:24:44

IFC布局特点的相关文章

转载:解读CSS布局之-水平垂直居中(1)

本文转自http://f2e.souche.com/blog/jie-du-cssbu-ju-zhi-shui-ping-chui-zhi-ju-zhong/,以及大地dudy的博客http://www.cnblogs.com/Dudy/p/4085292.html. 对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方法,是没有去考虑IE的,如果有

转载:解读CSS布局之-水平垂直居中(3)

四. float布局上下文下的水平垂直居中 float + -50% DEMO链接 代码: <div class="wrap"> <div class="ele"> <div class="ele-inner">居中居中居中居中居中居中<br>居中居中居中居中居中居中居中居中居<br>中居中居中居中居中居中居中居中居中居<br>中居中居中居中居中居中居中</div>

解读CSS布局之-水平垂直居中

原文链接:http://f2e.souche.com/blog/jie-du-cssbu-ju-zhi-shui-ping-chui-zhi-ju-zhong/ 对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方法,是没有去考虑IE的,如果有兼容需要,可以参见这篇文章:http://www.cnblogs.com/Dudy/p/4085292.ht

css盒模型与bfc与布局与垂直水平居中与css设计模式等

一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布局 flow下的盒子的布局 BFC布局上下文下的布局 IFC布局上下文下的布局 FFC布局上下文下的布局 table布局上下文下的布局 css grid布局上下文下的布局 1.css盒模型 页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模型( box model ) 盒模型有4部分组成

重拾 BFC、IFC、GFC、FFC

温故知新,巩固基础 从 FC 开始 FC,Formatting Context,格式化上下文,是 W3C CSS2.1 规范中的一个概念,定义的是页面中一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,及和其他元素的关系和相互作用. 常见的FC有:BFC(Block Formatting Context | 块级格式化上下文)和IFC(Inline Formatting Context | 行内格式化上下文). 其次还有:GFC(GridLayout Formatting Conte

css布局的各种FC简单介绍:BFC,IFC,GFC,FFC

什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用. BFC 什么是BFC Block Formatting Context,块级格式化上下文,一个独立的块级渲染区域,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关. BFC的约束规则 内部的BOX会在垂直方向上一个接一个的放置: 垂直方向上的距离由margin决定.(完整的说法是:属于同一个BFC的俩个相邻的BOX的ma

BFC与IFC

BFC与IFC 在我们做的网页上通常最重要的其中一点就是美观度,bfc他是一个块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. 因为我现在天天在做网页了,之前没怎么关注bfc与ifc原理,以至于我做出来的网页有点偏差.所以要深刻学习以下知识. bfc:指它里面的子元素不会影响到外面的元素加上一个overflow:hilden该元素的子元素是一个bfc下面只要触发的是个bfc那么它

css中的bfc和ifc

bfc 定义:块级格式化上下文,他是一个独立的渲染区域,他规定了这个内部如何布局,并且与这个区域的外部毫不相干. BFC布局规则: 内部的Box会在垂直方向,一个接一个地放置. Box垂直方向的距离由margin决定.属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反).即使存在浮动也是如此. BFC的区域不会与float box重叠,常用来清除浮动和布局. BFC就是页面上的

css IFC 与 BFC分析

在我们做的网页上通常最重要的其中一点就是美观度,bfc他是一个块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. 因为我现在天天在做网页了,之前没怎么关注bfc与ifc原理,以至于我做出来的网页有点偏差.所以要深刻学习以下知识. bfc:指它里面的子元素不会影响到外面的元素加上一个overflow:hilden该元素的子元素是一个bfc下面只要触发的是个bfc那么它对外面都没有影响