CSS文档流与块级元素(block)内联元素(inline)

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。

每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端。 若当前行容不下, 则另起新行再浮动。

内联元素也不会独占一行。 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素。

有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位。

 

基于文档流, 我们可以很容易理解以下的定位模式:

相对定位, 即相对于元素在文档流中位置进行偏移。 但保留原占位。

绝对定位, 即完全脱离文档流, 相对于position属性非static值的最近父级元素进行偏移。

固定定位, 即完全脱离文档流, 相对于视区进行偏移。

《CSS权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如,我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复,每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。

1 行内就是在一行内的元素,只能放在行内;块级元素,就是一个四方块,可以放在页面上任何地方。

2 说白了,行内元素就好像一个单词;块级元素就好像一个段落,如果不另加定义的话,它将独立一行出现。

3 一般的 块级元素诸如段落<p>、标 题<h1><h2>…、列表。<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ……..

4 块级无素的显著特点是:每个块级元素都是从一个新行开始显示,而且其后的无素也需另起一行进行显示。

5 <span>在CSS定义中属于一个行内元素,而<div>是块级元素。

 

主要列出一些常见的啊,不怎么见就拉倒了

 

块元素(block element)

 

div dl ul h1 h2 h3 h4 h5 h6 hr ol table

 

内联元素(inline element)

 

b img span

时间: 2024-05-12 18:26:49

CSS文档流与块级元素(block)内联元素(inline)的相关文章

CSS 文档流

文档流:将窗口自下而上分成一行一行,应在每行中按从左至右的依次排放元素,即为文档流 有三种情况使得元素离开文档流而存在,分别是浮动 绝对布局 固定定位 脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档 流的元素不存在而进行定位.需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素 ,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围.而对于使用absolute positioning 脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它

详解CSS布局设计块元素和内联元素

css|设计|详解 块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P."form"这个块元素比较特殊,它只能用来容纳其他块元素. 如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排.而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去.而不是每次都愚蠢的另起一行.需要指出的是,table标签也是块元素的一种,table based layout

css+div布局要素:文档流position属性 父级对象和同级对象

div+css布局要素:文档流position属性.父级对象和同级对象.从学div+css以来,一直对position几个属性的理解不够清晰.自己对position这一属性有了更深入和清晰的认识,同时让自己对整个div+css布局有了更深入的认识. 因为div实质是一个四方块,被很多业界人士形象的比喻成盒子.那么div+css布局的过程其实就是摆放这些盒子的过程.最近一周来,专门针对这个问题进行了深入的思考和研究.结果通过对这一问题的研究不仅让自己对position这一属性有了更深入和清晰的认识

css position, display, float 内联元素、块级元素

position属性:position属性指出一个元素的定位方法.有4种可能值:static, relative, absolute or fixed: static:默认值,元素按照在文档流中出现的顺序渲染 absolute:绝对定位,元素相对于它的第一个被定位的祖先元素(非static)来进行定位 fixed:元素相对于浏览器window进行定位 relative:元素相对与它的正常位置进行定位,因此"left:20"就表示在元素正常位置的基础上,左移20像素的距离. float属

CSS常见内联元素和块级元素

[块元素(block element) ] * address - 地址 * blockquote - 块引用 * center - 举中对齐块 * dir - 目录列表 * div - 常用块级容易,也是css layout的主要标签 * dl - 定义列表 * fieldset - form控制组 * form - 交互表单 * h1 - 大标题 * h2 - 副标题 * h3 - 3级标题 * h4 - 4级标题 * h5 - 5级标题 * h6 - 6级标题 * hr - 水平分隔线 *

block(块元素)、inline(内联元素)的差别是什么?

我们首先要了解,所有的html元素,都要么是block(块元素).要么是inline(内联元素).下面了解一下block.inline各自的特点: block元素的特点: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度. inline元素的特点: 和其他元素都在一行上: 高,行高及顶和底边距不可改变: 宽度就是它的文字或图片的宽度,不可改变. 我们来详细了解它们的情况. 块元素(block element)一般是其他元素的容器元素,块元素一

块元素block element和内联元素inline element_CSS/HTML

内联级元素(inline-level element)中试图插入块级(block-level element)元素.这样做是不允许的.唯一的能在内联元素中插入块级元素的例外是object标签.那么什么是内联级元素(inline-level element)和块级(block-level element)元素呢?. 块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签''P"."form"这个

内联元素(inline element)和块元素(block element)

文章简介:CSS里有哪些常见的块级元素和行内元素?  根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为"block",成为"块级"元素(block-level):而span元素的默认display属性值为"inline",称为"行内"元素. div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高

【HTML5疑难杂症】脱离文档流时的渲染BUG

BUG重现 最近机票团队在一个页面布局复杂的地方发现一个BUG,非常奇怪并且不好定位,这类问题一般最后都会到我这里,这个问题是,改变dom结构,页面却不渲染!!! 文档流时的渲染BUG-脱离文档流"> 如图所示,我动态的改变了dom结构,结果页面那一坨变得什么都没有,相当奇怪!!!在PC模拟iPhone就可以重现,iPhone.note4等手机上也可重现,由于这种BUG我不是第一次碰到,很快便引起了注意,总结起来可以归结于: js代码改变fixed元素的html结构(一般是动画后并且布局相