CSS 概念 Block Inline Containing block
Block 元素 包括 "block-level box," "block container box," and "block box"
首先 display有以下几个属性 inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
block-level boxes: display 为 block | list-item | table
block container boxes: 当设置 display 为 block | list-item | inline-block | table | inline-table | table-cell | table-caption (自己测试总结)
block boxes: block-level boxes that are also block containers are called block boxes.
几点说明:
1. a block-level box is also a block container box
2. Not all block container boxes are block-level boxes, 比如 table-cell | inline-block
3. Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes
-----------------------------------------------------------------------------------
Inline 元素
Inline-level boxes: 当设置 display 'inline', 'inline-table', and 'inline-block'
Inline boxes: Inline-level boxes that are not inline boxes, 比如 'inline-table', and 'inline-block'
-----------------------------------------------------------------------------------
containing block
默认元素的 position 是 static。 其它属性有 relative, absolute, fixed
position: static | relative
the containing block is formed by the content edge of the nearest block container ancestor box.
position: fixed
the containing block is established by the viewport in the case of continuous media or the page area in the case of paged media.(跟它的包裹元素设置 position: relative 或 absolute 没有关系)
position: absolute:
If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed'.
If there is no such ancestor, the containing block is the initial containing block(initial C.B.).
如果所有元素都没有设置 position, 那么html 是 initial C.B. (UA-dependent)
参考文献:
http://www.w3.org/TR/CSS2/visuren.html#block-boxes
http://www.w3.org/TR/CSS2/visuren.html#propdef-display
http://www.w3.org/TR/CSS2/visuren.html#block-formatting
http://www.w3.org/TR/CSS2/visuren.html#inline-boxes
http://www.w3.org/TR/CSS2/visudet.html#containing-block-details
CSS 概念 Block Inline Containing block的更多相关文章
- css -- 通俗理解inline、block、inline-block
display:inline; 内联元素,简单来说就是在同一行显示. display:block; 块级元素,简单来说就是就是有换行,会换到第二行. display:inline-block; 就是在 ...
- css中inline、block、inline-block的区别
http://www.cnblogs.com/fxair/archive/2012/07/05/2577280.html display:inline就是将元素显示为块级元素. block元素的特点是 ...
- css学习--inline-block详解及dispaly:inline inline-block block 三者区别精要概括
*知识储备: 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行. 块级元素:是可以控制宽和高.margin等,并且会换行. 1.inline-block 详解 (1)一句话就是在 ...
- CSS中的display属性(none,block,inline,inline-block,inherit)
css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...
- DIV CSS display(block,inline,none)的属性教程
display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
- CSS display的几个常用的属性值,inline , block, inline-block
1.解释一下display的几个常用的属性值,inline , block, inline-block inline(行内元素): 使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行 ...
- dispay属性的block,inline,inline-block
转自下面的几位大神: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 bl ...
- display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block 的区别
一.块级元素 与 行级元素 要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫 ...
随机推荐
- python-内置函数、装饰器
本节内容:一之前课程回顾: 在书写代码的时候,先写简单的逻辑在写复杂的逻辑.概念梳理:1.函数在传递实参的时候是传递的是引用而不是从内存中重新赋相同值给形参.比如: def test(x): x.ap ...
- android4.x获取(也可监测)外置sd路径和读写
先上图: 这个小demo是判断手机上是否插入了sd卡(手动插入到手机卡槽的情况),如果拔出sd卡,也会检测到,检测到没有sd的话会提示退出.大家可以修改代码达到自己想要的效果. sd的卡装载状态是从系 ...
- cocos2d 艺术标签没有显示
今天自己挖了个坑,设置数字标签的时候,无论怎么搞,程序运行后还是显示的是普通文本数字,各种原因找了一半天,最后发现在资源名字.png的前面多了一个空格,眼瞎一直没看到,最后去掉就OK了
- HDU 1536 sg函数
S-Nim Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
- web安全之sql注入实例(5.0之前的)
web安全之sql(5.0之前)注入实例 5.0之前的数据库没有information库. 所以这里需要运用的是load_file()函数来获取信息. 1.判断是否有sql注入,用and 1=1 和 ...
- iOS常用设计模式和机制之代理
Delegate : 1 代理设计模式的使用我们首先需要明白三个要素 *委托方:委托别人去执行某些操作的人(对象) *代理方:被委托区执行某些操作的人(对象) *协议:(protocol)委托方需要代 ...
- JAVA 编码中文简述
中文编码问题虽然是个老问题,但对不熟悉的人来说还是不好处理的.不过Java中已经有了一套比较成熟的解决方案. 首先对中文编码格式予以简单介绍:中文编码有三套国标:GB2312,GBK,GB18030, ...
- CE5 中断
一.intr.h里面定义硬件中断号 #define IRQ_EINT0 0 #define IRQ_EINT1 1 #define IRQ_EINT2 2 #define IRQ_EINT3 3 #d ...
- 建造者模式(Builder)
建造者模式(Builder)将复杂的构建与其表示相分离,使得同样的构建过程可以创建不同的表示. 建造者模式通常包括下面几个角色: 1. builder:给出一个抽象接口,以规范产品对象的各个组成成分的 ...
- mysql特殊处理
mysql> create table ef (bc time);Query OK, 0 rows affected (0.03 sec) mysql> insert into ef va ...