开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

子div大于父div

是指子级元素的尺寸（宽度或高度）超过了父级元素的尺寸。这种情况通常发生在网页布局中，当子级元素的内容较多或者设置了固定的尺寸时，可能会导致子级元素超出父级元素的范围。

子div大于父div的情况可能会导致以下问题：

溢出：子级元素的内容会溢出到父级元素之外，这可能会导致布局变乱，页面无法正确显示。
覆盖：如果子级元素的定位属性为绝对定位或固定定位，而父级元素没有设置适当的定位属性，则子级元素可能会覆盖其他元素或者超出页面范围。

解决子div大于父div的问题可以采取以下方法：

使用溢出属性（overflow）：可以通过设置父级元素的overflow属性为hidden或auto，来控制子级元素的溢出部分是否显示或者通过滚动条来查看。
使用盒模型属性（box-sizing）：可以通过将父级元素的box-sizing属性设置为border-box，来包含子级元素的边框和内边距在内的尺寸计算。
调整子级元素的尺寸：可以通过调整子级元素的尺寸，使其适应父级元素的尺寸，或者使用响应式布局来适应不同设备的屏幕大小。
使用弹性布局（Flexbox）或网格布局（Grid）：这些新的布局方式可以更方便地控制子级元素的尺寸和位置，避免子div大于父div的问题。

腾讯云相关产品和产品介绍链接地址：

腾讯云产品概览页面：https://cloud.tencent.com/product
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
CDN加速：https://cloud.tencent.com/product/cdn
云安全（TCSEC）：https://cloud.tencent.com/product/saf
云音视频服务（CSS）：https://cloud.tencent.com/product/cav
物联网（IoT）：https://cloud.tencent.com/product/iot
区块链（TBaaS）：https://cloud.tencent.com/product/tbaas
移动开发平台（MTP）：https://cloud.tencent.com/product/mtp

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

从零开始学 Web 之 CSS3（七）多列布局，伸缩布局

CSS3中新出现的多列布局 (multi-column) 是传统 HTML 网页中块状布局模式的有力扩充。

01

【CSS3】 float浮动与position定位常见问题（个人笔记）

[前端CSS高频面试题]如何画0.5px的边框线（详解） CSS3基础属性大全 CSS3动画属性 animation详解（看完就会） CSS3 transform 2D转换之移动旋转缩放（详细讲解看完就会） CSS3 Z—Index 详解 CSS3 positon定位详解（通俗易懂）

04

第141天：前端开发中浏览器兼容性问题总结（二）

在浏览器中想要垂直居中，设置vertical-align:middle; 不起作用。例如：ie6下文本与文本输入框对不齐，需设置vertical-align:middle，但是文本框的内容不会垂直居中

02

CSS之关于min-width、max-width、min-height和max-height的使用

设div父盒子A中有个div子盒子B，设B的min-height为H，则H为盒子B的最小高度值，意思是：

02

【CSS】CSS 复合选择器 ② ( 子元素选择器 | 交集选择器 )

子元素选择器可以选择某个基础选择器选择出的元素组的直接子元素 ( 亲儿子元素 ) 中使用基础选择器选择元素 ;

01

CSS3之position:sticky使用

css3中position有个属性值sticky，即粘型定位，初级面试中会经常问到，大多数面试者往往会忽略这个属性值，其可以理解为相对定位（relative）和固定定位(fixed)的结合。

00

CSS的引入方式和复合选择器

CSS的引入方式样式表优点缺点范围行内样式表书写方便结构样式混写控制一个标签内部样式表部分结构和样式相分离没有彻底控制一个页面外部样式表完全实现结构和样式分离需要引入控制多个页面 <link rel="stylesheet" href="a.css"> emmet 语法快速生成HTML标签生成多个标签：div*****10 有父子级关系的标签：ul > li 兄弟关系：div**+**p 带有类名或者标签名的：div**.**pin

02

CSS杂谈

本文没有什么高深的东西，就是写几个CSS样式经常遇见的东西，可能大部分都已经知道怎么解决了，当做小白文浏览就好。

