为什么li元素与` `block` `显示重叠？

li元素与block显示重叠的原因是因为li元素默认是以display: list-item的方式显示，而block元素默认是以display: block的方式显示。在默认情况下，list-item元素会在前面有一个项目符号或编号，而block元素则会占据一行的宽度。

当li元素的宽度设置为小于父元素的宽度时，li元素会自动换行，导致与后面的block元素重叠显示。这是因为li元素的默认display属性导致其宽度不会自动扩展到父元素的宽度。

要解决这个问题，可以通过修改li元素的display属性为inline-block或者flex，使其宽度自动扩展到父元素的宽度，从而避免与后面的block元素重叠显示。

相关·内容

li、img等元素设置inline-block后的空白间距问题

不过有一个问题，就是使用 inline-block 的元素之间会存在 4-5px 的空白间隙。今天就记录一下解决这个 4-5px 的方法。...从上面的 demo 可以看出，在 inline-block 的元素之间存在一个空白间隙。...结构5：首页产品介绍联系我们关于我们就是让 inline-block 元素丢失关闭标签。...方法三：设置父元素字体为0 ，子元素重新设置字体。...} 参考文献：如何解决inline-block元素的空白间距

1.6K0 0

关于元素间的边距重叠问题与BFC

一、边距重叠常见情况 1、垂直方向上相邻元素的重叠（水平方向上不会发生重叠） ? 2、垂直方向上父子元素间的重叠 ?...二、BFC 1、什么是 BFC BFC（Block Formatting Context），即块级格式化上下文，创建了 BFC 的元素是一个独立的容器，里面无论如何布局都不会影响到外面的元素 2、创建...right）（3）设置 position 属性，除了static 和 relative 以外的值（例如 absolute、fixed）（4）设置 display 属性，可以是 flex、inline-block...、table-cell... 3、BFC 的使用场景（1）解决元素间的边距重叠问题 -- 分别添加创建了 BFC 的父元素 ?...-- 为父元素创建 BFC ?

1.9K2 0

元素的显示与隐藏

在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。...display 显示 display 设置或检索对象是否及如何显示。...display : none 隐藏对象与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。特点：隐藏之后，不再保留位置。...visibility 可见性设置或检索是否显示对象。 visible : 　对象可视 hidden : 　对象隐藏特点：隐藏之后，继续保留原有位置。...auto : 　超出自动显示滚动条，不超出不显示滚动条 hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll : 　不管超出内容否，总是显示滚动条

4.3K4 0

【CSS】通过定位修改 display 显示模式 ( Display 显示模式转换 | inline-block 改块元素为行内块元素示例 | 为块元素设置浮动 | 为块元素设置定位 )

inline-block 可以改变显示模式 , 将元素的显示模式改为行内块显示模式 ; 使用浮动 , 也可以将块内元素改为类似于行内块的显示模式 , 浮动是脱标的 , 不占用标准流元素的位置... 显示效果 : 三、inline-block 改元素为行内块元素示例 ---- 将块级元素转为行内块元素 , 行内块元素如果不设置宽度 , 默认宽度与元素内容宽度一致.../* 将显示模式由块级元素改为行内块元素 */ display: inline-block; height: 100px; background-color: pink;... 展示效果 : 四、为块元素设置浮动 ---- 将块级元素设置为浮动元素 , 也能达到与行内块元素相同的效果 ; 代码示例 : 显示效果 : 五、为块元素设置定位 ---- 将块级元素设置为绝对定位元素 , 也能达到与行内块元素相同的效果 ; 代码示例 : <!

1.1K3 0

元素隐藏与显示属性及操作方式

元素的隐藏显示经常会使用，比如二级导航，响应式布局等等。...使用场景：让某元素在屏幕中不可见，如：鼠标:hover之后元素隐藏/显示常用属性方法： visibility: hidden; 浏览器对其渲染可是不可见，它在网页中占位置却不可点击，也就是说明元素不可见却仍然占据空间.../* 元素隐藏 */ display:none; /* 元素显示 */ display:block; 隐藏元素本身，并且在网页中不占位置，在隐藏的方法中，取none值这种方法一般是不可取的！...因为display：none是直接不显示，也就是不渲染此元素，如果它所作用的元素排版在页面较前，先渲染，就容易引起回流(reflow)和重绘(repaint),造成难以预知的后果。.../* 表示完全不透明*/ opacity:1; /* 表示完全透明*/ opacity:0; 注意：会让元素整体变透明，包括里面的内容，如：文字、子元素等… 展示案例（导航的二维码默认隐藏点击显示）

1.5K3 0

CSS理解之margin

