所以，一个圆孔可以有三种状态（空、红色或者黄色）。在同一列中掉落的圆盘会堆叠在一起。 首先我为每个圆孔放置了两个 checkbox 。...这些 checkbox 是直接的兄弟类，所以如果选中第一个之后，可以使用 :checked 伪类和相邻兄弟选择器(+)来隐藏两个元素。但是如果选中第二个呢？你可以隐藏第二个，但是怎么才能影响第一个呢？...如果改变的是字符的数量，而不是字符本身，那么由此产生的宽度变化就是可控的。在 CSS 计数器中使用罗马数字并不少见。...然后，检测一行中的有四子相连可以用以下方法：选择第一个红色 radio input 被选中的一个列，然后再选择第一个红色 radio input 被选中的相邻同胞列，重复两次。...选择一个列，再选择它的第一个被选中的红色 radio input，然后选择相邻的列，再选择它的第一个被选中的红色 radio input ，以此类推，再重复两次。这听起来仍然很麻烦，但却是可行的。
）即可 1.1 BFC 布局规则 内部的块级元素会在垂直方向，一个接一个地放置 块级元素垂直方向的距离由 margin 决定。...属于同一个 BFC 的两个相邻的块级元素会发生 margin 合并；不属于同一个 BFC 的两个相邻的块级元素不会发生 margin 合并 每个元素的 margin box 的左边，与包含 border...BFC特性 属于同一个 BFC 的两个相邻容器的上下 margin 会重叠（重点） 计算 BFC 高度时浮动元素也参于计算（重点） BFC 的区域不会与浮动容器发生重叠（重点） BFC 内的容器在垂直方向依次排列...> div> div> 可以看到，第一个子盒子有上边距；两个子盒子的垂直距离为20px⽽不是30px，因为垂直外边距会折叠，间距以较大的为准。...class="left">div> div class="right">div> div class="center">div> 左右两边固定宽度，中间不设宽，因此中间的宽度⾃适应，随浏览器的大
Flexbox 在这方便帮了忙，但它的目标是简单的一维布局，而不是复杂的二维布局。（事实上，Flexbox 和 Grid 能很好地协作）Grid 是第一个真正用于布局的 CSS 模块。...有垂直（网格列线）、水平（网格行线）、驻留在行和列两侧的线。下面黄色的就是网格列线。 网格轨道 两个相邻网格线之间的空间。你能把它们想象成是网格列或行。...下面的网格轨道就是第二条和第三条行线之间的空间。 网格单元 两个相邻行和两个相邻列网格线之间的空间。它是网格的单个“单元”。这是行网格线1和2以及列网格线2和3之间的网格单元。...中间行将包括两个主要区域，一个空单元格和一个侧边栏区域。最后一行是所有页脚。 声明中的每一行都需要具有相同数量的单元格。 您可以使用任意数量的相邻句点来声明单个空单元格。...如果第二个值被忽略，那么第一个值就对两个属性生效。 grid-auto-columns grid-auto-rows 指定任何自动生成的网格轨道的大小（也称为隐式网格轨道）。
多条件留白布局 图中有两个内容块A和B，他们宽度取决于内容宽度，左右侧留白有max-width: 200px限制，中间留白有min-width: 150px限制。...如下图所示： 从需求的描述来看，需要的是同时支持弹性(宽度随父级宽度而改变)和限制条件(max-width、min-width)的属性。...一提起弹性，自然而然的就想到flex布局，只要加入占位的元素，可使用before或after伪类或手动插入元素，然后加上flex: 1和限制条件即可。...短文件名： 长文件名： 首先需要使用JS对文件名进行裁剪，拆分出两部分：非扩展名部分和扩展名部分，放置在两个相邻的元素中。 当文件名宽度 宽度时，左侧元素和右侧元素宽度为各自内部文字宽度。...一开始想着使用flex-flow: column wrap能快速实现，但事宜愿为，顺带发现了flex布局的缺点。 我给父级元素加了border，从而可以看出父元素的宽度。
只发生在垂直方向（margin-top/margin-bottom） margin重叠三种情况： 相邻的兄弟元素 父级和第一个/最后一个子元素 空的block元素（自己和自己重叠） demo 1: 1...，也会自动填充外部容器 例1: image.png 图中是一个div元素，可以看到设置了背景色之后，它的宽度自动填满了它所在的容器。...上图宽度从填满整个所在的容器到宽度500px，这就产生了剩余空间，图中的剩余空白部分空间width=整个容器宽度-500px，而margin auto 就是 为了填充这个空白的尺寸设计的，这就是margin...这时宽度不会自动撑满容器，所以宽度的水平居中就失效了。...但是对替换元素设置table-cell是可以发生作用的，但平时我们不会给替换元素设置table-cell，这是没有任何意义的，所以记住这点就行。
div1和div2的垂直距离由大的margin决定，也就是div2的40px而不是二者之和60px。 其次，行内元素是会被折断的，当宽度受到限制的时候，它会自动移动到下一行。...名词解释： 边距折叠：在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。...折叠的结果： 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。 两个外边距一正一负时，折叠结果是两者的相加的和。...没有线盒，没有空隙（clearance），没有padding和border将他们分隔开 都属于垂直方向上相邻的外边距，可以是下面任意一种情况 元素的margin-top与其第一个常规文档流的子元素的margin-top...1 .main { 2 overflow: hidden; 3 } 当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度，自动变窄。
，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto percentage 计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto cover 保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小...子元素2 div> div>a{ color:red } 相邻兄弟选择器：选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择 h1元素...，外边距是透明的（两个值：第一个值上下，第二个值左右） Border(边框) - 围绕在内边距和内容外的边框 Padding(内边距) - 清除内容周围的区域（两个值：第一个值上下，第二个值左右） Content...第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放 flex-end 弹性项目向行尾紧挨着填充。...第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放 center 弹性项目居中紧挨着填充。
网格单元 网格单元是两个相邻的行网格线和两个相邻的列网格线之间的空间。它是网格的单个「单位」。 在这个例子中，这是位于行网格线 1 和 2 之间，以及列网格线 2 和 3 之间的网格单元。...轨道 ❝轨道是两个相邻网格线之间的空间。 ❞ 我们可以将它们看作是网格的列或行。 在这个例子中，这是第二行网格线和第三行网格线之间的轨道。 网格区域 ❝网格区域是由四条网格线围成的总空间。...基于fr单位的列无论如何缩小容器宽度，该列也不会收缩到其最小内容大小以下。 ❝更准确地说：fr单位分配额外的空间。首先，列宽将根据其内容计算。如果有剩余空间，它将根据fr值进行分配。...分配子项 ❝默认情况下，Grid算法会将每个子项分配给「第一个未占用的网格单元」 ❞ 但是呢，Grid还赋予我们一种能力-我们可以将我们的项目分配到任何我们想要放置的单元格！...在这个示例中，我设置了一组按钮，并使用 Grid 对它们进行了排列： 如果我们使用的是带有键盘的设备，可以通过点击左上角的第一个按钮（One），然后按 Tab 键逐个移动按钮。
IFC中是不可能有块级元素的，当插入块级元素时（如在p中插入div），会产生两个匿名块，两者与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。...重叠的结果是什么？ 外边距重叠就是 margin- collapse在CSS中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。...（1）当两个相邻的外边距都是正数时，折叠的结果是它们两者中较大的值 （2）当两个相邻的外边距都是负数时，折叠的结果是两者中绝对值较大的值。 （3）当两个外边距一正一负时，折叠的结果是两者相加的和。...rgba()和 opacity都能实现透明效果，但它们最大的不同是 opacity作用于元素，并且可以设置元素内所有内容的透明度；而 rgba()只作用于元素的颜色或其背景色（设置rgba透明的元素的子元素不会继承透明效果...现在可以使用[hml5] 推荐的写法是''上下 margin重合的问题IE和FF中都存在，相邻两个div的 margIn-et和 margin- right不会重合，但是margin-top
通过将网格布局与媒体查询相结合，作者能够使用相同的语义标记，但可以重新排列元素的布局，而不是独立于源顺序，从而在两个方向上实现所需的布局。 ? FIguer 6 适合“肖像”方向的布局 ?...一个网格项目引用网格线来确定其网格中的位置属性。 下面两个例子创建了三个列网格线和四行网格线。第一个示例演示了设计师如何将一个使用网格行号的位置来确定网格项目的位置，第二个例子显式的设置了网格线。...，换句话说，他就是两条相邻网格线之间的空间。...每个网格轨道可以设置一个大小，用来控制宽度或高度或者行可能会增长。 网格单元是网格行和网格列的交集。它是定位网格项时可以引用的网格的最小单元。 在接下来的例中定义了一个三行两列的网格。...第一列设置一个固定宽度“150px”，第二列设置是一个弹性尺寸，它是一个未赋值的网格空间，从而根据网格容器的变化而进行宽度的改变。如果网格容器的宽度是“200px”，那么第二列的宽度是“50px”。
浏览器会选择列表中第一个该计算机上有安装的字体，或者是通过 @font-face 指定的可以直接下载的字体。...可以在父元素的css属性中增加 overflow: hidden这一属性后 父元素不再随子元素而改变 或者在父元素之前加上一个空元素: .div-outer::before { content: "...绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。...相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。 space-evenly：flex项都沿着主轴均匀分布在指定的对齐容器中。...相邻flex项之间的间距，主轴起始位置到第一个flex项的间距，主轴结束位置到最后一个flex项的间距，都完全一样。
BFC布局规则： 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。...属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。....main { overflow: hidden; } 当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度，自动变窄。...属于同一个BFC的两个相邻Box的margin会发生重叠 我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。...因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。
一、BFC布局规则： 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。...属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。...因此会根据包含块的宽度，和aside的宽度，自动变窄。效果如下： ? 2....属于同一个BFC的两个相邻Box的margin会发生重叠 我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。...因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。
block元素可以设置width、height、margin、padding属性； inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化...问题2：元素浮动造成的两个div覆盖或相互重叠如何解决。 （1）、左右结构div盒子重叠现象，一般是由于相邻两个DIV一个使用浮动一个没有使用浮动。...如上面的例1：相邻的两个盒子box2向左浮动、box3未浮动。一个使用浮动一个没有导致DIV不是在同个“平面”上，但内容不会照成覆盖现象，只有DIV形成覆盖现象。 ...允许两边都可以有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 both : 不允许有浮动对象 但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素...务必记住这句话：“float是魔鬼，会影响其他相邻元素；但是clear是小白，其只会影响自身，不会对其他相邻元素造成影响！”
important高于其他的样式。同时，这里的这个矩阵实际上是不存在的，是认为的构建出来的。因为!important始终最高，所以这里可以忽略第一个，最后矩阵为(0, 0, 0, 0)。...在编写样式的时候，我们一般都不会使用ID选择器来控制样式，同时也不会在HTML文档中添加过多的ID选择器。ID选择器一般更多的是用于获取元素，而不是用来控制CSS样式。 再者是类选择器。...当将鼠标分别移动到两个div盒子上面的时候，前面的绿色盒子的背景色会发生变化，而红色盒子不会。但是，都是 :hover 的一盒伪类。所以判定，伪类的权重与类的权重是相同的。...可以看到，第一个我是蓝色，第二个我是红色。结合上面的代码，可以看出来子元素选择器和普通的空格其实没有太多的区别，同理兄弟选择器其实也是一样的。...important 了还有办法限制它的宽度？真的是被无知限制了想象力。
相邻的垂直外边距会合并，除了2种特殊情况： 根元素盒的外边距不合并 如果一个带有间隙的元素的上外边距与下外边距相邻，它的外边距会和紧挨着的兄弟（元素）的相邻外边距合并，但合并后不会再和父级块的下外边距合并...padding, border），同时满足的话，这个元素的外边距合并会受到限制：其外边距只和紧挨着的兄弟的相邻外边距合并，合并后的结果不会再和父级块的下外边距发生合并 P.S.到这里有挑战经典场景3的入场券了...，但还差得很远 “相邻”的定义 两个外边距在什么情况才算“相邻”？...另一方面，行框不是纯粹的抽象定义，它具有宽度和高度，用于决定行布局 相邻外边距之间“没有行框”可以简单理解为没有行内元素把它们隔开 垂直相邻框边界 下列4种场景满足外边距都属于垂直相邻框边界的情况： 盒的上外边距与其第一个流内...两个margin正值取最大值，两个负值取绝对值的最大值 对于递归特性，“相邻”的定义扩展出一条递归公式： 折叠外边距也能与另一个外边距相邻，只要其外边距的任意一部分与那个外边距相邻就算 贪婪与外边距合并结果计算方式有关
来源：https://segmentfault.com/a/1190000022851543 1、-webkit-line-clamp 可以把 块容器 中的内容限制为指定的行数。...有的，使用 shape-outside 属性 shape-outside 定义了一个可以是 非矩形的形状，相邻的内联内容应围绕该形状进行包裹。...当然你不一定在圆形裁剪上，使用圆形环绕，你可以在圆形裁剪上使用多边形环绕，在多边形裁剪上，使用菱形环绕。总之这两个之间没关系，不是两两匹配的。...object-position: 10px 10px; 可以设置 px，第一个值代表距离父容器左边的距离，第二个值代表距离父容器顶部的距离。只有一个数值则只代表距离父容器左侧的距离。...，而表示放置在父元素的什么位置。
class='child'>div> 它的父元素实际高度是 100px 或 110px 都可以。...2.5.2 BFC原理（渲染规则|布局规则）： （1）内部的 Box 会在垂直方向，从顶部开始一个接着一个地放置； （2）Box 垂直方向的距离由 margin (外边距)决定，属于同一个 BFC 的两个相邻...内容不会被修剪，会呈现在元素框之外（overflow 不为 visible） 2.5.4 BFC作用（使用场景） 1、自适应两（三）栏布局（避免多列布局由于宽度计算四舍五入而自动换行） 2、避免元素被浮动元素覆盖...3、可以让父元素的高度包含子浮动元素，清除内部浮动（原理：触发父 div 的 BFC 属性，使下面的子 div 都处在父 div的同一个 BFC 区域之内） 4、去除边距重叠现象，分属于不同的 BFC...2.6.2 IFC原理（渲染规则|布局规则）： （1）内部的 Box 会在水平方向，从含块的顶部开始一个接着一个地放置； （2）这些 Box 之间的水平方向的 margin，border 和padding
通俗一点讲，可以把 BFC 理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素，反之也如此。...BFC的布局规则如下： 1、内部的盒子会在垂直方向，一个个地放置； 2、 BFC是页面上的一个隔离的独立容器； 3、属于同一个BFC的两个相邻Box的上下margin会发生重叠 ； 4、 计算BFC的高度时...1、两个相邻的普通流中的块元素垂直方向上的 margin会折叠 ? 效果图是： ?...根据BFC规则的第3条： 盒子垂直方向的距离由margin决定，属于同一个BFC的 + 两个相邻Box的 + 上下margin 会发生重叠。...2、BFC可以包含浮动的元素（清除浮动） 正常情况下，浮动的元素会脱离普通文档流，所以下面的代码里： ? 外层的div会无法包含 内部浮动的div，效果见下图： ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