02

div设置height:100%;无效的原因

要解决这个问题，先的知道设置height:100%的原理，当你让一个元素的高度设置为百分比高度时，是相对于父元素的高度根据百分比来计算高度。所以当父元素没有高度时，height:100%也就没有高度值，所以我们来设置body高度。

02

CSS3之position/sticky使用

css3中position有个属性值sticky，即粘型定位，初级面试中会经常问到，大多数面试者往往会忽略这个属性值，其可以理解为相对定位（relative）和固定定位(fixed)的结合。

01

JQ 选择器大全

$(".one+div") <==> $(".one").next("div");

02

jquery选择器用法_jQuery属性选择器

一、基本选择器 1. ID选择器 ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素，并以iQuery包装集的形式返回给对象。使用公式:(“#id”) 示例：(“#box”) //获取id属性值为box的元素 2. 元素选择器元素选择器是根据元素名称匹配相应的元素。元素选择器指向的是DOM元素的标记名，也就是说元素选择器是根据元素的标记名选择的。使用公式：(“element”) 示例：(“div”) //获取所有div元素 3.类名选择器类选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素。在一个页面中，一个元素可以有多个CSS类，一个CSS类又可以匹配多个元素，如果有元素中有一个匹配类的名称就可以被类选择器选取到。简单地说类名选择器就是以元素具有的CSS类名称查找匹配的元素。使用公式：(“.class”) 示例：(“.box”) //获取class属性值为box的所有元素 4.复合选择器复合选择器将多个选择器（可以是ID选择器、元素选择器或是类名选择器）组合在一起，两个选择器之间以逗号”,”分隔，只要符合其中的任何一个筛选条件就会被匹配，返回的是一个集合形式的jQuery包装集，利用jQuery索引器可以取得集合中的jQuery对象。注意：多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的元素，而是将每个匹配的元素合并后一起返回。使用公式：(“selector1,selector2,……,selectorN”) selector1:一个有效的选择器，可以是ID选择器、元素选择器或类名选择器等 selector2:另一个有效的选择器，可以是ID选择器、元素选择器或类名选择器等 selectorN:（可选择）任意多个选择器，可以是ID选择器、元素选择器或类名选择器等示例：(“div,#btn”) //要查询文档中的全部的

元素和id属性为btn的元素 5.通配符选择器

03

CSS height:100%无效以及替代方案

可以考虑用 vh 或者padding-bottom来替代。。。 https://javascript.shop/height%e7%99%be%e5%88%86%e6%af%94%e4%bb%a5%e5%8f%8a%e9%ab%98%e5%ba%a6%e8%87%aa%e9%80%82%e5%ba%94%e9%97%ae%e9%a2%98/

04

css三大特性

给同一个选择器设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突的问题。

03

前端知识点总结（html+css）（上）

众所周知，前端内容多而杂，经过查阅各种资料，总结了一些知识点，以备后续复习使用。文章分为上（html，css）中(js)下(vue)三部分。

01

[前端][CSS]用ps的方式理解层叠上下文

之前看了大佬的对层叠上下文的解释 https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 然后感觉对各种设置了z-index的情况可以用Photoshop里图层的方式来进行一个理解会直观很多。

00

css-height

一个div块级元素没有为其设置宽度和高度，浏览器会为其分配可使用的最大宽度(比如全屏宽度)，但是不负责分配高度，块级元素的高度是由子元素堆砌撑起来的。那么，html和body标签的高度也都是由子级元素堆砌撑起来的。

02

从零开始学 Web 之 Vue.js（六）Vue的组件

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

04

元素居中的多种实现方式!

优点：只需在子元素child上设置css样式，不用关心父元素的缺点：兼容性较差，如果需要兼容，更改html样式，改为table样式

02

Jquery选择器

1、基本选择器选择器描述结果示例 #id 根据id获取元素单个 $(“#myid”)选取id的值为myid的元素 .class 根据class获取元素集合 $(“.myclass”)选取class的值为myclass的元素 a,p,img等html标签根据指定的html标签获取元素集合 $(“img”)选取所有的img标签 * 获取所有的元素集合 $(“*”)获取所有标签元素 a,.myclass,#id等获取对应标签元素集合 $(“a,.myclass,

06

JavaScript 学习-43.jQuery 选择器

前言 jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。 jQuery 选择器 jQuery 中所有选择器都以美元符号开头：$() 常用的一些选择器总结语法描述 $(this) 选取当前 HTML 元素 $("*") 选取所有元素 $("p") 匹配

标签元素 $("#kw") 匹配属性 id="kw" 的元素 $(".info") 选取 class 属性为 info 的元素 $

02

vue组件通信方式及其应用场景总结

相信实际项目中用过vue的同学，一定对vue中父子组件之间的通信并不陌生，vue中采用良好的数据通讯方式，避免组件通信带来的困扰。今天笔者和大家一起分享vue父子组件之间的通信方式，优缺点，及其实际工作中的应用场景

03

Python解析库lxml与xpath用法总结

一、xpath 概念、xpath节点、xpath语法、xpath轴、xpath运算符

01

小结BFC的基本知识与应用

在写css样式时，可能是添加了一个样式后就达到了预期效果。有没有想过，是我们在不经意间触发了什么，帮助我们达到了效果？本文就快速介绍下css样式中经常使用的BFC，主要包括以下几个方面：

EasyNVR系统管理基础配置下“保存”按钮与页面位置不匹配问题调整

EasyNVR做新版本的前端测试时，发现在系统管理界面中，底部保存按钮显示在界面外，脱离了白底界面，视觉上缺乏美观，因此本文是对此处做调整的简单分享。

02

EasyNVR系统管理基础配置下“保存”按钮与页面位置不匹配问题调整

EasyNVR做新版本的前端测试时，发现在系统管理界面中，底部保存按钮显示在界面外，脱离了白底界面，视觉上缺乏美观，因此本文是对此处做调整的简单分享。

03

前端移动web-day05学习笔记

在某个查询区间，将栅格隐藏，可以用隐藏的样式，这个样式包括四个： 1、.hidden-xs 在屏幕小于768时将栅格隐藏 2、.hidden-sm 在屏幕大于等于768小于992时将栅格隐藏 3、.hidden-md 在屏幕大于等于992小于1200时将栅格隐藏 4、.hidden-lg 在屏幕大于等于1200时将栅格隐藏

02

CSS三大特性

CSS 三大特性层叠继承优先级是我们学习CSS 必须掌握的三个特性。 CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。就近原则一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。样式冲突，遵循的原则是就近原则。那个样式

04

CSS 层叠上下文（Stacking Context）

在网页制作的过程中，元素与元素之间的位置关系，在坐标轴上一般可体现为 X 轴、Y 轴和 Z 轴。对于 X 轴和 Y 轴的定位大多数开发都能比较直观的搞清楚，而 Z 轴则相对较为模糊，或者说不能全面的理解Z轴的显示逻辑。

01

CSS 三大特性

是浏览器处理冲突的一个能力,如果一个属性通过两个相同权重选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

02

Python解析库lxml与xpath用法总结

一、xpath 概念、xpath节点、xpath语法、xpath轴、xpath运算符

01

为什么说 Vue 的响应式更新精确到组件级别？（原理深度解析）

我们都知道 Vue 对于响应式属性的更新，只会精确更新依赖收集的当前组件，而不会递归的去更新子组件，这也是它性能强大的原因之一。

01

Web前端JQuery面试题（一）

匹配包含给定文本的元素匹配所有不包含子元素或者文本的空元素匹配含有选择器所匹配的元素的元素匹配含有子元素或者文本的元素

02

jQuery知识总结(最全最精美)

使用: <script src="jquery-3.5.1/jquery-3.3.1.min.js"></script> 注意: 如果<script> 在body前面,应该使用 jQuery独有的预加载 $(function(){ 这里写代码 }) jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。选择器: 所有选择器 * 标签选择器标签名 ID选择器 #id 类选择器 .

02

Web前端JQuery面试题（二）

DOM对象，DOM为文本对象模型，DOM的每一个页面都是一个DOM对象。通过JavaScript方法获取页面元素的对象，就是DOM对象。

03

React学习笔记（四）—— 组件通信与状态管理、Hooks、Redux、Mobe

2、利用Redux进行状态管理，这种方式的配套工具比较齐全，可以自定义各种中间件；

04

jQuery 选择器

基本选择器基本选择器是最简单的选择器，可以通过元素id、class和标签名等来直接查找DOM元素。元素选择器根据给定元素名匹配元素。如下选择的是所有div元素。 $("div").css("

08

Xpath、Jsoup、Xsoup(我的Java爬虫之二)

XPath是W3C的一个标准。它最主要的目的是为了在XML1.0或XML1.1文档节点树中定位节点所设计。 XPath是一种表达式语言，它的返回值可能是节点，节点集合，原子值，以及节点和原子值的混合等。

02

CSS理解之z-index

1.z-index基础 z-index属性指定了元素及其子元素的[z顺序]，而[z顺序]可以决定当元素发生覆盖的时候，哪个元素在上面。通常一个较大z-index值的元素会覆盖较低的那一个。 z-index支持的属性值： 1. z-index：auto；默认值，如果不对z-index设置，默认为auto； 2. z-index：<integer>；整数值，z-index：1，z-index：2等 3. z-index：inherit；继承 z-index基本特性： 1. 支持负值； 2. 支持CSS

04

从零开始学 Web 之 CSS（三）链接伪类、背景、行高、盒子模型、浮动

元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行。

04

Vue 2.X 文档阅读笔记二 (深入组件)

官方推荐使用写法1来定义全局注册组件命名，以避免可能出现的与HTML元素相冲突的情况。

02

深入理解line-height

1.1 顶线，中线，基线和底线：直接见下图。inline-block和inline都可以有这四种线。其中，我们重点研究基线，即base line。基线并不是汉字文字的下端沿，而是英文字母“x”的下端沿。 1.2 行高：即line-height，是指同一个元素中，两个文本行基线间的垂直距离。

07

【小程序_02】布局方式

① 安装nodejs，可选择版本(8.0)，网址：http://nodejs.cn/download/

02

响应式web布局中iframe的自适应

困境在响应式布局中，我们应该小心对待iframe元素，iframe元素的width和height属性设置了其宽度和高度，但是当包含块的宽度或高度小于iframe的宽度或高度时，会

一个表格组件-vuejs示例

分析vuejs官网上一个表格组件的实现过程。原址：https://cn.vuejs.org/v2/examples/grid-component.html

01

关于css margin，你需要知道的一切

当我们学习CSS时，我们大多数人学到的第一件事是CSS中盒子的各个部分的细节，这部分通过叫做 CSS盒、模型。“盒模型”中的元素之一是margin，即盒子周围的透明区域，它会将其他元素从盒子内容中推开。

04

Web前端进阶高薪必会的54个CSS重难点知识梳理（1）

本次我把CSS中的重难点整理出来，总共54个核心知识点，供大家复习，希望能帮到大家。这些重难点是进阶高薪必需要掌握的知识点，同时也是面试必问的内容。

00

python学习之xpath使用案例总结

在 XPath 中，有七种类型的节点：元素、属性、文本、命名空间、处理指令、注释以及文档节点（或称为根节点）。

01

Vue 2.X 文档阅读笔记二 (深入组件)

官方推荐使用写法1来定义全局注册组件命名，以避免可能出现的与HTML元素相冲突的情况。

03

Vue父子组件之间的传值及父子组件之间相互调用属性或方法

父组件向子组件传值是通过属性的方式传值，传的值可以是任意类型，甚至可以是父组件的方法或者父组件对象本身。为方便理解可以简单将父组件向子组件传值按以下步骤实现。

05

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