1.margin与百分比单位 Paste_Image.png Paste_Image.png 2.margin重叠 margin重叠通常特性：只发生在block水平元素（例如：p、div、list、item...只发生在垂直方向（margin-top/margin-bottom） margin重叠三种情况：相邻的兄弟元素父级和第一个/最后一个子元素空的block元素（自己和自己重叠） demo 1: 1... Paste_Image.png 去掉margin-bottom重叠与上面类似。...3.空的block元素margin重叠： Paste_Image.png 空的block元素发生margin重叠，也需要一些条件限制： Paste_Image.png 去掉空的block元素的margin...2.为什么明明容器定高，子元素也定高了，margin auto 0 无法垂直居中?

1.7K2 0

css笔记 - 张鑫旭css课程笔记之 margin 篇

为什么会有margin重叠？...2. margin重叠的特性 1).margin重叠只会发生在block水平元素上普通的div，p，ul，li标签会，图片、按钮使用margin的时候就不会。...解决margin重叠的方法父元素设置BFC（如overflow：hidden；如position：absolute等父元素设置border/padding 父元素与相邻子元素之间用...那么a里边的元素改成block元素，a也要变成block元素，同时使用padding或者border形成bfc，阻止margin穿透。 ?...那么a里边的元素改成block元素，a也要变成block元素，同时使用padding或者border形成bfc，阻止margin穿透。

2.6K2 0

CSS第二天

： ⭕块级元素 display：block ⭕行内元素 display：inline 行内块元素 display：inline-block 元素显示模式转换改变元素默认的显示特点，让元素符合布局要求...①块级元素：display：block 独占一行（一行只能显示一个）可以设置宽度和高度默认宽度是父元素的宽度，默认高度是内容高度注意：p和h里不能放块元素代表标签：div、p、h系列、ul...、li、dl、dt、dd、form、header、nav、footer…… ②行内元素：display：inline 一行显示多个默认宽度/高度是内容的高度和宽度不能设置高度和宽度注意：a元素不能包含...a元素，a链接可以放任何块级元素代表标签：a、span 、b、u、i、s、strong、ins、em、del…… ③行内块元素：display：inline-block 一行显示多个可以设置宽度/高度...4️⃣权重叠加计算：（行内样式的个数，id选择器的个数，类选择器的个数，标签选择器的个数）（0,0,0,0) 权重叠加计算公式：（每一级之间不存在进位） ---- 本节单词有： hover repeat

1.3K1 0

HTML和CSS

页面加载速度更快、结构化清晰、页面显示简洁。表现与结构相分离。易于优化（seo）搜索引擎更友好，排名更容易靠前。 5. img的alt与title有何异同？ strong与em的异同？...1.block 像块类型元素一样显示。 none 缺省值。向行内元素类型一样显示。彻底的隐藏元素包括位置也不在占据 inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。...根元素所在的 containing block 被称为 initial containing block，在我们常用的浏览器环境下，指的是原点与 canvas 重合，大小和 viewport 相同的矩形...盒子模型渲染模式的不同使用 window.top.document.compatMode 可显示为什么模式 54. CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？　　...什么是外边距重叠？重叠的结果是什么？　　答案：　　外边距重叠就是margin-collapse。

5.3K3 0

【CSS】元素的显示与隐藏 display visibility overflow 属性区别

