其实所有HTML元素都可以看作盒子，而我们平时就是盒子的搬运工。 介绍标准模型和IE模型，以及他们的区别 它俩的区别就一个，计算宽度（高度）的方式不一样。...我们在得知它是哪种盒模型之后就可以依据我们上文的公式去计算了，可以打开F12，滑到图那里，去查阅该元素四部分（margin、border、padding、content）的值是多少，完后进行计算即可。...根据这两个箭头所指，我们可以看到上方橙色全部都是第一个div的margin，下方浏览器清晰的写出了margin值为70px，也就是说，产生了边距重叠，并且确实合并成了较大的那个。...我是这样理解的：它指定了一块环境，在这块环境内部的元素布局与外界不产生相互影响 以BFC为例，来介绍一下它的渲染规则： 内部盒子垂直排列，间距由margin决定 在同一BFC下，相邻两个盒子会发生边距重叠现象...可以看到3的下边距与4是发生了重叠的，这是因为它不具有BFC，就如同之前一样，边距会发生重叠最终合并成较大的那一个。
而我们刚才已经分析过，div里面就是ul，ul里面就是li，，，， 那么，用react生成的第一个组件类，就是ul，使用 React.createClass 生成第一个组件类： //要记得react里的组件类...这时的ul，它并不是一个真正的DOM节点，而是一个虚拟的DOM节点,这些节点就是一些标记之类的记号，只是React知道该如何处理它们。...dom加载之后才做的事情，应该放在它里面 我们可以通过this.setState()来修改状态。...这样就是整个组件在初始化的时候给一个值，然后当dom加载完成之后给了另一个值，然后触发了render方法。 接下来我们就要使用setInterval方法，让这个过程不断的重复。这样计时器就Ok了。...当这个新函数被调用时，bind()的第一个参数将作为它运行时的 this, bind() 函数会创建一个新函数（称为绑定函数），新函数与被调函数（绑定函数的目标函数）具有相同的函数体（在 ECMAScript
盒子模型的结构 由于块级盒子在验证效果时干扰信息更少，便于理解盒子模型，因此下面将以块级盒子模型来讲解。 注意： 行级盒子模型与块级盒子模型结构一致，只是行级盒子在此基础上有自身特性而已。 ...若margin宽度设置为0，则margin edge与border edage重叠。 ...如果那是line box的下界，那怎会出现重叠呢) 这里又涉及到另一个属性vertical-align了，由于它十分复杂，还是另开文章来叙述吧！...相比非默认情况下的margin重叠规则，我们更关心是什么时候不会产生重叠。这时又引入了另一个概念——生成新BFC。...(注意：与父盒子也不会发生margin重叠) sibling floats1
1.margin与百分比单位 Paste_Image.png Paste_Image.png 2.margin重叠 margin重叠通常特性： 只发生在block水平元素（例如：p、div、list、item...只发生在垂直方向（margin-top/margin-bottom） margin重叠三种情况： 相邻的兄弟元素 父级和第一个/最后一个子元素 空的block元素（自己和自己重叠） demo 1: 1...> 兄弟元素的上下margin发生了重叠 2.父级和第一个/最后一个子元素 demo 1: <!...去掉margin-bottom重叠与上面类似。...那么如何实现垂直方向上的剧中呢，方法很多不止一种： 1.writing-mode与垂直居中： image.png 更改流为垂直居中之后，内容会自动撑满垂直方向的高度。
前言 这应该是第6篇关于我开发个人博客的文章了。这次主要谈一谈我在做开源项目展示遇到的问题。个人博客除了博文，我觉得开源项目也应该被展示出来。类似github，这样的界面。...重申：backface-visibility不是唯一的解决方案，只是因为backface-visibility是专门针对这种场景的，其他还有很多种方法实现！...创建容器 复制代码 因为翻转卡片，我这里内部使用了两个div，所以我直接设置.card{width,height}，为了保证两个card可以重叠，设置...复制代码 保证两个可以重叠!!!...那hover放在哪个div上呢？既然hover之后两个可以同时翻转，所以只需要放在容器card即可。
margin - 人若犯我，我必犯人！ 一、margin与容器尺寸的关系 relative可定位，但是不改变容器尺寸和占据的空间 margin不同，margin也在盒模型中。...使用了float之后，元素变成内联块状元素，外部盒子是内联盒子，不会发生margin重叠。也就是上下左右的margin均不会重叠。...class="box1 box"> 第一个元素的margin-top和父元素的margin-top重叠 ...inline元素隔开来 margin-bottom重叠的另一个解决方法是父元素设置了高度，高过子元素+margin-bottom也就不会重叠 四、margin：auto; ** auto... 我漂浮起来，自然不会因为margin而影响视觉上与父元素偏移的位置
我添加了头部，并且复用了自己制作的纯 CSS 波纹按钮。 ? 现在，布局和圆盘已经设计好了，只是还不能游戏。 把圆盘放到游戏板上 接下来，需要让用户轮流将圆盘放到四子连珠的游戏板上。...这些 checkbox 是直接的兄弟类，所以如果选中第一个之后，可以使用 :checked 伪类和相邻兄弟选择器(+)来隐藏两个元素。但是如果选中第二个呢？你可以隐藏第二个，但是怎么才能影响第一个呢？...黄色和红色的 input 在每列上重叠 6 次(= 6 行)，将最下面一行的红色的 input 放在顶部。红色和黄色的混合形成了橙黄色，可以在游戏板上看到。...用罗马数字表示的 1 和 2 与字符 1 和 2 是相同的，它们的像素宽度也是相同的。 我的想法是将一个玩家（黄色）的单选按钮连接到左边，并将另一个玩家（红色）的单选按钮连接到共享父容器的右边。...一个黄色的 radio 按钮、一个红色的 radio 按钮和一个代表圆盘并与圆孔重叠的 div 。这样的圆孔重复了42 次，并排列成多列。
写在前面 首先说明 不是水文，我只是希望通过面试题的形式给你们看一些看似比较牛逼的概念，其实很简单的东西，我最近在写vue3的项目，所以等我写好之后我再更新vue3的教程，虽然早就想更新了，但是一直不是没有一个拿得出收的...v3项目嘛，我也很着急的嘛，写完之后我就更新v3+vite+antdv的文章。...，他本身只是对真实DOM的抽象，使用对象的属性来描述节点，最后通过操作使虚拟DOM映射到真实DOM上，创建虚拟DOM是为了更好的将虚拟节点渲染到页面上，所以虚拟DOM对象的节点与真实节点是一一对应的，现在的框架...什么是margin塌陷和margin重叠 margin塌陷是指外层div包含内层div的时候，当内层div设置margin-top的属性的时候，直接会出现外层偏移的现象就叫做margin塌陷 margin...重叠值得是上下两个div，当给上面的div设置marginBottom，同时给下面的div设置marginTop的时候，他们的距离只会按照较大的那个进行设置，而不是相加的和，这个现象就叫做margin重叠
直到你理解了基础知识之后，我才会把你不应该关心的一切都抛在脑后 你的第一个网格布局 CSS Grid的两个核心成分是包装（父）和物品（子）。...它会将6个div彼此叠放在一起 ? 列和行 为了使它成为二维的，我们需要定义列和行。我们创建三列和两行。...注意:我们只在页面上看到一个3x2的网格,而我们将其定义为一个3x3的网格。那是因为我们只有六个项目来填补网格。...当我们把第一个项目占据整个第一行时，它将其余的项目向下推 最后，我想展示一个更简单的方法来编写上面的语法 .item1{ <!...两个属性设置列宽和行高是多少,又通过grid-column-start与grid-column-end两个属性定位字元素的位置和项目的大小,关于网格布局内容很多,自己知道的也只是冰山一角,有待挖掘和探索
在最近的一个作品中，在使用 opacity 属性来实现页面整体透明的时候，发现了一个问题。如果两个层发生了重叠，使用了 opacity 属性并且属性值小于1的层，会覆盖掉后面的层。...id="a"> 保存为 html 文件打开之后，可以看到正常的次序 这时候，我们为...#a 加上属性 opacity：0.9 神奇的事情发生了，它覆盖了另外两个层： 只有当为另一个层（例如：#c）也设置一个小于1的opacity值（例如：0.8）之后，后面的 #c 才能安装正常的规则覆盖在...，对层使用 position 属性的 relative 之后，可以使其层次和 opacity 相同，这样之后，按照正常的排序进行层叠显示（在后面的实验中，我对 absolute 属性值也做了测试，结果和...当我们取消了 #c 的 opacity 属性之后，我们可以看到，#c 被排在了最下面。 还没有完，之前只是对 #b 激活了 position：relative 属性，还没有使用 z-index。
absolute 定位的元素和其他元素重叠。...以下实例选取所有元素插入到 元素中: div p { background-color:yellow; } 子元素选择器 与后代选择器相比，子元素选择器（Child selectors...紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。...以下实例选取了所有位于 元素后的第一个 元素: div+p { background-color:yellow; } 后续兄弟选择器 后续兄弟选择器选取所有指定元素之后的相邻兄弟元素...以下实例选取了所有 元素之后的所有相邻兄弟元素 : div~p { background-color:yellow; } div~*：匹配全部
BFC 虽然可能你没听过BFC是什么，但是你一定用过，其是一种在CSS中存在的技术，你可能只是一直不知道有这样一个专业名词，本文就来介绍一下到底什么是BFC 一、什么是BFC 首先引用一下WC3对BFC...在最后一个子元素后面添加一个空元素，并给予样式 clear: both 给父元素设置一定的高度 (2)margin-top塌陷 另一个例子就是「margin-top塌陷」，如图 ?...当前子元素在父元素框内，并且上面紧贴父元素上边缘，此时我们想让子元素的上边缘与父元素的上边缘拉开一段距离，实现如下图所示的效果 ?...因此我们第一个想到的就是给子元素添加 margin-top，可结果却不如人意，效果如下图所示 ?...你的「赞」 、「在看」、「关注」都是我创作的动力，谢谢大家的支持
第一个子元素的z-index大于第二个子元素的，所以会覆盖。...如果文字和 图片发生重叠，显然，是后面的文字要优先显示的，因为，文字比图片重要。...Paste_Image.png 第一个图片变成定位元素之后，前面的图片又覆盖了后面的，这是因为当变为定位元素后，没有对z-index设置值，所以默认值为auto，从层叠顺序上看，这时可以把z-index...[](a.jpg) ? Paste_Image.png 绝对定位元素只是一个普通元素，并不具有层叠上下文。此时图片的层叠上下文是页面根元素。...6.其他CSS属性与层叠上下文（不只是z-index） 1.页面根元素天生具有层叠上下文，称之为"根层叠上下文"。 2.z-index值为数值的定位元素（相对或绝对）也具有层叠上下文。
(3)生成BFC元素的子元素中，每一个子元素的margin与包含块的左边界border相接触（对于从左到右的格式化，否则相反），即使存在浮动也是如此； (4)BFC的区域不会与float元素区域重叠 可应用到两栏布局中...： 一个元素是浮动元素，可触发另一个非浮动元素生成BFC（overflow:hidden;）。...BFC的解决方法： 可触发另一个非浮动元素生成BFC（overflow:hidden;）。由于“BFC的区域不会与float元素区域重叠”，因此可以实现两栏布局。...overflow: hidden; } 效果： bfc解决两栏.png 不过我个人觉得这样做只是让BFC的区域不会与float元素区域重叠，实现了两栏布局效果，但并不是自适应的两栏布局，上述例子只是刚好父容器的宽度...，可戳我之前的两篇文章： 详解CSS的Flex布局 实例详解：Flex布局（二） 4.3解决浮动元素的父元素高度塌陷的问题 举例： <!
1.DOM内部插入append()与appendTo() 动态创建的元素是不够的，它只是临时存放在内存中，最终我们需要放到页面文档并呈现出来。那么问题来了，怎么放到文档上？...选择器 描述 append() 向每个匹配的元素内部追加内容或追加子节点 appendTo() 把所有匹配的元素追加到另一个指定的元素集合中 append：这个操作与对指定的元素执行原生的appendChild...方法，将它们添加到文档中的情况类似。...的使用及区别： .prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append()). .prepend()和.prependTo()实现同样的功能...prependTo()把所有匹配的元素前置到另一个指定的元素集合中
(可以说是完全无视) [1]浮动-定义：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。...由于浮动框不在文档的普通流中，所以文档的普通流中的浮动框之后的块框表现得就像浮动框不存在一样。...浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列。如下第一个例子box2是浮动框，其后跟一个块元素；例子2是浮动框后跟一个内联元素。...问题2：元素浮动造成的两个div覆盖或相互重叠如何解决。 （1）、左右结构div盒子重叠现象，一般是由于相邻两个DIV一个使用浮动一个没有使用浮动。...例子如上：.container和box3的布局是上下结构，上图发现box3跑到了上面，与.container产生了重叠，但文本内容没有发生覆盖，只有div发生覆盖现象。
若此时将浮动更改与右边那么使其元素浮动于右侧： 结果如下： 浮动会使div 脱离文档流，在之后若再加上div，将会收到之前浮动的影响使其重叠： 结果如下，黑色的div 在浮动的酒红色...height:200px; border:2px solid black; padding:50px; margin:50px; } 其中 border 的值第一个为边框宽度...在盒子模型中还有一个属性box-sizing，box-sizing有两个值，一个是默认状态下的content-box，另一个是border-box；这两者的区别为，默认状态下为 content-box... 以上代码创建了两个样式，一个是 flex 另一个是 box，当然 flex 中暂时并未设置弹性布局，在此留着备用，接下来的 box 设置了基础的宽高...align-items align-items用于设置子元素在主轴上的对齐方式，我们先看一张图（图片来源于网络）： 以上图片很好的说明了什么是主轴、侧轴、主轴起始点与终点、侧轴起始点与终点。
基本用法 后备（默认）内容 具名插槽 作用域插槽 插槽版本变化 总结 前言 Vue中的插槽（slot）在项目中用的也是比较多的，今天就来介绍一下插槽的基本使用以及Vue版本更新之后的插槽用法变化。...基本用法 现在，有两个组件，A与B，分别如下： A.vue 我是A组件 export...为了将“我是B组件”作为后备内容，我们可以将它放在 标签内： 我是B组件 元素上使用 slot 指令，并以 slot 的参数的形式提供其名称（当然也可以直接放在标签中，如）.../template> 然而上述代码不会正常工作，因为只有B组件可以访问到 obj，而我们提供的内容是在父级渲染的，即在父级作用域中。
举个简单的例子，我们在使用modal组件的时候，我们将它放在了我们的模板template里面，但是由于modal组件希望位于页面的最上方，这时候我们将modal组件挂载在body上面是最好控制的，我们能够很好的通过...vue2.0中的实现 vue2.0中我在写这个组件的时候是通过手动的形式来进行挂载的，我写了一个vue指令来进行这个操作，帮助我将modal组件挂载到body上面去，专这样也能够很好的通过控制zIndex...modal从他原始挂载的父节点移除，然后挂载到body上去，通过手动的形式来重新挂载，能够很好的解决这种问题，当然上面只是简单的逻辑，如果需要考虑卸载等其他逻辑代码还得增加。...这也意味着来自父组件的注入按预期工作，并且子组件将嵌套在Vue Devtools中的父组件之下，而不是放在实际内容移动到的位置。...顺序将是一个简单的追加——稍后挂载将位于目标元素中较早的挂载之后。
牧羊人很擅长照顾他们的羊群，为牧群带来秩序和结构。即使有几百只毛茸茸的动物，牧羊人仍然会在一天结束时将它们悉数带回农场。...下面的结构与上面的 JavaScript 对象数组完全相同，只不过是在 DOM 节点中表示的。...羊在第一列，牛在第二列 通过 grid-auto-flow:dense，每只动物都会让自己进入对应定义区域的第一个可用点。...也可以用于任意数量的不同排序规则—— 只需再定义另一个列，数据就会被神奇地引导到其中。...我们可以看到 CSS Grid 的布局优势和 JavaScript 的动态数据处理功能是重叠的，它可以为我们提供更多的选择和功能，是我们能够随心所欲的去渲染数据。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
