/ 表示上边距10px，右边距20px，下边距30px，左边距40px。...在正常情况下，如果两元素横向排列，两元素之间的距离是两元素之间margin相加之和，如果两元素纵向排列，两元素之间的距离是取两元素之间margin的最大值。...如果设置的是float:left;向左浮动，那么元素（积木）从右边向上浮起来到水面，然后向左浮动到水槽的左边。...如果给元素设置的是float：right；向右浮动，那么元素先从左边浮起到水面，然后向右浮动到水槽的右边。以此类推。都是按照这种规律，不管有几个元素。...5 如何浮动 将我们需要的块设置float属性，如以下代码: .wrap div { float: left; //设置div向左边浮动，实现两个div并排展示
它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。...可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。...合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。...（不设置浮动，不设置左边距，块级子元素，一律靠左竖直向下排列，内联子元素一律从左向右排列，想想，正常写代码，都是这样，设置左浮动的靠近父元素的左边，设置右浮动，靠近父元素的右边。）...BFC清除浮动 浮动元素是会脱离文档流的(绝对定位元素会脱离文档流)。 如果一个没有高度或者height是auto的容器的子元素是浮动元素，则该容器的高度是不会被撑开的。
可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。...属于同一个BFC的两个相邻Box的margin会发生重叠（正常的不设置浮动，两个块元素margin重叠,仅仅是垂直方向，左右不是这个样子的） 3.每个元素的margin box的左边， 与包含块border...（不设置浮动，不设置左边距，块级子元素，一律靠左竖直向下排列，内联子元素一律从左向右排列，想想，正常写代码，都是这样，设置左浮动的靠近父元素的左边，设置右浮动，靠近父元素的右边。）...）包含着两个兄弟元素（p），一个BFC已经创建了出来。...BFC清除浮动 浮动元素是会脱离文档流的(绝对定位元素会脱离文档流)。如果一个没有高度或者height是auto的容器的子元素是浮动元素，则该容器的高度是不会被撑开的。
今天，我们来一起看看如何检查数组是否包含特定值或元素。...Arrya.indexOf() 方法 在需要查找的元素的确切位置的情况下，可以使用indexOf(elem)方法，该方法在指定的数组中查找elem并返回其第一次出现的索引，如果数组不包含elem则返回-..."); } else { console.log("元素不存在"); } 检查对象数组是否包含对象 some() 方法 在搜索对象时，include()检查提供的对象引用是否与数组中的对象引用匹配...some()方法接受一个参数，接受一个回调函数，对数组中的每个值执行一次，直到找到一个满足回调函数设置的条件的元素，并返回true。...函数的作用是:如果值存在，则返回该值的索引;如果不存在，则返回-1。 最后，对于对象，some()函数可帮助我们根据对象的内容搜索对象的存在。 我是小智，我要去刷碗了，我们下期再见！
以下是一些与 CSS 元素定位相关的学习资源和主题, 我们将一一的进行学习实际： 盒子模型：了解 CSS 中的盒子模型（前面简单的提及了），包括内容区域、边框、内边距和外边距，以及如何使用这些属性来控制元素的大小和间距...例如，假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距以及 5px 的边框，如果希望这个元素框达到 110 个像素，就需要将内容的宽度设置为 70 像素，请看下图中width: 70px+...常见的块级元素有div、p、h1-h6、ol、ul、li、table、form、address、blockquote等。 块级元素可以设置宽度、高度、内外边距等属性，可以包含其他块级元素和内联元素。...内联元素只能包含文本或其他内联元素，不能包含块级元素。...，在外边距设置为正时是如何推开周边元素，以及设置为负时，是如何收缩空间的。
块级盒子的内外边距：如何使用box-sizing重新定义盒子模式？ 外边距 margin margin 属性为给定元素设置所有四个（上下左右）方向的外边距属性。...每个值可以是数值，或百分比，或 auto： 当只指定一个值时，该值会统一应用到全部四个边的外边距上。 指定两个值时，第一个值会应用于上边和下边的外边距，第二个值应用于左边和右边。...指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的外边距。 指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的外边距。 外边距的作用：使块级元素居中？...如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。...也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。
它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 而 Block Formatting Contexts (BFC，块级格式化上下文)，就是 一个块级元素 的渲染显示规则。...，浮动元素也参与计算； 5、每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此； 6、 BFC的区域不会与float重叠； 那么如何触发 BFC呢？...2、BFC可以包含浮动的元素（清除浮动） 正常情况下，浮动的元素会脱离普通文档流，所以下面的代码里： ? 外层的div会无法包含 内部浮动的div，效果见下图： ?...但如果我们 触发外部容器的BFC，根据BFC规范中的第4条：计算BFC的高度时，浮动元素也参与计算，那么外部div容器就可以包裹着浮动元素，所以只要把代码修改如下： ? 就可以完成以下效果： ?...之所以是这样，是因为上文的规则5： 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此； 所以要想改变效果，使其互补干扰，就得利用规则6 ：BFC的区域不会与float重叠，让 div
在这种方式里，块级元素在它们的包含块里一个一个垂直延伸，行内元素在它们的包含块里从左至右的水平排布。 值得注意的是，在正常流里垂直边距（vertical margin）是重叠的。...也就是说，上下两个块级盒之间的边距由它们之中边距较大的元素决定，而不是他们的和！...，元素的尺寸和位置往往是由该元素所在的包含块决定的。...格式化则表明了在这个环境中，元素处于此环境中应当被初始化，即元素在此环境中应当如何布局等。元素如果创建了BF么BFC决定了如何对其内容进行定位，以及它与其他元素的关系和相互作用。...main的左边依然会与包含块的左边相接触。
，且浮动元素与正常元素之间没有清除浮动，此时正常元素会被浮动元素盖住，但包含的内容会围绕浮动元素显示。...="right">rightdiv> div> .head与.wrap两个box之间上下各设置有20px的外边距，但发生了重叠； .head与.left两个之间，.head有20px的外边距...1.4 每个box的margin 左边，与包含border box的左边相接触（右边一样），浮动也是如此 2. IFC(行级格式化上下文） 框从包含块的顶部开始，一个接一个水平放置。...水平方向上的外边距、边框、内边距所占空间都放在一起（display为inline、inline-block；元素本身具有inline特性的元素都具体以下特征）。...规则如下： 2.1 不能指定宽高 2.2 Margin、Padding、border垂直方向的无效 2.3 行框的左边紧贴包含块的左边，而行框的右边紧贴其包含框的右边，而浮动块可以插入在包含块边缘与行框之间
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。...这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，所以两个盒子之间距离只有 100px，而不是 200px。...首先这不是 CSS 的 bug，我们可以理解为一种规范，如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。...BFC 可以包含浮动的元素（清除浮动） 我们都知道，浮动的元素会脱离普通文档流，来看下下面一个例子 div style="border: 1px solid #000;"> div style...如果使触发容器的 BFC，那么容器将会包裹着浮动元素。
HTML的结构包括头部 (Head)、主体 (Body) 两大部分。头部描述浏览器所需的信息，主体包含所要说明的具体内容。...padding-top: 内边距距上边的距离 margin： auto; 居中 margin-left: 外边距距左边的距离 line-height：行高 background-positoin...： 背景定位的属性，有两个属性值，第一个代表距左边，第二个代表距上边。...##### #号中的言论待考证 如果第一个div1里面的内容高度小于或者等于本身定义的div0的高度的话，下一个div2就会自动靠下边最左边浮动 如果div1里面的内容的高度大于div1设置的高度的话...，div2的位置不会靠最左边，而是在多出内容的右下角为开头浮动，如果div设了float:left; 则在div的右边浮动。
（ 即 width/height 包含了 padding 和 border 值 ） 2.2 CSS如何设置这两种模型 标准：box-sizing: content-box; ( 浏览器默认设置 ) IE...主要看怎么父元素的盒模型如何设置。...父子元素和兄弟元素边距重叠，重叠原则取最大值。空元素的边距重叠是取 margin 与 padding 的最大值。...Box 的 margin 会发生重叠； （3）每个元素的 margin Box 的左边， 与包含块 border Box 的左边相接触，（对于从左到右的格式化，否则相反）。...3、可以让父元素的高度包含子浮动元素，清除内部浮动（原理：触发父 div 的 BFC 属性，使下面的子 div 都处在父 div的同一个 BFC 区域之内） 4、去除边距重叠现象，分属于不同的 BFC
大白话讲，我理解BFC其实就是CSS中的块级作用域，包含上下文元素中的所有子元素，但不包括内创建了新的BFC的子元素的内部元素，也就是 A -> B -> C 但是 A !...-> C，换句话讲，一个元素不可能存在于两个BFC中，因为如果一个元素存在于两个不同的BFC，那么这个元素就能和这两个BFC中的子元素发生作用，那就违法了BFC的初衷：隔离。...BFC的渲染规则 BFC中有特定的渲染规则，如下： 同一个BFC中两个相邻的元素的margin重叠问题 BFC在计算高度是，即使浮动的元素也会参与高度计算 BFC的区域不会与float的元素区域重叠 每个元素的左外边距与包含块的左边界相接触...每个元素的左外边距与包含块的左边界相接触 我们知道，如果盒子打开了float，脱离文档流且不占位，按照BFC的特点，块内每个元素的左边距都会与包含块的左边距重合，举个 ...class="side">你好朋友div> div class="main">HoMeTowndiv> 页面展示如下： .side开启浮动，左外边距与body的左边重合
本章文中示例代码托管在CodeSandbox[1] 3.1 盒模型 盒模型是 CSS 的核心概念，描述了元素如何显示以及(在一定程度上)如何相互作用、相互影响。...包含块并不一定就是父元素，后面我们会介绍。 3.1.3 外边距折叠 前面，我们认识了各种盒子以及如何计算盒子的大小。 其中外边距只会影响元素与元素之间的距离，是一个比较简单的概念。...如果找不到这样一个定位祖先，那么它就是相对于文档的根元素进行定位的，文档的根元素也叫做起始包含块。...浮动受非同级元素影响 如上，这种情况下，第二组合子挂在了第一组盒子的左边。如果我们不想让第二组的盒子 1 挂在第一组的盒子 3 左边应该如何处理呢？...块级格式化上下文规定页面必须自动包含浮动的元素，且所有块级元素的左边界默认与包含块的左边界对齐。
这个宽度是指对象的可见内容的左边界到右边界的距离。（这个左边界和右边界是如何理解，也没有说清楚，不过下面给了个链接，我懒的去看。）...下面再来看看火狐的开发者网站MDN是如何解释的。...如果元素比内容区域宽（例如，如果有滚动条用来滚动内容），scrollWidth是大于clientWidth的。...如下图，scrollWidth = 左内边距 + 内容宽度 + 右内边距 综上，IE 6的scrollWidth = 左内边距 + 内容宽度 + 右内边距，这个内容宽度不等于元素的宽度。...如下图，scrollWidth = 左内边距 + 内容宽度 + 右内边距 综上，IE 7的scrollWidth = 左内边距 + 内容宽度 + 右内边距，这个内容宽度不等于元素的宽度。
-不占据页面空间 2、通过偏移属性固定元素位置 3、相对于 最近的已定位的祖先元素实现位置固定 4、如果没有已定位祖先元素，那么就相对于最初的包含块(body,html)去实现位置的固定...如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成0（高度塌陷） 3.如何清除浮动 解决方案 及 原理分析 方案1 直接设置父元素的高度 优势：极其简单 弊端：必须要知道父元素高度是多少...属于同一个BFC的两个相邻Box的margin会发生重叠 3、每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。...依据BFC布局规则第三条： 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。...我们可以看到，虽然有浮动的元素top，但是bottom的左边依然与包含块的左边相接触。
注意：right 是指元素右边界距窗口最左边的距离，bottom 是指元素下边界距窗口最上面的距离。...：元素的高度（包括边框和内边距，不包括外边距） offsetWidth ：元素的宽度（包括边框和内边距，不包括外边距） 偏移值 offsetLeft ：元素的相对水平偏移位置（左边界距离可视区域最左侧的距离...鼠标相对于页面的位置 event.pageX ：鼠标相对于页面左边缘的距离。 event.pageY ：鼠标相对于页面上边缘的距离。...元素的位置偏移量 offset() ：返回包含 top 和 left 两个属性的对象，相对于 document 文档的坐标。...position()：返回包含top和left两个属性的对象，相对于最近的已定位的包含元素的位置。若无，则相对于document。
例如，一个绝对定位的元素，需要从其父元素的左边缘和上边缘定位 16px。 考虑以下示例，一张卡片，其图标应与其父级的左上角间隔开。...卡片组件 哦，如果我想详细了解卡片组件间距，我可能会写一本书。 我将突出显示一个通用模式，看看应该如何应用间距。 （对不起，如果你饿了） 你能想到这张卡的间距会在哪里使用吗？ 见下图。...考虑以下包含标题、段落和图像的混合示例。 HTML div class="wrapper"> Spacing Elements in CSS 的概念！ 组件封装 一个大型设计系统包含如此多的组件， 直接向它们添加边距是否合乎逻辑？ 考虑以下示例。...我在检查 Facebook 的新设计 CSS 时，首先注意到了这一点。 我们将内联样式div设置为width ：16px， 它的唯一目的是在左边缘和包装器之间添加一个空间。
3.2-1 可以看到，id为div1，div2和div3的三个div生成的块盒在root生成的BFC下，每个盒的左外边缘紧贴其包含块(body的content box)的左边缘。...内容为float-left的div虽然把div3内容向右挤开了一段距离（原因是浮动导致id为div3的盒内的行盒收缩），但是id为div3的盒的左外边缘仍然紧贴其包含块的左边缘。...3.2-2 可以看到div3由于浮动生成了新的BFC，会导致盒的左外边缘不再紧贴其包含块的左边缘，并且由于浮动，其本身宽度变窄了。 4....如果该元素有块级子元素，其高度为最上块级子盒的上外边距边缘到最下块级子盒的下外边距边缘的距离。 绝对定位子元素会被忽略，相对定位盒不需要考虑其位移。注意子盒可能是匿名块盒。...此外，如果该元素有下外边距边缘低于该元素下内容边缘的浮动子元素，那么高度将增大来包含那些边缘。只有参与本块格式化上下文的浮动才考虑在内，比如，在绝对定位后代中的或者其他浮动中的浮动就不考虑。
margin 纵向重叠（合并）问题 元素垂直排列时，第一个元素的下外边距与第二个元素的上外边距会发生合并，合并后的间距就是两者中最大的那个值。...>item4div> 答案： item1与item4之间间距为 20px 解析：因为中间两个box中没有内容也没有边框线，所以外边距会一直重叠合并，所以最后item1和item4之间距离只有一个下外边距的大小...margin 穿透问题 当一个元素包含在另一个元素中时,如果父元素没有设置内边距或边框把外边距分隔开，它们的上或下外边距也会发生合并。...div class="left fl">左边div> div class="right fl">右边div> div> div class...="left fl">左边div> div class="right fl">右边div> 为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
