`
ll584310793
  • 浏览: 18388 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

block元素包含inline元素

 
阅读更多

元素与元素之间的嵌套应该说是很正常的，但是当block元素中包含inline元素的时候，你有没有想过会发生什么样的情况呢？这些对于我这个初学者来说有点不知道耶，但是测试之中我发现了宝贝耶，很郁闷的东东，当block元素包含inline元素的时候，竟然会向左偏移几十px呢，看到这样的情况我傻眼了，因为我还没见过这么变态的bug，我是左找右找啊。开始我以为是那里设置了边距吧，但是我的代码里面没有啊，无意之中我把所有的inline元素该为了block元素，bug就解决了。我有点无语。

分享到：
| a href # 用法
评论
发表评论

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

相关推荐

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

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

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

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

    display:inline、block、inline-block的区别（转的）

    `inline`元素的特点包括： 1. 不会自动换行，与其他`inline`元素并排显示。 2. 宽度和高度不可设置，它们由内容决定。 3. 可以与其他`inline`元素共享一行。 4. 不允许有边距（margin）和填充（padding），但可以...

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

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

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

    ### HTML+CSS中完全的行内元素（inline element）和块元素（block element） 在HTML与CSS中，元素被分为两大类：行内元素（inline element）和块元素（block element）。这两种类型的元素有着不同的显示特性和布局...

    block 和 inline 的区别

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

    CSS inline-block属性概述及其使用示例

    Inline-block是元素display属性的一个值。这个名字的由来是因为，可以简单的解释为inline+block ；display设置这个值的元素，兼具...行内块元素（inline-block elements）在内部他的表现类似block元素，比如他拥有bloc

    inline-block带来的元素间距问题解决

    然而，`inline-block`元素之间有时会出现意想不到的间距，这是由于它们保留了与常规文本相似的空白字符处理规则，包括换行符和空格。 例如，以下HTML和CSS代码展示了`inline-block`元素之间的间距问题： ```html ...

    display:inline-block的实际应用

    3. **内联限制**：尽管 `display:inline-block` 元素可以包含块级元素，但它们仍然不能包含常规的内联内容，如文本，除非使用 `white-space:nowrap` 阻止换行。 在实际应用中，`display:inline-block` 常用于创建...

    跨浏览器的inline-block声明上承诺了很多提供的却很少

    "，将所有inline-block元素的顶部对齐，这样可以消除基线对齐带来的问题，从而在大多数浏览器中获得一致的布局效果。 对于那些不支持inline-block的旧版浏览器，例如Firefox2，解决方案是使用Mozilla特有的"-moz-...

    关于块级元素和行内元素

    块级元素的 display 属性可以设置为 block、inline、inline-block 等。行内元素的 display 属性可以设置为 inline、inline-block 等。 对于块级元素，我们可以设置宽度、高度、margin、padding 等样式。对于行内...

    inline-block 前世今生1

    display:inline-block 属性是CSS布局中的一个重要概念，它允许元素具有内联元素的特性（如排列在同一行内），同时又能像块级元素那样设置宽度、高度和垂直对齐。这个属性在前端开发中被广泛应用，尤其是用于创建响应...

    关于css display: inline block inline-block的区别分析

    - 当你需要在一个行内元素中包含复杂的布局，如多个元素的排列，`display: inline`可能无法满足需求。 2. **display: block** - `display: block` 使元素表现为块级元素，这些元素会占据一整行，不论其内容有多少...

    span掉落的演示代码

    1. **行内元素的高度计算**：内联元素的高度不包括内边距和边框，除非它们被转换为`inline-block`。因此，如果`span`或`div`设置了`inline-block`并且包含文本，它们的高度可能不足以容纳所有内容，导致排版错位。 ...

    使用display:inline-block居中没有宽度的元素

    "使用display:inline-block居中没有宽度的元素"这个主题主要涉及到CSS中的两个关键概念：`text-align`属性和`display`属性的`inline-block`值，它们在实现动态或未知宽度元素的居中对齐上发挥着重要作用。...

    Firefox Bug: inline/inline-block的间隙采用代码缩进可解决

    这个bug产生的原因在于，浏览器在解析HTML时，会对`inline`或`inline-block`元素间的空白字符（包括空格、换行符等）进行处理，导致元素间产生了间距。在CSS规范中，`inline-block`元素应该像文本一样紧密排列，但...

    行内元素和块级元素 displayDemo.html

    在HTML中，元素被分为两种主要类型：行内元素（Inline Elements）和块级元素（Block-level Elements）。这两种元素在页面布局中起着至关重要的作用，它们各自有不同的特性和使用场景。 1. 行内元素（Inline ...

    css几种解决inline-block间隙的方案(整理)

    `inline-block`元素间的空格，包括换行符和缩进，都会被浏览器解析为无形的空白字符，从而在元素之间产生间距。这个间距的大小通常等于父元素字体大小的约1/3。 1. **改变书写结构** 一种直观的解决方法是通过...

    block-inline-elements

    Block元素和Inline元素是HTML中的两种基本元素类型，它们各自具有不同的特性，并且在构建网页结构时起着至关重要的作用。 Block元素，如`<div>`, `<p>`, `<h1>`至`<h6>`等，它们在页面布局中通常占据整个宽度，形成...

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