em/rem 使用方法 em设置字体是根据父级字体的大小设置倍数，rem设置字体是根据固定的根元素字体大小设置倍数。 em，rem通常用于设置字体大小。...="c">div> div> 对于em单位 是根据父元素的字体大小的倍数设置的，， 父元素设置为32px，子元素设置为1em，那么结果就是32px（父元素修改成了32px...）， 宽高设置也是如此，但还是有些属性不同，比如内边距 设置成1em，他是根据最近的字体大小为依据的，他不用必须是父级，同级对字体的修改，也可以用在边距上。...什么意思呢 比如 父元素为2em（32px），子元素又设置了字体大小为1em（16px），子元素边距设置成1em 边距就是16px，子元素如果设置成20px，子元素边距1em，就是20px，他是根据最近的设置的字体大小为依据的...rem在这里就不做演示了 他是根据根元素html设置的字体大小 为倍率进行显示，边距同样也是根据根元素大小进行显示，这一点rem要好很多，rem的使用体验要比em好很多，因为他们都有一个统一的倍率，不用单独计算
1.盒子模型盒子模型组成：> 盒子模型组成的主要有 边框border，外边距margin ，内边距padding，内容content；- 边框border:> border可以设置元素的边距，边距有三部分...:collapse可以合并表格的相邻边框> 边框会影响盒子的实际大小；增加盒子大小，盒子的总大小为宽度或高度加上两个边框的大小；- 内边距> padding用于设置内边距，即盒子边框和内容的距离.默认是...，给父元素添加属性text-align: center --- > 嵌套关系的块级元素垂直外边距的塌陷问题；在父元素和子元素同时具有margin-top属性时，以最大值为准； 解决方式有：给父元素 >...;这个时候就需要清除服务，就是清除浮动元素的影响；清除浮动后，父元素就会根据浮动的子元素自动计算高度；语法：图片清除浮动的方法：- 清除浮动的策略是闭合浮动，只让浮动在父元素内影响，不影响父盒子外面的盒子...；- 额外标签法：在最后一个浮动元素的后面添加一个元素，添加样式属性 div style= "clear:both">div；会添加多个无意义的标签- 父级添加overflow属性，设置为auto
不会发生边距坍塌的情况 根节点元素 水平边距(Horizontal margins)不会崩溃 「如果具有间隙的元素的顶部和底部相邻，他会与后续同级的元素边距一起坍塌，但是不会与父元素底部的一起坍塌（If...盒子的上边距和第一个流入子元素的上边距 盒子的下边距和同级后一个流入元素的上边距 如果父元素高度为“auto”，最后一个流入子元素的底部距和其父元素的底部距 某个元素没有建立新的 BFC，并且 min-height...「如果'min-height'属性为零，并且框没有顶部或底部边框，也没有顶部或底部填充，并且框的'height'为0或'auto'，并且框不包含边距，则框自身的边距会折叠 行框，其所有流入子页边距（如果有的话...，包括其所有流入子元素的边距（如果有的话）都会坍塌。...，当边距全为正数的时候，结果页边距宽度是边距塌陷宽度的最大值。
问题描述 今天在修改页面样式的时候，遇到子元素设置margin-top 但是并没有使得子元素与父元素之间产生间隔，而是作用在了其父元素上，导致父元素产生了一个margin-top 的效果。...问题分析 在MDN上面有这么一段文字： 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值，这种行为称为边距折叠。...有三种情况会产生边距折叠： 1、同一层相邻元素之间 div class="A">元素Adiv> div class="B">元素Bdiv> .A, .B { width...注意：即使设置父元素的外边距是0，margin: 0，第一个或最后一个子元素的外边距仍然会“溢出”到父元素的外面。...如果所有参与折叠的外边距都为负，折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。
小心得： 样式有继承(遗传)效果（子元素将继承父元素的样式，如果子元素单独设置了该样式，那么子元素的样式就是子元素单独设置的样式） （可以做统一设置） 注意在调样式时，加了没用的样式记得删除掉（...{ ------------盒子模型-------- 外边距（margin）、边框（border）、内边距（padding）、内容本身大小（content） 外边距： 标签与标签的距离...5px 10px 15px 25px; 上右下左（顺时针）参数效果不同，根据浏览器调调看就行了，不用记 margin: 0; body自带8px的外边距，子元素会继承这一特性（验证一下****...body自带8px的外边距margin p标签默认自带 16px（根据字体大小来的）的外边距 ul自带40px的padding内边距 float浮动 浮动的元素是脱离正常文档流的，也就意味着没有独占一行之说...（购物车展开）*** 当只给你一个父标签的属性让你做定位时，就用绝对定位 固定定位 相对于浏览器窗口，一直固定在某个位置（回到顶部） 所有标签默认都是静态的，无法直接调节位置 div
从新的结构我们可以知晓，相邻块级元素的BFC会使边距发生合并，以前的内部的BFC是123,现在新的BFC是143,2已经被4包裹独立出来了,在2内部的margin会作用到父级，从而作用到父级相邻的BFC...，也正是利用边距合并巧妙的解决了保持边距相等的问题。...因此不推荐第一种方式改结构，然后特殊设置456的父边距，虽然效果能达到一致，但是后期维护性与拓展性不高。...main { height: 100px; background-color: yellow; overflow: hidden; } OK，现在就实现了右侧根据左侧宽度的大小自适应了...更多关于BFC可以参考MDN BFC[1] 总结 了解什么是BFC,BFC简称块级格式上下文，它是一块独立的区域影响子元素的排列，相邻区域的BFC边距会产生重合 触发BFC条件有，display: flex
父子元素边距重叠 场景一：先来看这段代码，预计实现的结果应该是父容器距离页面顶部 100px，子容器距离父容器 100px 。...，但是子容器和父容器之间却没有距离。...场景二：再来看这段代码，预计实现的结果应该是父容器紧贴页面顶部，子容器距离父容器 100px 。...class="container"> div class="content">div> div> 结果还是一样的，子容器和父容器之间没有距离，父容器却和页面顶部产生了距离...原因：根据规范，一个盒子如果没有添加 BFC，那么它的上边距应该和其文档流中的第一个子元素的上边距重叠。 解决： 通过给父容器添加 overflow: hidden 属性，使之成为 BFC 。
--CSS：--> div,.one,.two{ font -size: 30px; } 1.2.3 关系选择器 父元素：直接包含子元素的元素叫做父元素 子元素：直接被父元素包含的元素是子元素...兄弟元素：拥有相同父元素的元素是兄弟元素 1.2.3.1 子类选择器 子元素选择器 作用：选中指定父元素的指定子元 语法：父元素>子元素 <!...百分比： 也可以将属性值设置为相对于其父元素属性的百分比，设置百分比可以使子元素跟随父元素的改变而改变 em： em是相对于元素的字体大小来计算的 1em = 1font-size em...会根据字体大小的改变而改变 rem rem是相对于根元素的字体大小来计算。...所以我们经常利用这个特点来使一个元素 在其父元素中水平居中 元素的垂直方向布局 子元素是在父元素的内容区中排列的， 如果子元素的大小超过了父元素，则子元素会从父元素中溢出 使用overflow
( 为父容器 / 子元素设置内边距 / 边框 | 为子元素设置浮动 | 为子元素设置绝对定位 ) 【CSS】元素显示与隐藏 ( display 隐藏对象 | visibility 隐藏对象 | overflow...class="one">div> div class="two">div> div class="three">div> 显示效果 : 12、z-index...问题 , 为 盒子设置 浮动 / 定位 , 就不用考虑 外边距塌陷的问题 ; 14、使用绝对定位 / 浮动解决外边距塌陷问题 在 标准流的父盒子 中 , 添加一个 标准流子盒子 ; 如果 子盒子设置...100 像素的外边距 , 父盒子也会被带下来 , 这就是外边距塌陷 ; 下面的示例 1 中 , 父盒子 和 子盒子 没有添加任何外边距 , 没有塌陷 ; 示例 2 中 , 为子盒子设置了 上外边距..., 结果将 父盒子也带下来了 ; 使用传统方法解决外边距塌陷问题 : 为 父容器 / 子元素 设置 内边距 / 边框 ; 下面是 为父容器设置 1 像素的 内边距 ; .father {
当对多个设计元素进行分组时，用户可以根据它们之间的空间大小来决定它们之间的关系。没有间距，用户将很难浏览页面并知道哪些内容相关而哪些内容无关。 ?...另一个与边距折叠相关的例子是子节点和父节点。...请注意，子元素固定在其父元素的顶部。那是因为它的边距折叠了。...根据W3C，以下是针对该问题的一些解决方案： 在父元素上添加 border 将子元素显示更改为 inline-block 一个更直接的解决方案是将 padding-top 添加到父元素。 ?...由于对父元素 .card__content 进行了填充，因此边框没有粘在边缘上。 ? 是的，你猜对了！负边距是解决办法。
这意味着它可以设置宽度、高度、边距等块级元素的属性。例如，可以为浮动元素设置明确的宽度和高度，以控制其大小。 （二）包含块 浮动元素的包含块和常规流一样，是父元素的内容盒。...即浮动元素的高度会根据其内部的内容自动调整。 margin为auto时，为 0。这意味着如果不明确设置边距，浮动元素的边距会自动设置为 0。 边框、内边距和百分比设置与常规流一致。...这就导致当父元素内部包含浮动元素时，父元素的高度可能无法正确地根据子元素的内容进行调整，从而出现高度坍塌的问题。...> div> 这样，:after伪元素会在父元素的内容之后插入一个新的元素，这个元素会清除浮动，从而使父元素的高度能够正确地包含浮动元素。...同时，它也可以避免一些使用其他方法可能出现的问题，如清除浮动元素的边距问题等。 总之，使用:after伪元素是一种有效的解决高度坍塌问题的方法，可以确保页面布局的稳定性和正确性。
将元素固定在页面的某个位置处，不会随着滚动条而发生位置移动 语法 属性：position 取值：fixed 配合着 偏移属性(top/right/bottom/left)实现位置的固定 高度塌陷问题 在文档流中，父元素的大小会被子元素撑开...class="a"> div class="b">div> div> 如图： 如果给子元素设置浮动，就会脱离文档流，导致高度塌陷。...元素垂直外边距不会传递给父元素。...块的上外边距margin-top和下外边距margin-bottom会合并为单个边距，大小为单个边距的最大值 .cube{ width: 100px...开启BFC后，元素可以包含浮动的子元素 如何触发BFC 设置元素浮动：使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题 设置元素绝对定位
该元素将占用其父项的100％，加上左侧和右侧的边距。...考虑下面的模型，父级元素是一个 flex 布局： ? 我们想把第二项推到最右边，自动边距就派上用场了。...具有flex：auto的项目将根据其宽度和高度来调整大小，但它可以根据可用的额外空间来增大或缩小。 在研究本文之前，我不知道这一点！...根据 MDN： 如果元素是静态元素，则将定位在它应该水平定位的位置 这意味着，它会尊重padding，而不会将子条目粘贴到其父条目的边缘。...Flexbox 和 自动边距 当谈到flexbox时，它有无限的可能性。 通过将其与自动边距相结合，我们可以构建功能强大的布局。 考虑下面的例子 ? 我们在右侧包含一行标题，描述和一个操作按钮的行。
选中颜色+悬停颜色+默认颜色 7:可设置子节点的 选中颜色+悬停颜色+默认颜色 8:可设置父节点文字的 图标边距+左侧距离+字体大小+高度 9:可设置子节点文字的 图标边距+左侧距离+字体大小+高度...选中颜色+悬停颜色+默认颜色 * 7:可设置子节点的 选中颜色+悬停颜色+默认颜色 * 8:可设置父节点文字的 图标边距+左侧距离+字体大小+高度 * 9:可设置子节点文字的 图标边距+左侧距离...int parentMargin; //父节点边距 int parentFontSize; //父节点字体大小 int parentHeight...int childIconMargin; //子节点图标边距 int childMargin; //子节点边距 int childFontSize...图标边距+左侧边距+字体大小+节点高度+颜色集合 void setParentIconMargin(int parentIconMargin); void setParentMargin
具有较大边距的元素获胜。 为避免此类问题，建议根据本文使用单向边距。 更重要的是，CSS Tricks 在 margin-bottom 和 margin-top 之间进行了投票。...editors=1100 另一个与边距折叠相关的示例是子级和父级，让我们假设以下内容： HTML： div class="parent"> div class="child">I'm the child....child { margin: 50px 0; } 请注意，子元素粘在其父元素的顶部， 那是因为它的边距被折叠了。...根据 W3C，以下是针对该问题的一些解决方案： 给父元素添加边框 将子元素显示更改为 inline-block 更直接的解决方案是将 padding-top 添加到父元素。...负边距 它可以与四个方向的边距一起使用，在某些用例中非常有用。 让我们假设以下内容： 父级有 padding: 1rem，这导致子级从顶部、左侧和右侧偏移。 但是，子元素应该紧贴其父元素的边缘。
2.4 实例题（根据盒模型解释边距重叠） 例：父元素里面嵌套了一个子元素，已知子元素的高度是 100px，子元素与父元素的上边距是 10px，计算父元素的实际高度。 ?...class='child'>div> 它的父元素实际高度是 100px 或 110px 都可以。...2.5 BFC（边距重叠解决方案） 2.5.1 BFC基本概念 BFC: 块级格式化上下文 BFC基本概念：BFC 是 CSS 布局的一个概念，是一块独立的渲染区域，是一个环境，里面的元素不会影响到外部的元素...父子元素和兄弟元素边距重叠，重叠原则取最大值。空元素的边距重叠是取 margin 与 padding 的最大值。...，清除内部浮动（原理：触发父 div 的 BFC 属性，使下面的子 div 都处在父 div的同一个 BFC 区域之内） 4、去除边距重叠现象，分属于不同的 BFC 时，可以阻止 margin 重叠 2.6
>复制代码 .grow-wrap { /* 简单的方法将元素叠加在一起，并根据最高者的高度确定它们的大小。...，并匹配它的大小。...所以你有一个 ，它不能自动展开高度。 相反，您可以在另一个元素中完全复制该元素的外观，内容和位置，再复制的元素隐藏起来。 现在，这三个元素都是相互联系的。...无论哪一个子元素最高，都会把父元素推到那个高度，而另一个子元素也会跟随。这意味着 的最小高度将成为“基础”高度，但是如果复制的文本元素碰巧变高了，所有的东西也会随之变高。...您需要确保复制的元素完全相同 相同的字体，相同的填充，相同的页边距，相同的边框...所有内容。
掌握基础选择器：重点 #id选择器： 根据元素的id属性选中某个元素 .class： 根据元素的class属性值选中一组元素，可以添加多个元素名，选择其一即可 元素选择器： 根据元素名选择一组元素...+ 边框border + 外边距margin 内容显示在宽高大小中，内边距不显示内容 内容：设置宽高都是内容的大小 padding：为元素设置背景样式默认延伸到内边距上 内外边距设置值的方式： 1个值...height:200px;/*四边都是200px*/ padding:50px; border:10px solid gray;/*transparent设置成透明*/...border-left:10px double gray; margin :0 auto; } ---- 定位：position absolute 绝对定位 子父集定位...：如果父级身上有设置position:relative,那就相对于父集定位 相对窗体定位：如果父集身上没有position:relative，那相对于窗体绝对定位 fixed 固定定位
width：宽 height：高 增加了内外边距和边框不会影响内容区域的大小， 但是会改变元素框的大小 元素框的实际宽度：width+左右外边距... 2.外边距溢出 子债父还 在特定情况下,给子元素设置边距时， 效果会作用到父元素身上... id="d1">div> div id="d2">div> div id="d3"> div> 此情况下，给p（子元素）标记进行设置外边距则...解决方案 1.给父元素添加一个边框 2.由父元素的内边距来取代子元素的外边距 9.注意 ... type="text"> 3.内边距 内容区域离边框的距离 扩大内边距会影响整个盒子的大小 语法
值得注意的是，在正常流里垂直边距（vertical margin）是重叠的。也就是说，上下两个块级盒之间的边距由它们之中边距较大的元素决定，而不是他们的和！...在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。即是在BFC中相邻的块级元素的垂直边距会折叠（collapse）。...名词解释： 边距折叠：在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。...父容器并没有把浮动的子元素包围起来，俗称塌陷，为了消除这种现象，除了用传统的伪类方法。...根据 计算BFC的高度时，浮动元素也参与计算 还可以使父容器形成BFC，来清除浮动，简单修改一下代码： div class="wrapper" style="float:left;"> //添加一个
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
