同一个块格式化上下文中的相邻块级盒的垂直外边距将折叠。 在一个块格式化上下文中，每个盒的左外边缘紧贴包含块的左边缘（从右到左的格式里，则为盒右外边缘紧贴包含块右边缘），即使有浮动参与也是如此（尽管盒里的行盒可能由于浮动而收缩），除非盒创建了一个新的块格式化上下文 3.2在一个块格式化上下文中，每个盒的左外边缘紧贴包含块的左边缘（从右到左的格式里，则为盒右外边缘紧贴包含块右边缘），即使有浮动参与也是如此（尽管盒里的行盒可能由于浮动而收缩），除非盒创建了一个新的块格式化上下文 如果该元素有块级子元素，其高度为最上块级子盒的上外边距边缘到最下块级子盒的下外边距边缘的距离。 绝对定位子元素会被忽略，相对定位盒不需要考虑其位移。注意子盒可能是匿名块盒。 此外，如果该元素有下外边距边缘低于该元素下内容边缘的浮动子元素，那么高度将增大来包含那些边缘。只有参与本块格式化上下文的浮动才考虑在内，比如，在绝对定位后代中的或者其他浮动中的浮动就不考虑。
左浮动盒的右外边缘不可在其旁边的右浮动盒的左外边缘之右。右浮动元素亦是。 浮动盒的上外边缘不可高于其包含块的顶部。当浮动出现两个折叠外边距之间时，浮动会如同它有一个参与标准流的空匿名父块一样来定位。 该父块的位置由关于外边距折叠那章的规则定义。 浮动盒的上外边缘不可高于源文档中此前元素生成的块盒或浮动盒的上外边缘。 元素的浮动盒的上外边缘不可高于源文档中此前元素生成的盒所在的行盒的顶部。 空隙阻止外边距折叠并充当元素上外边距margin-top之上的空间。空隙被用于推动元素在垂直方向上越过浮动。 如果元素上边框边缘的假定位置没有越过有关浮动，那么空隙就会产生，并且外边距折叠要根据8.3.1章规则计算。
Vite学习指南，基于腾讯云Webify部署项目。
auto; (注意这是让元素自身居中,text-align:center是让元素里面的文本在元素内部居中) 上右下左赋值: margin:10px 20px 30px 40px; 顺时针 上下相邻两个元素的外边距取最大值 ,左右相邻求和 粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连显示异常,给上级元素添加overflow:hidden解决,给上级元素添加边框也可以解决(修改了元素原来的样子 什么是内边距: 元素边缘距内容的距离称为内边距. 20px; 上右下左赋值: padding:10px 20px 30px 40px; 顺时针 修改元素的内边距会影响元素的宽高 如果需要移动元素内的子元素有两种方式: 给大元素添加内边距去移动里面的小元素 width:50px; height:50px; background-color: green; margin-left: 50px; /*粘连问题:当元素的上边缘和上级元素的上边缘重叠时
---- 继续讲我们的盒子模型 由于现在浏览器有可能会自动给你的代码加上margin或者padding，我们经常在css文件中先设置一下这两个属性值为0： html, body{ margin: 0px; padding: 0px; } 此时，我们再看一下，样式（把上次的代码再给大家粘贴一下）： lesson4.html <! 再来说一下外边距——margin，我们修改我们的代码为： lesson4.html <! 现在又出现了另一个问题，就是大家发现上面两个盒子中间多了一个空白的地方，而且空白地方无法选中，说实话如果你用inline-block那么中间这个间距就是默认自带的了(如果非要去掉就要加float: left 现在我们盒子和浏览器边缘是没有间距的，现在我们希望它离浏览器有一段距离，我们加一个margin: 10px;属性，然后再看： ? 我们看到它和浏览器之间有了边距，我们再来看一下现在盒子的大小： ?
，对于边缘特殊处理，将第一张轮播图追加到一行图片之后，当切换到最后一张轮播图时，下一张即播放第一张图，当此图轮播完成后，将所有图片归位，提供两个DEMO，第一个是单纯的轮播不存在任何控制按钮，第二个则比较完善 0 if(++curIndex === imgArr.length){ // index加1，判断是否为最后一张来作边缘处理 li.appendChild(img); // 追加到 slideContainer.appendChild(li); // 将第一张图片追加到轮播图的最后，作边缘处理 -- 加入控制按钮，上一张与下一张，直接切换按钮 将第一张图片的边缘化进行处理 对浏览器页面显隐与鼠标移入移出事件的支持 --> <! targetIndex; // 设置当前index if(curIndex === imgArr.length){ // index加1，判断是否为最后一张来作边缘处理
inset边框 outset 3D outset边框 边框也有四面，所以也会有上下左右 所以有时候为了更精确定位并修改样式可以使用： border-top-style 上边框样式 border-right-style 如果定义一个length 参数，那么定义的是水平和垂直间距 如果定义两个length 参数，那么第一个设置水平间距，而第二个设置垂直间距 4)).表格标题的位置 caption { caption-side e-resize 指示矩形框的边缘可被向右（东）移动 ne-resize 指示矩形框的边缘可被向上及向右移动（北/东） nw-resize 指示矩形框的边缘可被向上及向左移动（北/西） n-resize 指示矩形框的边缘可被向上（北）移动 se-resize 指示矩形框的边缘可被向下及向右移动（南/ 东） sw-resize 指示矩形框的边缘可被向下及向左移动（南/西） s-resize 指示矩形框的边缘可被向下移动（南） w-resize
BFC 原理 BFC 即 Block Formatting Contexts, 翻成中文是 块级格式化上下文. 只要元素触发以下任意一条, 便视其具有 BFC 特性(创建BFC的方式): html根元素 float浮动 绝对定位 overflow不为visible display为表格布局或者弹性布局 BFC 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left）(对于从右到左的格式来说，则触碰到右边缘） 形成了BFC的区域不会与float box重叠 计算BFC BFC主要的作用： 清除浮动 防止同一BFC容器中的相邻元素垂直方向的外边距重叠问题 举例 1. 同一个 BFC 下的两个块级元素之间的外边距会发生折叠. ? 但它们之间的距离却只有 100px, 并不是想象中的 (100 + 100)px. 这是因为它们之间的外边距折叠了. 你可以这样理解, 只有一个外边距起作用了.
可以先看下这个视频教程：http://my.tv.sohu.com/us/97014746/64226777.shtml 本文参考：http://www.cnblogs.com/chinhr/archive /2008/06/20/1227084.html http://www.cnblogs.com/time-is-life/archive/2008/01/21/1046817.html http:/ /www.cnblogs.com/tianyue3107/archive/2009/04/22/1441358.html Margin 与 Padding 的区别 1.Margin 用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离 . 2.Padding 用来设置元素内容到元素边界的距离。 Div1这里 height:60px;需要用60px-10px(减除 padding-top的内边距距离)，才能高度和DIV2的60ox保持一致。
我们可以看下上面的图片，在 changedTouche[0]中，有些值： clientX:74 // 触摸点相对于浏览器的 viewport 左边缘的 x 坐标，不会包括左边的滚动距离。 clientY:73 // 触摸点相对于浏览器的 viewport 上边缘的 Y 坐标，不会包括上边的滚动距离。 screenX:2202 // 触摸点相对于屏幕左边缘的 x 坐标。 screenY:327 // 触摸点相对于屏幕上边缘的 Y 坐标。 pageX:65 // 触摸点相对于 document 的左边缘的 x 坐标，包括左边的滚动距离 pageY:18 // 触摸点相对于 document 的上边缘的 Y 坐标，包括上边的滚动距离 限制向下滑动最大区间 设定向下最大区间的值比较简单，直接设定一个值，当上一次滑动的距离加上本次滑动的距离大于这个值的时候，就不让它再继续往下滑了，让他直接等于这个设定的值。
由块级元素（块级元素特点：从左到右撑满页面，独占一行，触碰到页面边缘时，会自动换行）和行级元素（块级元素特点： 在同一行内显示，不会改变HTML文档结构 ）组成。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、盒子中的内容（content）. 在三维空间中，盒子模型由上到下分为五层： 边框（border）位于第一层； 内边距（padding）和盒子中的内容（content）位于第二层； 背景图像（background-image）位于第三层； 也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。 块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。 行内框在一行中水平布置。 可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。
比如 p.inline { display:inline;//行内元素，block为块级元素，none不显示 } 块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。 可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。 #box_relative { position: absolute; left: 30px; top: 20px; } 这样元素就会出现在距离页面的左边框30px上边框20px的地方。 浮动 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 这个就很有意思，其实浮动感觉像是起了另一层的文档流。 w3school.com.cn w3school上面讲得就很清楚，而且看到这三张图，真的有那种，浮动的感觉，水流流向左边，树叶（块级元素）碰到了岸边（页面边缘），卡住，下一片树叶流过去卡住，卡满了就被冲到下面
top:定义了定位元素的上外边距边界与其包含块上边界之间的偏移量 right: 定义了定位元素右外边距边界与其包含块右边界之间的偏移 left: 定义了定位元素左外边距边界与其包含块左边界之间的偏移 bottom : 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。 常用属性: margin:简写属性，在一个声明中设置所有外边距属性 margin-top:定义元素的上外边距 margin-right:定义元素的右外边距 margin-bottom:定义元素的下外边距 如果缺少左外边距的值，则使用右外边距的值。 如果缺少下外边距的值，则使用上外边距的值。 如果缺少右外边距的值，则使用上外边距的值。 6.3 外边距 元素的内边距在边框和内容区之间。
在行内格式化上下文中，盒从包含块的顶部开始一个接一个地水平摆放。盒水平方向的外边距、边框和内边距在布局时都会考虑在内。盒的垂直对齐方式则不一：可能按底部或者顶部对齐，又或者按它们内容文本的基线对齐。 行盒的宽度 一般来说，行盒的左边缘紧贴其包含块的左边缘，其右边缘紧贴包含块的右边缘。然而，浮动盒可能被置于包含块和行盒边缘之间。 因此，尽管在同一行内格式化上下文中的行盒是等宽的（包含块的宽度），由于浮动会造成可用的水平空间减少，行盒的宽度仍可能变动。 当行内盒被分割，外边距、边框和内边距在任何断点处都不会产生视觉影响。 行内盒也可能由于双向文本处理而在一个行盒内被切割成多个盒。 为了包含行内格式化上下文中的行内级内容，行盒按需创建。 image.png 可以看到： 外边距插在了 emphasized 之前和 words 之后 内边距被插在了 emphasized 之前、上、下， words 值后、上、下。
CDN 边缘服务器是存在于网络逻辑极端或“边缘”的计算机。 边缘服务器通常用作不同网络之间的连接。 为了使连接在 Internet 上移动，它通常会接触许多网络并跨越许多网络边缘节点。一般来说，连接必须走得越远，必须穿过的网络数量就越多。 如果没有 CDN，传输可能会在源和目的地之间采用更慢和/或更复杂的路线。 在最坏的情况下，流量将“长号”远距离； 当连接到街对面的另一台设备时，连接可能会在全国范围内移动并再次返回。 这会增加加载时间，这会增加服务器与发出请求的客户端机器的距离。 CDN 边缘服务器在战略位置存储（缓存）内容，以便减轻一个或多个源服务器的负载。 通过将图像、HTML 和 JavaScript 文件（以及可能的其他内容）等静态资产尽可能靠近发出请求的客户端机器，边缘服务器缓存能够减少加载 Web 资源所需的时间。
派生选择器允许根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器可以使 HTML 代码变得更加整洁。 同样，还允许增加行间距。 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。 轮廓和边框的区别：边框 (border) 可以是围绕元素内容和内边距的一条或多条线；轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 盒子模型 CSS盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。
[image.png] 在进行html布局及css编写的时候，你是否遇到过这样的问题： 子元素设置浮动脱离文档流后，父元素无法将其完全包裹 子元素浮动实现两栏布局时，另一个子元素与浮动子元素重叠 垂直方向的外边距 FC(formatting context)直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。 [image] 但事实上，float中的文字已经脱离文档，如果文档流文字过少，浮动元素就会溢出父元素边缘。 外边距折叠的规则是：当两个块级元素相邻并且在同一个块级格式化上下文时，它们垂直方向上的外边距会产生重叠 html I am paragraph one div上的边距之间没有内容，因此两者将会合并，因此段落最终与框的顶部和底部齐平。39830Android入门教程（三）-安卓UI文档教程”android:layout_below 在某元素的下方android:layout_above 在某元素的的上方android:layout_toLeftOf 在某元素的左边android:layout_toRightOf 在某元素的右边android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐android :layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐第三类：属性值为具体的像素值，如30dip ，40pxandroid:layout_marginBottom 离某元素底边缘的距离android:layout_marginLeft 离某元素左边缘的距离android:layout_marginRight 离某元素右边缘的距离android:layout_marginTop 离某元素上边缘的距离代码例子可以参考github链接： https://github.com/huangguangda/RelativeLayoutTableLayout5820
I am paragraph one div上的边距之间没有内容，因此两者将会合并，因此段落最终与框的顶部和底部齐平。
”android:layout_below 在某元素的下方android:layout_above 在某元素的的上方android:layout_toLeftOf 在某元素的左边android:layout_toRightOf 在某元素的右边android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐android :layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐第三类：属性值为具体的像素值，如30dip ，40pxandroid:layout_marginBottom 离某元素底边缘的距离android:layout_marginLeft 离某元素左边缘的距离android:layout_marginRight 离某元素右边缘的距离android:layout_marginTop 离某元素上边缘的距离代码例子可以参考github链接： https://github.com/huangguangda/RelativeLayoutTableLayout
云端获取和启用云服务器，并实时扩展或缩减云计算资源。云服务器 支持按实际使用的资源计费，可以为您节约计算成本。 腾讯云服务器（CVM）为您提供安全可靠的弹性云计算服务。只需几分钟，您就可以在云端获取和启用云服务器，并实时扩展或缩减云计算资源。云服务器 支持按实际使用的资源计费，可以为您节约计算成本。
扫码关注云+社区
领取腾讯云代金券
云服务器
测试服务 WeTest
文件存储
SSL 证书
WordPress