定义 边距包括外边距(Margin)属性和内边距(Padding)属性，外边距属性定义了元素间的间隔，内边距属性定义了元素边框与内容区域之间的空白区域。 外边距（margin）表示从一个元素的边到相邻元素(或者文档边界)之间的距离，而内边距（padding）则定义了元素内部从边到内容的间隔。 列表 元素 描述 margin margin规定元素中四个方向的外边距属性。 margin-bottom 设置元素的下外边距。 margin-left 设置元素的左外边距。 margin-right 设置元素的右外边距。 margin-top 设置元素的上外边距。 padding padding规定元素的内边距，该属性不可为负值，其简写形式可一次性设置四个边的内边距。 padding-bottom 设置元素的下内边距。 padding-left 设置元素的左内边距。 padding-right 设置元素的右内边距。 padding-top 设置元素的上内边距。
一、边距重叠常见情况 1、垂直方向上相邻元素的重叠 （水平方向上不会发生重叠） ? 2、 垂直方向上父子元素间的重叠 ? relative 以外的值（例如 absolute、fixed） （4）设置 display 属性，可以是 flex、inline-block、table-cell... 3、BFC 的使用场景 （1）解决元素间的边距重叠问题 overflow: hidden; } div { width: 100px; height: 100px; background: #7b81ca; margin: 30px; } （2）解决浮动重叠问题
一键领取预热专享618元代金券，2核2G云服务器爆品秒杀低至18元！云产品首单低0.8折起，企业用户购买域名1元起…
点击上方“前端自习课”关注，学习起来~ 一、概念 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content 2.4 实例题（根据盒模型解释边距重叠） 例：父元素里面嵌套了一个子元素，已知子元素的高度是 100px，子元素与父元素的上边距是 10px，计算父元素的实际高度。 ? 2.5 BFC（边距重叠解决方案） 2.5.1 BFC基本概念 BFC: 块级格式化上下文 BFC基本概念：BFC 是 CSS 布局的一个概念，是一块独立的渲染区域，是一个环境，里面的元素不会影响到外部的元素 父子元素和兄弟元素边距重叠，重叠原则取最大值。空元素的边距重叠是取 margin 与 padding 的最大值。 Box 的 margin 会发生重叠； （3）每个元素的 margin Box 的左边， 与包含块 border Box 的左边相接触，（对于从左到右的格式化，否则相反）。
定义 外边距折叠是指有时候上边距与下边距坍缩成较大的那一个边距的行为。它只会发生在同一BFC的块级元素间，并且永远不会发生在浮动元素或绝对定位元素间。 可能的情况 毗邻的兄弟元素 相邻的兄弟元素垂直边距会发生折叠，但最后一个元素需要清除浮动时例外。 父元素和第一个/最后一个子元素 父元素与第一个子元素的margin-top可能重合，与最后一个子元素的margin-bottom可能重合。 如果要在这种情况下避免外边距折叠，请将两者的margin区分开。区分margin-top的方法有设置border、padding、inline content、清除浮动、避免创建BFC区域。 ">上面的间隙是10px
#da input {} .shu .coding {} 行高可以让一行文本在盒子中垂直居中对齐,文字的行高等于盒子的高度,行高-上距离-内容高度-下距离. css三大特性是层叠,继承,优先级. } css层叠样式表 css的优先级 使用! 在css中的样式继承权重值是为0的,不管父元素权重多大,被子元素继承时,它的权重都是为0,意思是子元素定义的样式会覆盖继承的样式,行内样式优先.在css中,如果权重相同,css就会遵循就近原则,则是靠近元素最近的样式为最大优先级 优先级 // CSS特殊性（Specificity） 权重是优先级的算法，层叠是优先级的表现 css背景 背景图片(image) 背景平铺（repeat） 背景位置(position) // 背景图片 :上外边距 margin-right:右外边距 margin-bottom:下外边距 margin-left:上外边距 margin:上外边距 右外边距 下外边距 左外边 文字水平居中是 text-align
CSS 外边距合并问题 在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。 折叠的结果 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。 两个外边距一正一负时，折叠结果是两者的相加的和。 2. 浮动元素不与任何元素的外边距产生折叠（包括其父元素和子元素） 绝对定位元素不与任何元素的外边距产生折叠 inline-block元素不与任何元素的外边距产生折叠 一个常规文档流元素的margin-bottom 如何解决 使用BFC解决margin合并问题可以参考这篇文章：CSS中重要的BFC 3.1 自身margin合并的情况 加个padding或者border-top/border-bottom 3.2 外边距合并的问题 深入理解css中的margin属性 深入理解BFC和Margin Collapse
CSS概述 CSS是层叠样式表（Cascading Style Sheets）用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。 边框(border)—这个元素内容的封闭图形的边界 内补丁(Paddings)：内边距—自己这个元素边界距离自己内容文字的距离 外补丁(Margins)：外边距—自己这个元素的边界距离另一个元素的边界 （边框）的距离 ☆CSS布局——漂浮 ◇ float : none | left | right none : 默认值。 ，则这个对象移动，给那个漂浮过来的对象让出一行位置，让他们不会重叠） ☆CSS布局——定位 ◇ position : static | absolute | fixed | relative static 如果某个对象用了相对定位，也相当于这个对象漂浮在另一个层面（重叠），但是原来层面上自己占的位置不会被其他模块覆盖。
内外边距的值可以说任意的长度单位，但是当使用百分比时，有一点需要记住，四个方位的内、外边距都是基于包含块的宽度来计算的 。 划重点，这个点时很常见的面试点哟。 所谓外边距折叠，即垂直方向上的两个外边距相遇时，会折叠成一个外边距，折叠后外边距的高度等于两者中较大的那个高度。 外边距的折叠有以下几种情况（很重要！）。 甚至同一个元素的外边距也会折叠，如果存在一个空元素，只有外边距没有边框和内边距，此时自身的上下边距接触，发生折叠。 折叠后的外边距又接触其他元素的外边距，还会继续折叠。 而有了外边距折叠就不会这样了。所以外边距折叠是为了排版而生的。 最后，外边距折叠只会发生在常规文档流中块级盒子的垂直方向上。行内盒子、浮动盒子或绝对定位盒子的外边距都不会折叠。 3.2.3 格式化上下文 CSS 中有一个很重要的概念，叫做格式化上下文(formatting context)。其中行级格式化上下文前面略有提及，如垂直外边距对于行内盒子无效。
CSS(三) 發佈於 2018-06-28 本篇将讲解盒模型以及外边距折叠的相关知识。 “CSS 盒模型”是一组规则，用于定义如何呈现 Internet 上的每个网页。 本章介绍了 CSS 框模型的核心组件: 填充，边框，边距，Block boxes 和 Inline boxes。可以将此视为 CSS 布局的”微观”视图，因为它定义了框的个别行为。 strong { margin: 50px; } 如果我们将边距更改为填充，它会显示背景。但是，它不会影响周围盒子的垂直布局。 垂直边距折叠 盒子模型的另一个怪癖是”垂直边距折叠”。 当你有两个垂直边距彼此相邻的盒子时，它们会折叠。不是将边距加到一起，而是仅显示最大的边距。 垂直外边距折叠最可能发生的两种简单情况: 两个紧邻的兄弟元素的外边距发生折叠 父子元素的外边距发生折叠 首子元素与父元素的上外边距发生折叠 尾子元素与父元素的下外边距发生折叠 预防边距折叠 有时我们确实希望防止边距折叠
在这种情况下，它似乎可以感觉到在内容上田间的填充和边距，但实际上，是重新计算宽度以确保一切都适合。 通过比较，设置宽度为“100％”时，不管边距、填充和边框的大小是多少，内容区域都将填充可用空间。 边距重叠 当边距意外重叠当时候，真的令人很困惑，因为你不知道发生了什么。当两个或多个相邻的垂直边距接触时，边距有时会发生重叠，并且不会用填充或边框分隔。 如果子元素的边缘扩展到父元素的边缘，并且不会被填充分隔开，那么就会出现边距重叠的现象。 如果元素采用的是绝对定位、浮动定位或者有一个不一样的 格式化上下文时，边距不会发生重叠现象，以及在其他一些不太可能的情况下。 如果你感到困惑，没关系。边距不会发生重叠的规则是复杂的。 您需要知道的主要事情是当元素没有填充或边框时，垂直边距可能会重叠。 如果你想了解的更详细， CSS Tricks 有一篇很好的 边距重叠释义的文章推荐你看一下。
此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。 解决方法: 使用link标签将样式表放在文档head中 什么是外边距重叠？ 重叠的结果是什么？ 什么是外边距重叠 外边距重叠： margin-collapse 垂直相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。 这种合并外边距的方式被称为折叠，结合而成的外边距称为折叠外边距。更详细介绍可移步至：CSS 框模型( Box module ) 折叠后margin的计算 1. 示意图： image.png 外边距重叠的意义 外边距的重叠只产生在普通流文档的垂直外边距之间，避免块级元素之间产生双倍边距的问题。 外边距重叠解决方案 1. 譬如外边距（margin）的重叠，浮动清除，触发ie的haslayout属性等。
正因为此，从那以后CSS布局成为了优雅代码的代名词。 对于所有设计师使用过的CSS概念，负边距作为最少讨论到的定位方式要记上一功。这就像是在线纹身-每个人都会做，但是没有人会谈论它。 Dreamweaver不理解它 负边距不会在DW的设计窗口展示出效果。那你为什么还用DW的设计窗口查看效果呢？ 与其共事 负边距如果可以正确的使用的话它的功能是很强大的。有两种场景负边距是很重要的。 使用负边距会比使用相对定位好很多，因为你只需要给新的一列的第一个元素添加负边距即可。酷吧，哈哈哈 重叠来强调 ? 故意重叠元素也是一种很好地设计隐喻。重叠效果可以增强深度感从而为突出特定元素。 一个很好地例子就像上图一样，通过重叠来吸引注意力。只需要使用z-index属性和一点小创意你就可以做到。 惊艳的3D文本效果 ? 这是一个精致的技巧。 然后通过负边距来把其中一个叠加到另一个上面，保持1到2像素的偏移。这样你就可以二道可选的，机器友好的倾斜字体。
盒模型是CSS的基石之一，页面的每一个元素都被看作一个矩形框，分别由外边距，边框，内边距，内容组成， ? 在CSS中，width和height的值指的是内容的宽高，增加外边距，边框，内边距并不会对内容造成影响，但是会增加整体的元素框的尺寸，假设10元素的外边距，5元素的内边距，那么要使框达到100元素，就需要给定 外边距叠加： 当一个元素出现在另一个元素的上面时，第一个元素的底边框会和第二个元素的顶边框发生重合（取两者的较大者）。 ? 当元素为空时，他本身的上下边距也会发生重合。 ? 诸如，以一个典型的几个段落组成的文章为例，如果没有叠加，那么段落之间的边距就会是段落的顶外边距的两倍，但叠加之后，就会有着一样的高度，如图： ?
cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat; } } 5、什么是外边距重叠 重叠的结果是什么？ 外边距重叠就是margin-collapse。 在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。 这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。 折叠结果遵循下列计算规则： 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。 两个外边距一正一负时，折叠结果是两者的相加的和。 ? 示例 6.rgba()和opacity的透明效果有什么不同？ 8、CSS 选择符有哪些？哪些属性可以继承？ CSS3新增伪类有那些？
CSS基础知识 css，英文 Cascading Style Sheets，中文名：级联样式表。层叠样式表。 css是一种表现语言，是对网页语言的补充。 背景 css背景属性如下： 属性 说明 background-color 定义背景颜色 background-image 定义背景图片 background-repeat 定义背景图片是否重复以及其重复方式 css内边距属性，元素的内边距在边框和内容之间。 css内边距的属性： 属性 说明 padding-top 元素的上内边距 padding-right 元素的右内边距 padding-bottom 元素的下内边距 padding-left 元素的左内边距 元素的左外边距 z-index 元素的堆叠顺序 z-index用于设置目标对象的定位层序，数值越大，所在层级越高。
云直播（CSS）为您提供极速、稳定、专业的直播云端处理服务，根据业务的不同直播场景需求，云直播提供了标准直播、慢直播、快直播三种服务，分别针对大规模实时观看、高并发推流录制、超低延时直播场景，配合移动直播 SDK，为您提供一站式的音视频直播解决方案。
扫码关注云+社区
领取腾讯云代金券
云服务器
测试服务 WeTest
文件存储
SSL 证书
WordPress