:last-of-type 最后一个指定选择器的子元素 :nth-child() CSS3第n个子元素 :nth-last-child() CSS3倒数第n个子元素 :first-of-type CSS3...无法折行 div 内容为纯数字很长时无法折行解决，css设置word-wrap:break-word;word-spacing:normal; word-break: break-all;后可以解决，同时必须设置...最小宽高，防止图片加载导致抖动 场景：加载前图片所在容器为10px，图片为50px，图片加载后撑开盒子，导致二次布局变化（抖动） 给图片的上层容器加个最小宽高，防止页面加载图片前后导致长宽变化，页面发生抖动...BFC是一个块级元素，块级元素在垂直方向上依次排列。 BFC是一个独立的容器，内部元素不会影响容器外部的元素。 属于同一个BFC的两个盒子，外边距margin会发生重叠，并且取最大外边距。...46.fixed定位后，背景变透明 背景色和opacity都不是透明的，但是从表面来看元素变透明了，实际上并不是被fixed的元素变透明了，只是因为这个元素没有z-index属性，跟底层元素进行了重叠，
（1）加载资源的限制。 link是 XHTML的标签，除了加载CSS文件外，还可以加载RSS等其他事务，如加载模板等。 @ import只能加载CSS文件。 （2）加载方式。...（1）父元素的高度无法被撑开，影响与父元素同级的元素。 （2）与元素同级的非浮动元素会紧随其后（类似遮盖现象）。...可以通过在网格容器（ grid container）上定义网格定义行（ grid definition row）和网格定义列（grid definition column），在网格项目（ grid item...）上定义网格行（ grid row）和网格列（grid column）来为每一个网格项目定义位置和空间。...44、什么是外边距重叠？重叠的结果是什么？ 外边距重叠就是 margin- collapse在CSS中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。
继承 display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。...如果父元素的overflow属性设置了scroll，auto,overlay值，那么，粘性定位将会失效同一容器中多个粘贴定位元素独立偏移，因此可能重叠；位置上下靠在一起的不同容器中的粘贴定位元素则会鸠占鹊巢...div class="item item-2">div> div class="item item-3">div> div> 上述代码实例中，.container元素就是网格布局容器...grid-auto-columns 属性和 grid-auto-rows 属性 有时候，一些项目的指定位置，在现有网格的外部，就会产生显示网格和隐式网格 比如网格只有3列，但是某一个项目指定在第5...="item item-3">3div> div> 通过设置grid-column属性，指定1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线 grid-area 属性 grid-area
) 行级格式化上下文 IFC只针对行级元素 【Grid formatting context】(GFC) 网格布局格式化上下文 我们可以在网格容器上定义网格行和网格列 【Flex formatting...（这说明 BFC 中子元素不会超出他的包含块，而position为 absolute 的元素可以超出他的包含块边界） BFC的区域不会与 float 的元素区域重叠 计算 BFC 的高度时，浮动子元素也参与计算...class="box1">第一个盒子div> div class="box2">第二个盒子div> ?...class="box"> div class="item">内部的盒子div> div> ?...这个问题应该遇到的会比较多点，子元素浮动之后撑不开父元素的高度，这时候我们给父元素创建一个 BFC 就可以了。运用的是 BFC 特性的第5条，计算BFC的高度时，浮动子元素也会计算。
[image.png] 在进行html布局及css编写的时候，你是否遇到过这样的问题： 子元素设置浮动脱离文档流后，父元素无法将其完全包裹 子元素浮动实现两栏布局时，另一个子元素与浮动子元素重叠 垂直方向的外边距...margin重叠 ......新方式，文末会提及） contain 值为 layout、content或 strict 的元素 弹性元素（display为 flex 或 inline-flex元素的直接子元素） 网格元素（display...，它们垂直方向上的外边距会产生重叠 html div class="outer"> I am paragraph one and I have a margin top and bottom...flow-root浏览器兼容情况： [enter image description here] 浏览器对此值的支持是有限的，如果要在不支持flex或网格布局浏览器创建回退，了解BFC阻止浮动元素的负面影响十分必要
例如，如果没有清除浮动的情况下，父元素的背景颜色不会扩展以包含所有子元素： div class="container"> div class="float-box">浮动框 1div>...与Flexbox和CSS Grid相比，浮动布局缺乏对元素自动对齐和分布的支持。 3. 无法轻松实现垂直居中 浮动布局的一个显著限制是无法轻松实现垂直居中对齐。...边距重叠（Margin Collapse） 浮动元素在处理相邻元素的边距（margin）时可能会出现边距重叠问题，这意味着两个相邻的浮动元素的边距可能会意外地合并，导致布局出现问题。解决这 6....无法轻松实现复杂的网格布局 浮动布局更适合简单的布局需求。当需要实现复杂的网格布局（如多列、多行且包含嵌套的子网格）时，浮动布局的代码会变得异常复杂且难以维护。...比如，CSS Grid可以轻松控制网格项之间的间距，Flexbox可以让元素在容器中均匀分布或对齐。
属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠 BFC 的区域不会与 float box 重叠。 BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。...圣杯布局 需求： 1.两边固定，中间自适应； 2.先加载 middle 内容； 3.三列等高布局； div id="content"> div id="middle"> middle...(n) 匹配父元素的倒数第 n 个子元素 E E:first-of-type 匹配同类型中的第一个同级兄弟元素 E。...E:last-of-type 匹配同类型中的最后一个同级兄弟元素 E。 E:nth-of-type(n) 匹配同类型中的第 n 个同级兄弟元素 E。...E:nth-last-of-type(n) 匹配同类型中的倒数第 n 个同级兄弟元素 E。
两个重要的布局，我已经介绍过了：弹性布局flex和网格布局grid。 本文介绍非常有用的position属性。...每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。 ?...这三种定位都不会对其他元素的位置产生影响，因此元素之间可能产生重叠。...div { position: sticky; top: 0; } 它的原理是页面向下滚动时，每张图片都会变成fixed定位，导致后一张图片重叠在前一张图片上面。详细解释可以看这里。...，也就无法产生sticky效果。
margin便可以实现，但如果是自适应的两列布局，利用float+overflow:hidden便可以实现，这种办法主要通过 overflow 触发 BFC,而 BFC 不会重叠浮动元素。...表格布局也是有缺陷:① 无法设置栏边距；② 对 seo 不友好；③ 当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，然而有时候这并不是我们想要的效果。 5.网格布局 网格布局可以让 Web 设计师根据元素按列或行对齐排列，但他和表格不同，网格布局没有内容结构，从而使各种布局不可能与表格一样。...例如，一个网格布局中的子元素都可以定位自己的位置，这样他们可以重叠和类似元素定位。 但网格布局的兼容性不好。IE10+上支持，而且也仅支持部分属性。...不过兼容性不好，在ie6-7无法正常运行。
这时候，如果网站不能自动适应屏幕大小，那你就会看到一片混乱的布局，文字重叠，图片变形，简直就像是一场灾难。而响应式设计就能避免这种尴尬的情况发生，让你的网站在任何设备上都能保持优雅的姿态。...但是，这些方法都有各自的缺点和局限性，无法完全解决响应式设计的问题。直到Flexbox和Grid布局的出现，才真正改变了这一局面。...Grid布局是一种二维布局模型，可以让设计师们在网页上画出一个网格，然后把元素放在网格中的任意位置。它就像是一张画布，可以让设计师们尽情地挥洒创意。...10px */}.item { grid-column: 1 / 3; /* 将网格项放置在第1列到第2列之间 */ grid-row: 1 / 2; /* 将网格项放置在第1行 */}以上就是Grip...> div class="item">Item 6div> div>在这个示例中：.container 类定义了一个网格容器，并使用 grid-template-columns
两个重要的布局，我已经介绍过了：弹性布局flex和网格布局grid。 本文介绍非常有用的position属性。...每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。...这三种定位都不会对其他元素的位置产生影响，因此元素之间可能产生重叠。...div { position: sticky; top: 0; } 1 2 3 4 复制 它的原理是页面向下滚动时，每张图片都会变成fixed定位，导致后一张图片重叠在前一张图片上面。...relative定位，也就无法产生sticky效果。
> 效果如下： 但是在某些情况下可能无法使用这种方式（例如一些CMS系统生成的页面）。...利用position:sticky实现粘性滚动效果 3.5 重叠的元素 元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素。...5.3.8 grid-auto-columns 属性， grid-auto-rows 属性 有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。...如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。 下面的例子里面，划分好的网格是3行 x 3列，但是，8号项目指定在第4行，9号项目指定在第5行。....item-1 { grid-column-end: span 2; } 使用这四个属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序。
因为外边距无法通过单元格元素折叠，所以也无法通过设置了 display: table 的伪元素折叠。...由于已知每行有两个盒子，因此只需要清除每行的第奇数个元素上面那行的浮动即可。...包含了内部所有的浮动元素 不会跟 BFC 外面的浮动元素重叠 简而言之，BFC 里的内容不会跟外部的元素重叠或者相互影响。如果给元素增加 clear 属性，它只会清除自身所在 BFC 内的浮动。...如果强制给一个元素生成一个新的 BFC，它不会跟其他 BFC 重叠。...在每个子元素里可以放置任意标记。 # 构建网格系统 给每个网格列添加左右内边距，创造间隔。
（完整的说法是：属于同一个BFC的俩个相邻的BOX的margin会发生重叠，与方向无关。）每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此。...（这说明BFC中的子元素不会超出它的包含块，而position为absolute的元素可以超出它的包含块边界）；BFC的区域不会与float的元素区域重叠；计算BFC的高度时，浮动子元素也参与计算；BFC...就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；BFC的应用防止margin发生重叠防止发生因浮动导致的高度塌陷怎么生成BFCfloat的值不为none；overflow...IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。...item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。
="item item-10">10div> div> 下面开始我们的正文 容器属性 1. display属性 display：grid为一个容器采用网格布局模式 将元素定义为网格容器，并为其内容建立新的网格格式化上下文...对于inline-grid行级网格，它就能让容器与其他元素共占一行，容器和行内块元素基本一致 注意：为网格布局以后，容器子元素（项目）的float、display: inline-block、display...，第4条网格线结束，因此将会占据2个网格 ?...其中的第一行代码，制定了上边框在第1条网格线，下边框在第4条网格线，第二行代码同理。...如果只写一个数字的话，默认跨越1个网格 注意：当我们遇到两个项目占据位置重叠时我们可以采用z-index属性确定上下关系，就像这样 .item-1 { background-color: #55efc4
div> div>1div> div>2div> div>3div> div> 上面代码中，最外层的div>元素就是容器，...内层的三个div>元素就是项目。...默认情况下，容器元素都是块级元素，但也可以设成行内元素。 div { display: inline-grid; } 上面代码指定div是一个行内元素，该元素内部采用网格布局。 ?...如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。 下面的例子里面，划分好的网格是3行 x 3列，但是，8号项目指定在第4行，9号项目指定在第5行。....item-1 { grid-column-end: span 2; } 使用这四个属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序。
，使 HTML 元素变为网格容器。...在 CSS 网格中，父元素称为容器（container），它的子元素称为项（items）。...下面是： 用grid-area属性将类为item5的元素放置在第 3 条和第 4 条水平线及第 1 条和第 4 条垂直线之间的区域内 .item1{background:LightSkyBlue...注意： 如果容器无法使所有网格项放在同一行，余下的网格项将移至新的一行。...二十二、在网格中创建网格 将元素转换为网格只会影响其子代元素。因此，在把某个子代元素设置为网格后，就会得到一个嵌套的网格。
div> div>1div> div>2div> div>3div> div> 上面代码中，最外层的div>元素就是容器...，内层的三个div>元素就是项目。...默认情况下，容器元素都是块级元素，但也可以设成行内元素。 div { display: inline-grid; } 上面代码指定div是一个行内元素，该元素内部采用网格布局。...如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。 下面的例子里面，划分好的网格是3行 x 3列，但是，8号项目指定在第4行，9号项目指定在第5行。....item-1 { grid-column-end: span 2; } 使用这四个属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序。
all 给浮动元素的父元素新增一个 after 伪类，设置该伪类和父元素： div{ zoom:1; } div:after{ content:""; display:block...重叠 父元素非块状格式化上下文元素 父元素没有border-top设置 父元素没有padding-top值 父元素和第一个子元素之间没有inline元素分隔 b.margin-bottom 重叠 父元素非块状格式化上下文设置...计算规则： 子元素和父元素上边界重叠，并且以子元素的 margin-top 作为父元素的 margin-top 整体移动。...3.3.2 BFC 可以包含浮动的元素 前面说过，父元素没有设置高度时，子元素的浮动会导致父元素表现为 0 高度，也就是说正常情况下父元素无法包含浮动的子元素。...IFC 中是不可能有块级元素的，当插入块级元素时（如 p 中插入 div）会产生两个匿名块与 div 分隔开，即产生两个 IFC，每个 IFC 对外表现为块级元素，与 div 垂直排列。
-弹性元素（display为 flex 或 inline-flex元素的直接子元素） 网格元素（display为 grid 或 inline-grid 元素的直接子元素） 等等。...3.BFC渲染规则 （1）BFC垂直方向边距重叠 （2）BFC的区域不会与浮动元素的box重叠 （3）BFC是一个独立的容器，外面的元素不会影响里面的元素 （4）计算BFC高度的时候浮动元素也会参与计算...避免外边距折叠 两个块同一个BFC会造成外边距折叠，但如果对这两个块分别设置BFC，那么边距重叠的问题就不存在了。 现有代码如下: div class="inner">1div> div class="inner">2div> div class="inner...="inner">2div> div> div class="inner">3div> div> style增加: .bfc{ overflow: hidden
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
