css块级元素、内联元素 |
您所在的位置:网站首页 › 块元素和内联元素有哪些 › css块级元素、内联元素 |
CSS块级元素、内联元素
在css盒子模型中,我们提到了html元素中的块元素(block element)和内联元素(inline element)。那么它们究竟是什么呢? 其实,这两种元素都是html规范中的概念。块元素(block element)一般是其他元素的容器元素,能容纳其他块元素或内联元素。最常见的就是P和div这两个,说的简单点,块元素就好比一个四方块,可以放其他的四方块,并可以呈现在页面上任何地方。默认情况下块元素,是独占一行的。常见的块元素:div、h1-h6标题、form(只能用来容纳其他块元素)、hr、p、table、ul、ol等。内联元素(inline element)也叫内嵌元素或行内元素,一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,常见内联元素有a和span。 块元素与内联元素的区别? 1.块元素,总是在新行上开始;内联元素,和其他元素都在一行上。 2.块元素,能容纳其他块元素或内联元素;内联元素,只能容纳文本或者其他内联元素。 3.块元素中高度,行高以及顶和底边距都可控制;内联元素中高,行高及顶和底边距不可改变。 (这上面的区别,指的是默认情况下的,不包括CSS的刻意控制。也就是说当使用css控制时,块元素和内联元素的属性差异会越来越小。) block(块)元素的特点: ①总是在新行上开始; ②高度,行高以及外边距和内边距都可控制; ③宽度缺省是它的容器的100%,除非设定一个宽度。 ④它可以容纳内联元素和其他块元素 inline元素的特点: ①和其他元素都在一行上; ②高,行高及外边距和内边距不可改变; ③宽度就是它的文字或图片的宽度,不可改变 ④内联元素只能容纳文本或者其他内联元素 CSS文档流与块级元素(block)、内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面。看过O’Reilly的《CSS权威指南》,发现里面提到的文档流概念让我很敏感。 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提。但我觉得,这个概念实在太重要了。理解了它,一堆CSS布局的理论都变得易于理解,并且体会到CSS这套设计的合理性所在。 文档流将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端。 若当前行容不下, 则另起新行再浮动。 内联元素也不会独占一行。 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素。 有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位。 但是在IE中浮动元素也存在于文档流中(还让我觉得这样很合理> |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |