您选择其中一个的最常见原因是: 填充具有背景，而边距始终是透明的 填充包含在元素的单击区域中，而边距则不包括在内 边距会发生垂直折叠，而填充则不会 块级元素和内联元素之间最明显的对比之一是它们对边距的处理...Inline box 完全忽略元素的顶部和底部边距。 水平边距显示会像我们期望的那样，而元素周围的垂直空间没有变化。...strong { margin: 50px; } 如果我们将边距更改为填充，它会显示背景。但是，它不会影响周围盒子的垂直布局。 垂直边距折叠 盒子模型的另一个怪癖是”垂直边距折叠”。...当你有两个垂直边距彼此相邻的盒子时，它们会折叠。不是将边距加到一起，而是仅显示最大的边距。...垂直外边距折叠最可能发生的两种简单情况: 两个紧邻的兄弟元素的外边距发生折叠 父子元素的外边距发生折叠 首子元素与父元素的上外边距发生折叠 尾子元素与父元素的下外边距发生折叠 预防边距折叠 有时我们确实希望防止边距折叠
现象： 发生了边距重叠，一个盒子和其子孙的边距重叠。 规则：正正取最大，负负取最负，正负就相加。...现象：发生了边距重叠，两个兄弟元素的上边距和下边距发生了重叠。 规则：正正取最大，负负取最负，正负就相加。 原因：块级元素的上外边距或下外边距有时（直接接触/相邻时）会合并为一个外边距。...原理：属于不同 BFC 的元素垂直方向边距不会发生重叠。...现象：发生了边距重叠，所有的空元素的边距重叠成一个空元素的边距。 原因：如果一个块级元素没有任何内容并且设置了 margin-top 和 margin-bottom 时会发生 margin 合并。...原理：属于不同 BFC 的元素垂直方向边距不会发生重叠。 感觉有帮助的小伙伴请点赞支持一下，谢谢~
5.3、内边距 ? padding属性用于设置内边距。 **是指 边框与内容之间的距离。**当我们给盒子指定padding值之后， 发生了2件事情： 内容和边框 有了距离，添加了内边距。...5.4.5.2、 嵌套块元素垂直外边距的合并 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者。 ?...任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 生成的块级框和我们前面的行内块极其相似。下面举例我们生活中很常见的一个样式：div 水平排列。...7.2、边偏移 简单说， 我们定位的盒子，是通过边偏移来移动位置的。 在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）。...来设置元素的位置； 跟父元素没有任何关系；单独使用的 不随滚动条滚动。
是，如果我们将元素item的宽度更改为100％而不是auto会发生什么？ 该元素将占用其父项的100％，加上左侧和右侧的边距。...使用CSS网格时，可以使用自动页边距实现类似于 flexbox 的结果。...我们有一个有内边距的 wrapper 元素，还有一个子项。子项目是绝对定位的，但没有任何定位属性。...Flexbox 和 自动边距 当谈到flexbox时，它有无限的可能性。 通过将其与自动边距相结合，我们可以构建功能强大的布局。 考虑下面的例子 ? 我们在右侧包含一行标题，描述和一个操作按钮的行。...CSS将如下所示： .item__action { margin-inline-start: auto; } CSS grid 和自动边距 在向网格项目添加边距时，它可以是固定值，百分比或自动值
边距折叠 简而言之，当两个垂直元素有一个边距，并且其中一个的边距大于另一个时，就会发生边距折叠。 在这种情况下，将使用较大的边距，而忽略另一个边距。...如果添加了填充，它不会影响元素并且填充将覆盖其他内联元素。 这只是一个友好的提醒，应该为内联元素更改显示属性。....c-nav a { display: block; padding: 16px 8px; } 对于每个项目之间的间距，你可以使用边距或将 的显示更改为 inline-block。...更好的解决方案是通过向父元素添加负边距来取消不需要的间距。 .wrapper { margin-bottom: -16px; } 这就是发生的事情， 它将元素推到底部，其值等于底部间距。...由于应用于父元素 .card__content 的填充，边框不会粘在边缘上。 是的，你猜对了！ 负边距是解决办法。
外边距（margin)和内边距（padding） 说到边距，那这个基本上跟Android里的概念差不多，先来看一个图吧，（虽然标注的丑了点，不过那不是重点） ?...一.margin：外边距；设置对象四边的外延边距。 margin: 20rpx 10rpx 25rpx 10rpx ：如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。...注意：margin折叠常规认知： margin折叠只发生在块级元素上； 浮动元素的margin不与任何margin发生折叠； 设置了属性overflow且值不为visible的块级元素，将不与它的子元素发生...margin折叠； 绝对定位元素的margin不与任何margin发生折叠； 根元素的margin不与其它任何margin发生折叠....二.padding：内边距：设置对象四边的内部边距。
内边距：padding 4. 外边距：margin 5. 内外边距简化设置方式 6. 单元素-水平居中 7. 相邻元素-外边距合并 8. 父子元素-外边距塌陷 1. ...什么是盒子模型 所有的 HTML 元素，我们都可以看成一个四边形，即一个盒子。...格式： margin : 0 px auto ; 其中，上下外边距为 0 （可自己更改），左右外边距根据 元素宽度和浏览器大小随时自动计算。 示例： 7. ...（被合并的外边距代码已 经无用， 所以一般我们会从代码上删除）（一般仅上下外边距有合并现象） 示例代码： 注意： 外边距合同通常发生在 margin-bottom 和 margin-top...左右外边距 一般不会合并 8. 父子元素-外边距塌陷 外边距塌陷：特指父子元素，因父元素无边框，父元素的外边距会塌陷到子元素中。导致子元素设 置外边 距，父元素会被级联作用。
(dom).width/height 取得最终渲染后的宽高 dom.getBoundClientRect().width/height 取得最终渲染后的宽高，还可以取得相对于视窗的上下左右的距离 # 边距重叠...两个垂直外边距相遇时，会发生折叠，合并后的外边距高度等于两折叠外边距中最高的那个。...只有普通文档流中的垂直外边距才会发生折叠，行内元素、浮动元素或绝对定位之间的外边距不会发生折叠。...# 使用 BFC 解决边距重叠问题 块格式化上下文（Block Formatting Context，BFC） (opens new window) 是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域...# BFC 渲染规则 BFC 元素垂直方向的边距会发生重叠，属于不同 BFC 外边距不会发生重叠 BFC 的区域不会与浮动元素的布局重叠 BFC元素是一个独立的容器，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素
正是因为没有很好地了解负边距才是导致各种奇怪的问题。只有在被用来解决其他地方的bug的时候才是hack 它符合正常的文档流 当负边距使用在没有浮动的元素上时并不会破坏正常的文档流。...Dreamweaver不理解它 负边距不会在DW的设计窗口展示出效果。那你为什么还用DW的设计窗口查看效果呢？ 与其共事 负边距如果可以正确的使用的话它的功能是很强大的。有两种场景负边距是很重要的。...10px;} 但是当你将负边距设置为相对bottom/right时，它并不会把元素向下或右拉，相反，它会把后面的元素往里面拉，从而覆盖自己。...#mydiv2会把#mydiv1看成宽度缩小20px（所以会覆盖一部分），但是有趣的是#mydiv1并不会有任何变化，而是依然保持原先的宽度。 如果负边距和宽度一样大的话，它就会被完全覆盖掉。...负边距可以让你在不增加任何浮动和标签的情况下完成。
不会发生边距坍塌的情况 根节点元素 水平边距(Horizontal margins)不会崩溃 「如果具有间隙的元素的顶部和底部相邻，他会与后续同级的元素边距一起坍塌，但是不会与父元素底部的一起坍塌（If...父子元素,父元素有非0的 min-height且有auto的height，父子元素都含有 margin-bottom，此时 margin-bottom 不会发生边距坍塌。...image-20200518001513036 可以看到这种情况下，父子元素下边距并不会发生边距坍塌。 会发生边距坍塌 发生边距坍塌需要满足2个前提 1.是 block 盒子模型，在同一个 BFC。...然后以下几种情况会发生边距坍塌。...image-20200519001704179 边距塌陷如何解决 通用型 1.改变盒子模型（非 block 模型） 2.创建新的 BFC 限制型 查看刚才不会发生高度坍塌的情况 边距塌陷如何计算 1.当两个或更多边距坍塌时
该演示是对一个教程网站的完全重新设计，用户可以从六个主题中选择一个，使用户界面的外观发生相应的改变。实现该功能所需的 JavaScript 只包含对一个类的更改。...相应的 CSS 代码更容易维护：更容易更改，也更容易限定需要更改的内容。这里，修改深紫色值将自动反映到所有需要修改的地方，而修改黑色肯定不会修改背景颜色。...Tolinski 建议使用margin-left或margin-right（margin-up或margin-down）来避免边距重叠 的陷阱，但不能同时使用。...例如，通用Stack布局原语 通过元素之间共同的父元素在它们之间加入边距，如下所示： .stack > * + * { margin-top: 1.5rem; } 相关文章详细介绍了这种模式的优点，并介绍了其他可以使用类似通配符的技术实现的通用布局...对于任何颜色、字体、间距都要使用变量，这样你的整个网站就可以一下子更新或配置。如果所有组件都使用自定义属性，则不必为创建独特的组件而担心。
根据盒模型解释边距重叠 当两个外边距相遇时，他们将形成一个外边距，合并后的外边距高度等于两个发生合并的外边距的高度中的较大者。...注意：只有普通文档流中块框的垂直外边距才会发生外边距合并，行内框、浮动框或绝对定位之间的外边距不会合并。...BFC（边距重叠解决方案，还有IFC）解决边距重叠 有些时候我们不希望他发生边距重叠，我们采用BFC和IFC来解决。 先普及一下概念，FC就是Fomatting Context。...我是这样理解的：它指定了一块环境，在这块环境内部的元素布局与外界不产生相互影响 以BFC为例，来介绍一下它的渲染规则： 内部盒子垂直排列，间距由margin决定 在同一BFC下，相邻两个盒子会发生边距重叠现象...可以看到3的下边距与4是发生了重叠的，这是因为它不具有BFC，就如同之前一样，边距会发生重叠最终合并成较大的那一个。
; 固定定位 只相对于 浏览器可视窗口 进行定位 , 定位的方式是通过 " 浏览器可视窗口 + 边偏移 " 进行定位 ; 固定定位 与 父元素没有任何关系 ; 固定定位 与 滚动条滚动没有任何关系 ;..., 设置元素 水平 / 垂直 居中 ; 2、先偏移50%再回退固定值 父容器 盒子 如果尺寸发生了改变 , 使用上述固定边偏移的方式设置的居中就会出现问题 ; 先设置 50% 的 宽度 / 高度 偏移量...外边距塌陷 问题 , 为 盒子设置 浮动 / 定位 , 就不用考虑 外边距塌陷的问题 ; 14、使用绝对定位 / 浮动解决外边距塌陷问题 在 标准流的父盒子 中 , 添加一个 标准流子盒子 ; 如果...子盒子设置 100 像素的外边距 , 父盒子也会被带下来 , 这就是外边距塌陷 ; 下面的示例 1 中 , 父盒子 和 子盒子 没有添加任何外边距 , 没有塌陷 ; 示例 2 中 , 为子盒子设置了...上外边距 , 结果将 父盒子也带下来了 ; 使用传统方法解决外边距塌陷问题 : 为 父容器 / 子元素 设置 内边距 / 边框 ; 下面是 为父容器设置 1 像素的 内边距 ; .father
，第二个构造函数以每边36磅页边距为参数调用第三个构造函数。 ...： Document document = new Document(PageSize.A5, 36, 72, 108, 180); 说明： 当创建一个矩形或设置边距时，你可能希望知道该用什么度量单位：...厘米 / 2.54 = 8.2677 英寸 8.2677英寸* 72 = 595 磅 29.7 厘米 / 2.54 = 11.6929 英寸 11.6929英寸* 72 = 842 磅 默认边距为...如果你修改了页面尺寸，仅仅影响到下一页，如果你修改了页边距，则影响到全部，故慎用。...PdfWriter.AllowPrinting); 打你试图打开示例代码0110产生的文件时，将要求输入密码（'userpass'），因为添加了AllowPrinting参数,你可以打印该文档而不会发生任何问题
BFC(块级格式化上下文) BFC是个独立的渲染区域，只有块级盒子参与，它规定了内部的盒子如何布局，但不会影响外部盒子 简单的说 它就是一块封闭的区域，里面的盒子在怎么动也不会影响外面的布局。...有外边距margin,有内边距外边框 BFC的特性 1.在BFC中，盒子从顶端开始垂直地一个接一个地排列 2.盒子垂直方向的距离由margin决定，在同一个BFC区域的两个相邻盒子的margin会发生重叠...100px;son2盒子上边距为50px 我们没有设置浮动，那么他们之间的边距应该是100px+50px对吧？...浏览器显示结果并不是这样，他们之间的边距实际上只有100像素，这就是典型的边距重叠，如何解决这种问题？...第一，尽量避免这种情况，像这种情况直接把边距给一个盒子即可 第二，既然这种问题是有BFC引起的，通过BFC的特性我们知道，在同一BFC区域的连个相邻盒子会发生边距重叠，那我们不让这两个盒子在同一个BFC
当标签发生嵌套时，内层标签就成为外层标签的后代。 子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。 子元素选择器 子元素选择器只能选择作为某元素子元素的元素。...嵌套块元素垂直外边距的合并 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并...2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。 3、如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding 不会影响本盒子大小。...但是不会超出内边距的范围。 浮动的元素排列位置，跟上一个元素（块级）有关系。...， 比如 更改用户的鼠标样式， 表单轮廓等。
右边 下边 左边]; 像素值 颜色综合设置 border-color:上边 [右边 下边 左边]; 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%) 边框综合设置 border:四边宽度...四边样式 四边颜色; 表格的细线边框 以前学过的html表格边框很粗，这里只需要CSS一句话就可以美观起来。...auto 就阔以了 */ 插入图片 我们用的最多 比如产品展示类 背景图片我们一般用于小图标背景 或者 超大背景图片 section img { width: 200px;/* 插入图片更改大小...2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。 3、如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding 不会影响本盒子大小。...CSS3盒模型 CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
内联元素表现不一样——它们不会出现在新行上；相反，它们互相之间以及任何相邻（或被包裹）的文本内容位于同一行上，只要在父块级元素的宽度内有空间可以这样做。...如果两个相邻元素都在其上设置外边距，并且两个外边距接触，则两个外边距中的较大者保留，较小的一个消失——外边距折叠 (opens new window)。...这意味着，可以创建不干扰页面上其他元素的位置的隔离的 UI 功能，如弹出信息框和控制菜单，翻转面板，可以在页面上任何地方拖放的 UI 功能等。...同时，元素的位置发生变化，top，bottom，left 和 right 以不同的方式在绝对定位，它们指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的分析。...background: lime; top: 10px; right: 10px; } https://codepen.io/cellinlab/pen/YzeJRbW 可以使用 z-index 属性更改绝对定位元素的堆叠顺序
2、BFC包含浮动元素,浮动会触发新的BFC产生 3、已经确定的BFC区域不会与相邻BFC的浮动元素边距发生重合 针对以上几点我们来具体深究一下BFC的特性到底有何区别，在什么样的场景下会比较触发BFC...从新的结构我们可以知晓，相邻块级元素的BFC会使边距发生合并，以前的内部的BFC是123,现在新的BFC是143,2已经被4包裹独立出来了,在2内部的margin会作用到父级，从而作用到父级相邻的BFC...BFC边距发生重合 当我们把inner-box-2设置为浮动后，边距就不会合并了。...这也证实了相邻BFC与已经设置的浮动元素边距并不会合并，但inner-box-2与inner-box-1始终在一个大的BFC包裹着，而每一个自身元素又形成一个独立的BFC。...，也正是利用边距合并巧妙的解决了保持边距相等的问题。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
