`
qishuai
  • 浏览: 38592 次
  • 性别: Icon_minigender_1
  • 来自: 南通
社区版块
存档分类
最新评论

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

阅读更多

今天jquery博客遇上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

 

转自 jquery http://www.jqueryba.com/204.html

分享到:
评论

相关推荐

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

    ### CSS文档流与块级元素(block)、内联元素(inline)详解 #### 一、文档流的概念 在深入探讨块级元素与内联元素之前,我们首先要理解**文档流**的基本概念。文档流是指HTML文档中元素按照一定规则排列的方式。在...

    CSS文档流与块级元素,css

    ### CSS文档流与块级元素、内联元素详解 #### 文档流的概念 在CSS布局中,**文档流**是一个核心概念,它指的是HTML文档中元素的自然流动方式。想象一下,网页就像一条河流,其中的元素就像河中的船只,顺流而下,...

    css块状元素与内联元素以及inline-block

    CSS 块状元素、内联元素和 inline-block elementos CSS 中的块状元素(Block Elements)和内联元素(Inline Elements)是两种基本的元素类型,它们在网页布局和样式设计中扮演着非常重要的角色。块状元素和内联元素...

    什么是块元素block和内联元素inline

    ### 什么是块元素(block)和内联元素(inline) 在HTML中,元素根据其默认显示方式被分为两大类:块元素(block elements)和内联元素(inline elements)。了解这两种元素的区别对于网页布局和样式设计至关重要。...

    html中的行内元素和块级元素有哪些.pdf

    * div - 常用块级元素,也是 CSS 布局的主要标签 * dl - 定义列表 * form - 交互表单 * h1 - 大标题 * h2 - 副标题 * h3 - 3 级标题 * h4 - 4 级标题 * h5 - 5 级标题 * h6 - 6 级标题 * hr - 水平分隔线 * menu - ...

    浅谈CSS块级元素与行内元素(内联元素)的区别和联系

    在css盒子模型中,我们提到了html元素中的块元素(block element)和内联元素(inline element)。那么它们究竟是什么呢? 其实,这两种元素都是html规范中的概念。块元素(block element)一般是其他元素的容器元素...

    进一步理解CSS编程中的块级元素和行内元素

    Inline element 内联元素通俗点来说就是文本的显示方式,与块级元素相反,内联元素的高度宽度都是不可以设置的,其宽度就是自身文字或者图片的宽度。我们常用到的、、都属于内联元素。内联元素的显示特点就是像文

    块级元素和内联元素及可变元素汇总

    在HTML中,元素的布局和显示方式主要分为两种类型:块级元素(Block Element)和内联元素(Inline Element)。这两种元素具有不同的特性,对网页的结构和样式有着重要影响。 **块级元素**是HTML中最基本的构建单元...

    文档流 div+css

    - **示例:** 通过`display: inline-block`属性将元素设置为内联块级元素。 #### 三、文档流中的元素行为 **1. 非浮动块级元素:** - **特点:** 每个非浮动块级元素都独占一行。 - **示例:** `&lt;div&gt;`元素。 **2...

    html 内联元素和html 块级元素概述及区别

    不过,顶部和底部的内边距和外边距是无效的,除非通过CSS将其转换为块级或内联块级元素。 3. **常见例子**:`&lt;a&gt;`, `&lt;abbr&gt;`, `&lt;b&gt;`, `&lt;i&gt;`, `&lt;img&gt;`, `&lt;label&gt;`, `&lt;q&gt;`, `&lt;span&gt;`等是典型的内联元素。 **可变元素...

    block 和 inline 的区别

    例如,一个`&lt;div&gt;`元素可以通过`display: inline`变为内联元素,而一个`&lt;span&gt;`元素可以通过`display: block`变为块级元素。这种灵活性使得开发者可以根据设计需求调整元素的布局特性。 在严格模式(Strict DTD)的...

    CSS块级元素与行级元素详解

    在CSS布局中,块级元素(Block-level Elements)和行级元素(Inline Elements)是两种基本的元素类型,它们在HTML文档结构中扮演着至关重要的角色。了解它们的区别和使用方式是创建有效网页布局的基础。 块级元素...

    详解CSS 去掉inline-block元素间隙的几种方法

    inline-block 即内联块,在CSS的元素分类中可以分成三种:行内元素或者内联元素、块级元素、以及内联块元素。 内联块元素具有了内联元素以及块级元素的特性:(1)元素之间可以水平排列 (2)可以当做一个块级元素来...

    div+css盒子模型标签解析.docx

    首先,我们来看两种主要的元素类型:块级元素(block elements)和内联元素(inline elements)。 1. **块级元素**: - 块级元素默认以`display: block`的方式显示,这意味着它们会独占一行,后面的元素会自动换行...

    CSS中如何把Span标签设置为固定宽度.docx

    首先,我们需要理解CSS中的三种主要元素类型:块级元素(block-level)、内联元素(inline)和内联块级元素(inline-block)。 1. 块级元素(如`&lt;div&gt;`、`&lt;p&gt;`、`&lt;h1&gt;`等): - 占满整个容器的宽度。 - 默认情况...

    HTML+CSS中完全的行内元素(inline element)和块元素(block element)

    在HTML与CSS中,元素被分为两大类:行内元素(inline element)和块元素(block element)。这两种类型的元素有着不同的显示特性和布局行为,了解它们的区别对于网页设计者来说至关重要。 #### 行内元素(inline ...

Global site tag (gtag.js) - Google Analytics