元素的显示与隐藏 display属性 display：none 此元素不会被显示。 display：block 此元素将显示为块级元素，此元素前后会带有换行符。...display隐藏元素后，不占有原有位置 visibility 属性 visibility：visible 默认值。元素是可见的。 visibility：hidden 元素是不可见的。...visibility隐藏元素后，保留原有位置 overflow 属性 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。...scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。...100%; background: rgba(0,0,0, .3) url(bf.jpg) no-repeat center; } .tudou:hover .mask{ display: block

2.4K4 0

前端开发必会的HTMLCSS硬知识

figure添加标题时，与figcaption元素结合使用。 dialog:表示几个人直接的对话。与dt和dd元素结合使用，dt表示讲话者，dd表示讲话内容。...块元素和行内块元素可以设置宽高行内元素不可以，高度由内容撑开三者是可以通过display属性任意转换的 block 块状元素 inline-block行内块元素 inline 行内元素 2.3 块级元素特征...BFC 4.1 什么是边界塌陷（或边界重叠）？...4.3 多个inline元素之间会有空隙，为什么？...，所以inline-block元素之间就出现了空隙。

1.5K3 1

50道CSS基础面试题

inline（默认）–内联 none–隐藏 block–块显示 table–表格显示 list-item–项目列表 inline-block 8 position的值？...Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。每个元素的margin box 的左边，与包含块border box的左边相接触。...浮动带来的问题：父元素的高度无法被撑开，影响与父元素同级的元素与浮动元素同级的非浮动元素（内联元素）会跟随其后若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。...多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。 39 li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？...解决方法：可以将代码全部写在一排浮动li中float：left 在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px 40 display:inline-block

1.5K5 0

50道 CSS 经典面试题（包含答案）

9683 0

50道CSS面试题（附答案）

inline（默认）--内联 none--隐藏 block--块显示 table--表格显示 list-item--项目列表 inline-block 8 position的值？...Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。每个元素的margin box 的左边，与包含块border box的左边相接触。...浮动带来的问题：父元素的高度无法被撑开，影响与父元素同级的元素与浮动元素同级的非浮动元素（内联元素）会跟随其后若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。...多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。 39 li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？...解决方法：可以将代码全部写在一排浮动li中float：left 在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px 40 display:inline-block

1.6K3 0

CSS浮动知识

为什么需要浮动？因为一些网页布局要求，标准流不能满足我们的需要了，因此我们需要浮动来完成网页布局。...虽然我们前面学过行内块（inline-block）但是他却有自己的缺陷：它可以实现多个元素一行显示，但是中间会有空白缝隙，不能满足以上第一个问题。...，可以水平显示，不过 div 之间有间隙，不方便处理 */ /* display: inline-block; */ /* 设置浮动属性，可以让 div 水平排列，并且没有间隙 */...浮动(float)的扩展浮动元素与父盒子的关系子盒子的浮动参照父盒子对齐不会与父盒子的边框重叠，也不会超过父盒子的内边距 ? ...浮动元素与兄弟盒子的关系在一个父级盒子中，如果前一个兄弟盒子是：浮动的，那么当前盒子会与前一个盒子的顶部对齐；普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。

1.7K2 0

vue 控制某个元素的显示与隐藏之v-if属性

true为显示，false为隐藏。

7.5K3 0

面试必备 css面试必考点

inline（默认）–内联 none–隐藏 block–块显示 table–表格显示 list-item–项目列表 inline-block 8 position的值？...与包含块 (BFC) border box的左边相接触 (子元素 absolute 除外) BFC 的区域不会与 float 的元素区域重叠计算 BFC 的高度时，浮动子元素也参与计算文字层不会被浮动层覆盖...，环绕于周围应用: 阻止margin重叠可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中) 自适应两栏布局可以阻止元素被浮动元素覆盖 20 为什么会出现浮动和什么时候需要清除浮动...浮动带来的问题：父元素的高度无法被撑开，影响与父元素同级的元素与浮动元素同级的非浮动元素（内联元素）会跟随其后若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。...多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。 39 li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

1.1K1 0

CSS float浮动的深入研究、详解及拓展一一一一一一一一

上面这个例子旨在说明浮动属性（无论是左浮动还是右浮动）某种意义上而言与display:inline-block属性的作用是一模一样的，所以类似于display:block; float:left;的CSS...我们可以拿浮动元素与绝对定位元素做对比或许可以帮助理解。与浮动元素一样，绝对定位元素也具有“包裹性”，此“包裹性”适用于任何元素。那么，浮动元素与绝对定位元素的差别在哪里呢？...我觉得最主要的差别在于：绝对定位的元素脱离了文档流，而浮动元素依旧在文档流中；而这造成的显示上的差异就是：同处于文档流中的文字实体不会与浮动元素重叠，而会与绝对定位元素重叠。...这就是文字环绕显示的重要原因之一：虽然图片实际占据的高度为0，但是由于其宽度实体存在（包裹性），同样是content area 实体的文字不会与之重叠（外部的容器盒子containing box(p,...div,ul,li)会重叠），这就好比篮球场上站了个植物人，虽然其几乎不可能得分，运球之类，但是他的实体在那里，它可以阻挡同一水平空间上的同一类型的个体（即人）直接穿过去，要通过，得绕道。

8701 0

前端面试题归类-css

Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。每个元素的margin box 的左边，与包含块border box的左边相接触。...inline(默认)–内联none–隐藏block–块显示table–表格显示list-item–项目列表inline-blockdisplay:none与visibility：hidden的区别？...display:inline-block 什么时候会显示间隙？...浮动带来的问题：父元素的高度无法被撑开，影响与父元素同级的元素与浮动元素同级的非浮动元素(内联元素)会跟随其后若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。...li与li之间不可见空白间隔引起原因？解决办法？行框的排列会受到中间空白(回车空格)等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。

1.6K4 0

104道 CSS 面试题，助你查漏补缺（上）

[17] 18.li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？[18] 19.为什么要初始化 CSS 样式？[19] 20.什么是包含块，对于包含块的理解?...none 元素不显示，并从文档流中移除。 inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。 inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。...详细资料可以参考：《li 与 li 之间有看不见的空白间隔是什么原因引起的？》[67] 19.为什么要初始化 CSS 样式？...: #18li-与-li-之间有看不见的空白间隔是什么原因引起的有什么解决办法 [19] 19.为什么要初始化 CSS 样式？...与 li 之间有看不见的空白间隔是什么原因引起的？》

2.1K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云