您选择其中一个的最常见原因是: 填充具有背景,而边距始终是透明的 填充包含在元素的单击区域中,而边距则不包括在内 边距会发生垂直折叠,而填充则不会 块级元素和内联元素之间最明显的对比之一是它们对边距的处理...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元无门槛券
手把手带您无忧上云