文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

HTML元素分类：inline、inline-block、block

(3)不会自动进行换行 (4)元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。...inline-block 行内块状元素特征：(1)不自动换行 (2)能够识别宽高 (3)默认排列方式为从左到右 block div、p、ul、h1等标题元素、ol、form、table 块状元素特征：...(1)能够识别宽高 (2)margin和padding的上下左右均对其有效 (3)可以自动换行 (4)多个块状元素标签写在一起，默认排列方式为从上至下 补充说明： 在HTML5中，程序员可以自定义标签，...）:浮动元素会脱离文档流，并使得周围元素环绕这个元素。...如果你的html中一系列元素每个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空白。而浮动元素会忽略空白节点，互相紧贴.

1.5K40
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Css学习手册之基本篇

    nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。...，越大，则越上面 12. float 浮动 CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。...浮动元素之前的元素将不会受到影响。 如果图像是右浮动，下面的文本流将环绕在它左边 如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻 文本太长时，换行的策略 normal 只在允许的断字点换行 break-word 在长单词或 URL 地址内部进行换行。...还有一个主要针对英文单词的换行策略 word-break normal 使用浏览器默认的换行规则。 break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。 d.

    1.9K60

    div 等块级标签横向排列的方法总结

    这也是我初学前端时最困扰的问题~ 以下面这组 div 为例，wrap 的高度由内容撑开 ? 平时是这样的，上下排列~ ? float 浮动 ? ?...成功横向排列了，但是有几个问题~ float 的特点： 多个 div 右浮动时，顺序会颠倒，请注意看 div2 和 div3，可以通过将它们再用一个 div 包起来，然后对它们设置左浮动，对父 div...脱离文档流，若父元素高度由内容撑开，那么就撑不开，从图中可以看到 wrap 没了，因为高度变为了 0，可通过清浮动来解决。 文字会环绕在浮动元素周围，图中未表现出来。 不能换行，图中未表现出来。...这个空白其实是空白符，因为 inline-block 会使元素在行内排列，也就是跟文字在一起排列，而我们源代码中 div 和 div 之间的空格、Tab、换行符在浏览器里会被合并成一个空白符，所以就会出现缝隙...在源代码里把前一个 div 的结束标签和后一个 div 的开始标签贴在一起。可读性极差，丑拒。 ? 不用 inline-block，嘿嘿~ 可以换行，如下图 ?

    3.3K20

    小结CSS的float属性

    元素不浮动，并会显示在其在文本中出现的位置。 inherit： 规定应该从父元素继承 float 属性的值。...3.浮动引发的问题 3.1破坏性 这个在我的一篇文章小结BFC的基本知识与应用中也提过：如果父元素的子元素都是浮动元素，那么父元素的高度会发生高度塌陷。...3.3 其他问题 被设置了float的元素会脱离文档流，效果是布局时看起来是会尽量往一边靠拢，空格、换行这些都和该元素没关系了。...快速修正：给浮动设置 display:inline; 而且不用担心，它依然是块级元素。 (3)3像素间距： 挨着浮动元素的文本会神奇的被踢出去3像素，好像浮动元素的周围有一个奇怪的力场一样。...快速修正：在受影响的文本上设置宽度或高度。 (4)IE7 中，底边距 bug是当浮动父元素有浮动子元素时，这些子元素的底边距会被父元素忽略掉。快速修正：用父元素的底内补白(padding)代替。

    1.2K50

    【CSS】410- 关于CSS盒子模型、BFC及其应用

    随便写个 div, 打开 Chrome 的开发者工具, 在右边栏能看到这样一个直观的盒模型图. ?...Padding(内边距) - 清除内容周围的区域, 内边距是透明的. Content(内容) - 盒子的内容, 显示文本和图像等....清除浮动. 这个很容易理解, 浮动的元素会脱离文档的普通流. 如果盒子内的元素是浮动元素且盒子本身不具备 BFC 特性, 那么这个盒子在视觉上并不会包裹住内部浮动元素, 总大小也不包括内部浮动元素....触发盒子的 BFC 特性后: ? 3. 阻止元素被浮动元素覆盖 下图是一个文字环绕效果. ? 蓝色 div 是一个浮动元素, 灰色 div 是一个块级元素....会造成上图的原因是因为灰色 div 被蓝色 div 所覆盖, 但文本不会被覆盖, 所以被强行压缩换行. 如果想要避免这种情况, 可以触发灰色 div 的 BFC 特性. ?

    65120

    小结CSS的float属性

    元素不浮动，并会显示在其在文本中出现的位置。 inherit： 规定应该从父元素继承 float 属性的值。...3.浮动引发的问题 3.1破坏性 这个在我的上一篇文章小结BFC的基本知识与应用中也提过：如果父元素的子元素都是浮动元素，那么父元素的高度会发生高度塌陷。...，空格、换行这些都和该元素没关系了。...快速修正：给浮动设置 display:inline; 而且不用担心，它依然是块级元素。 (3)3像素间距： 挨着浮动元素的文本会神奇的被踢出去3像素，好像浮动元素的周围有一个奇怪的力场一样。...快速修正：在受影响的文本上设置宽度或高度。 (4)IE7 中，底边距 bug是当浮动父元素有浮动子元素时，这些子元素的底边距会被父元素忽略掉。快速修正：用父元素的底内补白(padding)代替。

    5.1K1403

    CSS 基础系列：inline-blcok和float

    虽然设置浮动跟设置inline-block有些特征类似，但两者的区别还是非常明显的: 文档流（Document flow）: 浮动元素会脱离文档流，并使得周围元素环绕这个元素。...因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素跑到下面去。...垂直对齐（Vertical alignment）： 在两个div的高度不同时，两种方式的对齐效果也不相同： image.png 图一：display:inlne-block属性修饰的元素没有脱离文档流...，当然会与在正常的文档流中的元素一样采取的底端对齐方式。...如果你的html中一系列元素每个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空隙。而浮动元素会忽略空白节点，互相紧贴。

    75710

    【Web前端】万物皆可“浮动”（补充）

    ​​float​​ 属性最初的设计目的是在文本块内使图像浮动，从而让文字环绕在图像的左右两侧，这种效果在报纸版面中很常见。随着时间的推移，这一属性已成为网页设计中实现多列布局的常用工具。...一、浮动的背景知识 浮动是 CSS 中的一个布局属性，用于将元素从正常文档流中移出，并将其放置在容器的左侧或右侧。浮动的最初目的是为了实现文本环绕效果，即使图像或其他元素环绕在文本周围。...inherit​​​：继承父元素的浮动属性。 1.2 浮动的影响 当一个元素被设置为浮动时，它会脱离文档流，其他的块级元素会环绕在它周围。浮动 二、简单的例子 div> div> 示例中我们创建了一个容器 ​​container​​，其中包含一个浮动的图像和一段文本。...清除浮动 浮动带来的一个常见问题是，浮动元素可能会导致其包含块的高度计算出现问题。为了解决这个问题，我们需要清除浮动。以下是几种常见的清除浮动的方法。

    8810

    【CSS】309- 复习 CSS盒模型

    即使存在浮动也是如此； （4）BFC 在页面上是一个隔离的独立容器，外面的元素不会影响里面的元素，反之亦然。...2.5.3 CSS在什么情况下会创建出BFC（即脱离文档流） 0、根元素，即 HTML 元素（最大的一个 BFC） 1、浮动（ float 的值不为 none ） 2、绝对定位元素（ position...内容不会被修剪，会呈现在元素框之外（overflow 不为 visible） 2.5.4 BFC作用（使用场景） 1、自适应两（三）栏布局（避免多列布局由于宽度计算四舍五入而自动换行） 2、避免元素被浮动元素覆盖...3、可以让父元素的高度包含子浮动元素，清除内部浮动（原理：触发父 div 的 BFC 属性，使下面的子 div 都处在父 div的同一个 BFC 区域之内） 4、去除边距重叠现象，分属于不同的 BFC...都有效； （3）Box 垂直对齐方式：以它们的底部、顶部对齐，或以它们里面的文本的基线（baseline）对齐（默认，文本与图片对其），例：line-heigth 与 vertical-align。

    1.5K30

    【愚公系列】2022年04月 微信小程序-Flex布局详解

    1.1 传统布局 盒子模型：我们知道当并列书写多个div标签，它们会纵向向下排位，如果我们想将多个div并列成一排，就得借助position，float，或display属性，这便是传统的盒模型做法。...CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。...Padding(内边距) - 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像。...例如我们让多个div横向排列，传统做法是使用浮动，但浮空后因为脱离文档流的缘故，父元素会失去高度，这又涉及了清除浮动等一系列的问题。...而flex布局相对简单很多，修改父元素display:flex，你会发现div自动就排列成了一行，而且没有浮动之后的副作用，从回流角度考虑，flex的性能更优于float；随着浏览器不断兼容以及旧版本的淘汰

    1.3K30

    CSS

    a:visited（访问过的链接），用于阅读文章，能清楚的判断已经访问过的链接 　　a:active（在链接上按下鼠标时的状态），用于表现鼠标按下时的链接状态 伪类选择器：伪类指的是标签的不同状态...>内容div> CSS Float（浮动） CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。...一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。 浮动元素之前的元素将不会受到影响。...如果图像是右浮动，下面的文本流将环绕在它左边： ? 如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。 在这里，我们对图片廊使用 float 属性： ?...元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。 clear 属性指定元素两侧不能出现浮动元素。 使用 clear 属性往文本中添加图片廊： ? ?

    1.4K60

    不规则图形背景排版高阶技巧 -- 酷炫的六边形网格背景图

    首先，我们会想到这样一种解决方案： 每一行为一组，设置一个父 div 容器，填满六边形元素，设置元素不换行 给偶数行设置一个固定的 margin-left 基于这个策略，我们的代码，大概会是这样： div...在 CSS 中，有一个神奇的元素能够让元素以非直线形式排布。它就是 shape-outside！...如果你对 shape-outside 不太了解，也可以先看看我的这篇文章 -- 奇妙的 CSS shapes shape-outside 是 CSS 中的一个属性，用于控制元素的浮动方式。...它允许你定义一个元素浮动时周围元素的形状。例如，你可以使用 shape-outside 属性来定义一个元素浮动时周围元素的形状为圆形、六边形等。...所以，shape-outside 的本质其实是生成几何图形，并且裁剪掉其几何图形之外周围的区域，让内容能排列在这些被裁剪区域之内。 所以，了解了这个本质之后，我们再将他运用在上面的六边形布局之中。

    93910

    Web前端温故知新-CSS基础

    例如，字体、字号、颜色、行距等可以在body元素中统一设置，然后通过继承影响文档中的所有文本。...（9）word-break ：自动换行 　　normal 使用浏览器默认的换行规则，不打断单词显示； 　　break-all 允许在单词内换行； 　　keep-all 只能在半角空格或连字符处换行； 　　...（10）word-wrap ：允许长单词或URL地址换行到下一行 　　normal 只在允许的段字点换行（浏览器保持默认处理） 　　break-word 在长单词或URL地址内部进行换行 五、盒子模型...（1）标准流　　 　　要了解浮动，就不得不先了解html中的标准流。...其本质是闭合浮动，之所以要用清除浮动，就是为了解决内部高度为0的问题。

    3.5K40

    块级元素与行内元素的区别以及BFC模型的简单解释

    块级元素与行内元素的区别以及BFC布局的简单解释 工作中其实经常用到一些span标签和div标签来进行内容的显示，但涉及到文本标签的换行，总得多花那么一两分钟多写一下，今天就专门来瞅一瞅。...style> ``` 就上述代码而言可以看到#content中的内容会跟div2中的内容重叠，同时也可以看到div2是直接换行，紧贴着其父元素的左侧往下排列，这就是普通文档流的排列规则...> 像上面的代码，content会自动换行，div的左侧有内容，右侧则直接留白，有兴趣的手动练习一下 当然，如果行内元素你没给他设置word-wrap属性的话，文本内容也会在同一行内往右延伸，不会自动换行的...此外还可以用于布局、清除浮动(在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度...这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。)、防止margin重叠等场景

    82000

    CSS基础-浮动：float与清除浮动

    在网页布局中，float属性是一个极其重要的概念，它使得元素能够在页面的左右两侧排列，为实现复杂的布局结构提供了基础。然而，随之而来的“浮动元素”现象也带来了不少挑战，尤其是“浮动塌陷”问题。...一、浮动（float）基础 float属性最初设计用于文本环绕图片，但很快被广泛应用于网页布局中，使得块级元素能够从文档流中“浮动”到一侧，其他内容则围绕它流动。...二、清除浮动（clear） 为了解决浮动带来的布局问题，引入了clear属性。它用于控制元素周围是否允许浮动元素存在，值包括left、right、both和none。 常见清除方法 1....div style="float:left;">浮动元素div> div style="clear:both;">div> 3.....container { overflow: hidden; } 三、现代布局技术与浮动 虽然浮动仍然是布局的重要手段，但随着Flexbox和Grid布局的普及，它们在很多场景下已经取代了浮动作为首选布局方式

    30310

    Web前端温故知新-CSS基础

    例如，字体、字号、颜色、行距等可以在body元素中统一设置，然后通过继承影响文档中的所有文本。...（9）word-break ：自动换行 　　normal 使用浏览器默认的换行规则，不打断单词显示； 　　break-all 允许在单词内换行； 　　keep-all 只能在半角空格或连字符处换行； 　　...（10）word-wrap ：允许长单词或URL地址换行到下一行 　　normal 只在允许的段字点换行（浏览器保持默认处理） 　　break-word 在长单词或URL地址内部进行换行 五、盒子模型...（1）标准流　　 　　要了解浮动，就不得不先了解html中的标准流。...其本质是闭合浮动，之所以要用清除浮动，就是为了解决内部高度为0的问题。

    2.4K20
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券