`

CSS快级元素与内联元素

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

p、h1、或div等元素常常称为块级元素，这些元素显示为一块内容；Strong,span等元素称为行内元素，它们的内容显示在行中，即“行内框”。（可以使用display=block将行内元素转换成块元素，display=none表示生成的元素根本没有框，也既不显示元素，不占用文档中的空间）

A：行内就是在一行内的元素，只能放在行内；块级元素，就是一个四方块，可以放在页面上任何地方。

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

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

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

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

对于学过CSS的人来说一听就能明白。可对于新手来说不易理解，我主要对新手说通熟点吧!

用容器这一词会更容易形象理解它们的存在与用途，行内元素相当一个小容器，而<div>相当于一个大容器，大容器当然可以放一个小容器 了。<span>就是小容器，这样一说你也许会在脑海中有一个初步的印象了吧，如果我们想在大容器中装一些清水。但我也想在里装一些墨水怎么 办？很简单，我们把小容器拿出来装上墨水然后放入大容器里的清水中不就成了吗

 

分享到：
| CSS文档流、块级元素以及行内元素
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

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

    css 块状元素和内联元素

    当我们将内联元素与块状元素结合时，可以看到`#div1`作为容器，同时容纳了块状元素`#div2`和内联元素`&lt;a&gt;`。这展示了块状元素作为容器的能力，可以包含内联元素和其他块状元素。在增加`#div3`这个蓝色块状元素后，...

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

    1. **内联元素与块级元素的主要区别**：最根本的区别在于它们在文档流中的行为不同。块级元素默认独占一行，而内联元素则共享同一行。此外，块级元素可以设置宽度和高度等属性，而内联元素不可以。 2. **Clear属性...

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

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

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

    #### 块元素与内联元素之间的转换 在某些情况下，可能需要将一个元素从块元素变为内联元素，或者相反。这可以通过CSS中的`display`属性来实现： - `display: block;` 可以将内联元素转换为块元素。 - `display: ...

    CSS文档流与块级元素,css

    #### 内联元素与块级元素的转换 有时，为了实现特定的布局效果，可能需要将内联元素转换为块级元素，或将块级元素转换为内联元素。这可以通过设置`display`属性来实现： - 将内联元素转换为块级元素：`display: ...

    块状元素与内联元素大全

    ### 块状元素与内联元素大全 在HTML中，根据元素的默认显示方式，可以将所有的HTML标签大致分为两大类：块状元素（Block-level Element）与内联元素（Inline Element）。这两种类型的元素在网页布局中扮演着重要的...

    Javascript获取相同CSS样式的元素

    这通常涉及到CSS的`style`属性，它可以访问元素的内联样式。例如，`element.style.color`会返回指定元素的颜色值。如果样式是在外部样式表或内部`&lt;style&gt;`标签中定义的，我们可以使用`window.getComputedStyle...

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

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

    CSS 盒模型、块状元素与内联元素、CSS选择器

    ### CSS盒模型、块状元素与内联元素、CSS选择器 #### 一、CSS盒模型 CSS盒模型是理解CSS布局的关键概念之一。它定义了网页元素如何根据其CSS属性进行渲染。盒模型主要由四个部分组成： - **内容（Content）**：这...

    css3块元素居中

    在CSS3中，实现块元素的居中是一个常见的布局需求，尤其当涉及到页面设计与响应式布局时。根据所提供的文件信息，我们可以详细探讨几种在不同场景下实现块元素居中的方法，以及理解其中的原理。 ### 1. 内联元素...

    CSS快速入门 中文 手册

    - **盒模型（Box Model）**：CSS中元素被视为矩形框，包括content、padding、border和margin。 - **选择器优先级**：ID选择器 &gt; 类选择器 &gt; 标签选择器 &gt; 通配符选择器；内联样式 &gt; 内部样式 &gt; 外部样式。 - **响应...

    移除html元素的某个css属性

    特别是在JavaScript与CSS的交互过程中，如何有效地控制元素的样式变得尤为重要。本文将深入探讨如何正确移除HTML元素上的某个CSS属性，包括为何简单地将其设置为空可能无法达到预期效果，以及推荐的做法。 #### 为...

    div+css有实例,易学易懂

    - **在内联元素中使用边界属性**：`margin`在内联元素中的使用情况。 ### 浏览器及兼容问题 - **浏览器介绍**：常见的浏览器及其特点。 - **要兼容哪些浏览器**：针对目标用户群体选择合适的浏览器进行兼容测试。 ...

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

    例如，`&lt;button&gt;`元素在某些情况下可以作为块级元素独立显示，而在其他情况下可以作为内联元素与其他文本并列。其他可变元素包括`&lt;applet&gt;`（Java小程序）、`&lt;iframe&gt;`（内联框架）、`&lt;ins&gt;`（插入文本）等。这些...

    HTML5&CSS3网页制作：元素的类型.pptx

    - 示例：`&lt;img&gt;`元素可以设置宽度和高度，并与其他内联元素并排显示。 理解这些元素类型对于创建响应式和动态布局至关重要。在CSS3中，可以通过display属性改变元素的默认类型，例如将一个块状元素变为内联元素（`...

    CSS3页面元素倾斜效果.zip

    为了避免这种情况，我们可以将倾斜应用于一个内联块元素或者使用`display: inline-block;`或`display: flex;`，这样不会影响到其他元素的排列。 JavaScript和jQuery在CSS3倾斜效果中的作用主要体现在动态改变倾斜...

Magicbox
Global site tag (gtag.js) - Google Analytics