CSS中,父div区域没有覆盖子div的原因可能有以下几种:
针对以上原因,可以通过调整CSS样式来解决,如设置父div的宽度和高度、清除浮动、设置子div的display属性等。
实际看到的效果确实蓝底白字与红底白字,为什么与写的代码有出入呢。 究其原因 为什么子组件的字体颜色不是黑色确是白色? ?...打开调试工具,看到子组件被渲染成一个Child 但是样式却被父组件的样式给覆盖变成了白色, 原因:这是因为在w3c 规范中,CSS 始终是「全局的...为什么同样.parent .component 和.child .component是父级覆盖子级? ?...如果在向下匹配的过程中,没有匹配上的则回溯到上一级继续匹配其他子叶结点。...最后 文章首发于:为什么我的样式不起作用? 参考:浏览器渲染原理与过程 参考:CSS选择器从右向左的匹配规则 DEMO地址
移动端布局 上下结构布局,上面是html、css的编辑区域,下面的灯笼的展示区域 1111-1.png PC端布局 左右结构布局,左边是html、css的编辑区域,右边是灯笼的展示区域 1111-2...-- 这是css代码编辑区域 --> <div class="preview...50%宽度,留一些空间给预览区域 */ .edit{ width: 50%; height: 100%; background-color: #1d1f20;...给灯笼加两个盖子css await this.doStyleStep(4) await delay(500) // 13.
slot插槽 一、为什么要使用插槽 在生活中,电脑的USB接口对应不同的设备就提供不同的功能,可以接键盘、鼠标、音响、U盘…… 在组件中,slot的使用可以让封装的组件更有扩展性。...我也是代替插槽的部分 父组件若不修改slot,则slot部分由子组件决定默认展示。...父组件修改slot,则修改的内容会覆盖子组件slot的内容。 二、具名插槽slot 当子组件的功能增多时,一个组件中不只设置了一个插槽,那父组件想修改特定的插槽部分时,如何指定其中的一个插槽修改。...template标签中,利用v-slot的指令,并给v-slot指令指定属性值(子组件的name),从而修改并覆盖子组件中的slot 注意:子组件中默认slot的name是default。...三、作用域插槽 父组件想要使用子组件中的数据,除了$emit(),作用域插槽也提供了方法。
,在子组件中没有指定插槽名,父组件默认插入到默认插槽中。...父组件代码 在子组件中没有指定插槽名,父组件默认插入到默认插槽中。...下面代码在父组件指定了名称为“header”的插槽内容,在子组件中有相同名称的插槽,父组件插槽内容会覆盖子组件插槽内容。...父组件代码 如果在父组件中指定了插槽名,在子组件中有相同名称的插槽,父组件插槽内容会覆盖子组件插槽内容。...,父组件中指定名称的插槽内容会覆盖子组件中相同名称的插槽内容。
这个问题本身不难,实现的方法也有一些,主要是有一些细节需要注意。...border-radius 失效 仔细看上面的 Demo,设置了 border-radius: 10px 但是实际表现没有圆角。...因为用到了 background-clip: border-box,所以还需要 background-origin: border-box 使图案完整显示,可以尝试下关掉这个属性,即可明白为什么需要这样做...那么,我们只需要给它加一个父容器,父容器设置 overflow: hidden + border-radius 即可: ...clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部 SVG 的路径。
深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文将从盒模型开始,一步步涉及一些常见的前端笔试和面试点 主要参考自第一篇文章,然而笔者在读的时候未觉详尽...当年,Netscape4(译注:网景公司早期的浏览器)和IE4(微软公司早期的浏览器)实现CSS机制时,并没有遵循W3C提出的标准。...因此'没有DOCTYPE'意味着触发怪异模式:既依据旧式的CSS规则渲染网页。 相反,如果开发者明确知道包含DOCTYPE,他们应该明白他们想要怎么做。...因此大部分的DOCTYPE声明将触发严格模式:即依据标准的CSS规则渲染网页。 任何新的或未知的DOCTYPE将触发严格模式。 一些页面依据怪异模式而写,但是却包含DOCTYPE。...,border宽度为20px, margin宽度为30px 5.DOM属性之 OffsetWidth / ClientWidth / ScrollWidth 6.边距重叠 什么是边距重叠 如下图,父元素没有设置
margin看起来是一个相当简单的事情,但是,在本文中,咱们将看一些在使用margin一些让人迷惑有有趣的事情。 特别是,margin之间如何相互作用,以及 margin 重叠效果。...但是你会发现实际的效果是第一项和最后一项与父元素的的margin齐平,好像子元素和父元素之间没有50px的margin一样。...创建格式化上下文(BFC) BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。...这样,就很少会遇到 margin 重叠的问题,因为有margin的边总是与没有margin的边相邻。 这个解决方案并不能解决你可能遇到的问题,因为子元素的margin会与父元素相互重叠。...这个特定的问题往往不那么常见,但知道它为什么会发生可以帮助你想出一个解决方案。
为什么要清除浮动? 清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题。 当父元素不给高度的时候,内部元素不浮动时会撑开,而浮动的时候,父元素变成一条线。...标签clear:both 原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度 缺点:如果页面浮动布局多,就要增加很多空div,让人感觉很不爽,添加无意义标签...height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度 缺点:不能和position配合使用,因为超出的尺寸的会被隐藏 建议:只推荐没有使用position或对overflow...div定义overflow:auto 原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度 缺点:内部宽高超过父级div时,...div也一起浮动 原理:所有代码一起浮动,就变成了一个整体 优点:没有优点 缺点:会产生新的浮动问题。
*+{CSS} 效果·: 进阶 后代选择器:选择父元素 后代中 满足条件的元素(空格隔开) 选择器1 选择器2+{} 儿子选择器:选择父元素 子代中 满足条件的元素 选择器1 > 选择器2+{}...➢ CSS 中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域( margin)构成,这就是 盒子模型 ---- 组成 1.内容区域:content...>Hello World Hello CSS 效果: ---- 内边距( padding ) 设置 边框 与 内容区域 之间的距离...*/ } 浮动 为什么使用浮动?...没有设置间距,但上面代码的效果却带了间距: 这是由于浏览器解析行内或行内块标签时,若标签换行,那么效果也出现一个换行的距离。
方案2 在父元素中,追加空子元素,并设置其clear属性为both clear是css中专用于清除浮动的属性 作用:清除当前元素前面的元素浮动所带来的影响 取值: 1、none 默认值...优势:简单,代码量少,没有结构和语义化问题 弊端:对后续元素会有影响 方案4 为父元素设置overflow属性 取值:hidden 或 auto 优势:简单,代码量少 弊端:如果有内容要溢出显示...疑问 为什么会margin边距重叠?...overflow:hidden, 语义应该是溢出:隐藏,按道理说,子元素浮动了,但依然是在父元素里的,而父元素高度塌陷,高度为0了,子元素应该算是溢出了,为什么没有隐藏,反而撑开了父元素的高度?...为什么display:table也能清除浮动,原理是什么?
加载差异:link 引用的 css,在页面加载时同时加载。而 @import 在页面加载完后才加载 3. 兼容性:link 是 html 标签,没有兼容问题。...在 CSS2.1 中,伪元素都是使用 单冒号 来表示伪元素的,但在 CSS3 规范中,伪元素的语法被修改为使用 双冒号 17. CSS 预处理器/后处理器是什么?为什么要使用他们?...、 • 为什么要使用他们?...同一个父级元素下的元素层叠效果是受父级影响的,就是说如果你的父级z-index很小,那你子级设置再大也没有用 19. 常见的 css 布局单位?...• absolute: 绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于 • relative: 相对定位元素的定位是相对其正常位置 • fixed: 元素的位置相对于浏览器窗口是固定位置
取值:left、right、both 3.2 父元素高度塌陷问题 为什么要清除浮动,父元素高度塌陷 解决父元素高度塌陷问题:一个块级元素如果没有设置height,其height是由子元素撑开的。...对子元素使用了浮动之后,子元素会脱离标准文档流,也就是说,父级元素中没有内容可以撑开其高度,这样父级元素的height就会被忽略,这就是所谓的高度塌陷。...3.3 清除浮动的方法 方法1:给父级div定义 高度 原理:给父级DIV定义固定高度(height),能解决父级DIV 无法获取高度得问题。...,让父级DIV能够获取高度。...这种方式既不实用,也可能存在着着一些问题。
,给其中一个div设置左浮动,为什么第二个div会被第一个div覆盖? ...1.1 它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。...hack,利用css hack *margin-x 调试完成 2、css hack(针对不同浏览器写不同css样式的过程) 2.1 书写css hack 顺序:先写全部都支持的...,给其中一个div设置左浮动,为什么第二个div会被第一个div覆盖? ...1.1 它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
因为涉及的内容较多,我分5篇内容发出来,好逐一进行让大家消化这些内容,本次我把前13-24个CSS重难点整理出来,具体内容如下: 13、如何判断元素是否到达可视区域(图片懒加载原理)?...20、为什么有时候用translate来改变位置而不是定位? 21、清除浮动的3种方式 22、position的属性有哪些?共同点与不同点?...13、如何判断元素是否到达可视区域(图片懒加载原理)?...20、为什么有时候用translate来改变位置而不是定位?...--清除浮动--> 父级添加overflow属性,或者设置高度 父级添加伪元素::after来清除浮动 .parent:
[image.png] 在进行html布局及css编写的时候,你是否遇到过这样的问题: 子元素设置浮动脱离文档流后,父元素无法将其完全包裹 子元素浮动实现两栏布局时,另一个子元素与浮动子元素重叠 垂直方向的外边距...块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。...常见应用场景 使父元素包含浮动元素 下面例子解释如何让浮动内容和父元素等高,清楚浮动负面影响 html I am a floated...如下图: [enter image description here] 当父元素设置了BFC之后,父元素与子元素p重叠区域将不再合并 .outer { background-color: #ccc;... css .float{ float: left; } [enter image description here] 这时候如果不想要右侧文字环绕浮动文字盒子,在左侧div
但是一说到 CSS 包含块,有的小伙伴就懵圈了,什么是包含块?好像从来没有听说过这玩意儿。 好吧,如果你对包含块的知识一无所知,那么系好安全带,咱们准备出发了。...,有时就会出现一些你认为的莫名其妙的现象。...这个答案确实是没有问题的,但是如果我追问你是怎么得到这个答案的,我猜不了解包含块的你大概率会说,因为它的父元素 div.container 的 width 为 500px,50% 就是 250px,height... 上面是一段简单的 HTML 代码,在没有添加任何 CSS 代码的情况下,你能说出各自的包含块么?...为什么会这样?
行框的排列会受到中间空白(回车空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔,把字符大小设为0,就没有空格了。...解决方法: 相邻元素代码代码全部写在一排 浮动元素,float:left; 在父级元素中用font-size:0; 2.如果需要手动写动画,你认为最小时间间隔是多久,为什么?...清除浮动的方式: 父级div定义height 最后一个浮动元素后加空div标签 并添加样式clear:both。 包含浮动元素的父标签添加样式overflow为hidden或auto。...父级div定义zoom 7.CSS3新增伪类有那些?...8.前端项目中为什么要初始化CSS样式? 因为浏览器的兼容问题,不同浏览器对标签的默认值是不同的,如果没有对浏览器的CSS初始化,会造成相同页面在不同浏览器的显示存在差异。
解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {} 14 为什么要初始化CSS样式...都位于同一个 BFC 区域之中) 自适应两栏布局 可以阻止元素被浮动元素覆盖 20 为什么会出现浮动和什么时候需要清除浮动?...清除浮动的方式: 父级div定义height 最后一个浮动元素后加空div标签 并添加样式clear:both。 包含浮动元素的父标签添加样式overflow为hidden或auto。...当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如 padding-top , padding-bottom , margin-top , margin-bottom...CSS中起高度作用的是height和line-height,没有定义height属性,最终其表现作用一定是line-height。
我其实很长一段时间没有写 CSS 了,对于里面的一些细节也比较模糊了,因此决定重拾 CSS,来重新捋一捋这题目中的一些知识点。...margin-top:100% 为什么能够自适应宽度? 现在我们已经将这个示例转化成一个比较简单的形态,没有过多的知识。...此时是无关父元素,以及无关外层position 的设置的。 Case4 在 case2 和 case 3 的基础上,会有一些特例影响包含块的寻找。...image-20200519203941769 可以看到如果在在没有 clearance 的情况下,父元素底部是会随着子元素一起坍塌的,但是如果中间有 clearance 的情况下,父元素的底部则不会坍塌...-> 伪元素(Pseudo elements) margin-top:100% 为什么能够自适应宽度?
领取专属 10元无门槛券
手把手带您无忧上云