魔术师 - 巴兹尔·霍金斯前言最近在做一个大屏项目，里面包含整页静态背景图，静态效果图，动态图等内容填充，产品出个思路，UI出个静态设计稿，最终做出来的某大屏页效果大概如下，开发完第一版后，测试发现最大的问题是笔记本屏幕上的效果兼容问题...页面结构一个整页的静态背景图，一个头部标题图，中间六边形图，和下面会动的光圈(代码实现的旋转效果)，六边形左右是四个树形图初版实现方式页面的头部很简单，背景图和标题水平居中，两个条件区域使用绝对定位靠左靠右分别处理根据...UI提供的切图，先把六边形图和下面的一个静态背景图和动态光圈位置固定为水平居中，调整上下边距，实现整体在屏幕中的位置相对合适基于六边形图的位置，把左右四个树形图定位上去最后把文字基于图片位置定位写上去就行了遇到的问题...，解决方案位置异常刚开始做完以后在PC屏幕上看着正常，在浏览器 tab 页签下看的效果，由于是大屏项目，使用F11全屏看了一下效果后，发现六边形这部分固定设置的 top 值，在全屏模式下导致整体内容太靠上了由于使用的绝对定位...把中间部分的内容全部放到 div 中，然后设置整个 div 水平垂直居中，这样整体效果不管是电脑屏幕，还是全屏模式看着都在中间位置了内容重叠笔记本上浏览右上角内容重叠了由于中间部分图片都是静态宽高，图片和文字的内容都是根据相对定位进行的处理
因此，在本文中，我将分享关于 CSS 中的间距、实现该间距的不同方法以及何时使用填充或边距的所有信息。 现在，让我们开始吧。 间距类型 CSS 中的间距有两种类型，一种在元素外，另一种在元素内。...具有较大边距的元素获胜。 为避免此类问题，建议根据本文使用单向边距。 更重要的是，CSS Tricks 在 margin-bottom 和 margin-top 之间进行了投票。...负边距 它可以与四个方向的边距一起使用，在某些用例中非常有用。 让我们假设以下内容： 父级有 padding: 1rem，这导致子级从顶部、左侧和右侧偏移。 但是，子元素应该紧贴其父元素的边缘。...内容卡在边缘！ 为了解决这个问题，应该从左右边缘对内容进行填充（哦，看起来填充是一个新词）。...由于文章内容来自 CMS（内容管理系统）或从无法为元素添加类的降价文件自动生成。 考虑以下包含标题、段落和图像的混合示例。
在这种情况下，它似乎可以感觉到在内容上田间的填充和边距，但实际上，是重新计算宽度以确保一切都适合。 通过比较，设置宽度为“100％”时，不管边距、填充和边框的大小是多少，内容区域都将填充可用空间。...很多人喜欢这个属性，如果你正在建立一个网格系统，或任何其他需要水平对齐类型的布局项目，这可以是更直观的工作方式。 边距重叠 当边距意外重叠当时候，真的令人很困惑，因为你不知道发生了什么。...当两个或多个相邻的垂直边距接触时，边距有时会发生重叠，并且不会用填充或边框分隔。如果子元素的边缘扩展到父元素的边缘，并且不会被填充分隔开，那么就会出现边距重叠的现象。...您需要知道的主要事情是当元素没有填充或边框时，垂直边距可能会重叠。 如果你想了解的更详细， CSS Tricks 有一篇很好的 边距重叠释义的文章推荐你看一下。...正是这种行为允许多种文本、标题和其他元素对浮动内容进行流式包裹。但有时这是有问题的。清除浮动和建立一个新的块格式化上下文将使容器清除其浮动的子元素。
另一个与边距折叠相关的例子是子节点和父节点。...请注意，子元素固定在其父元素的顶部。那是因为它的边距折叠了。...由于对父元素 .card__content 进行了填充，因此边框没有粘在边缘上。 ? 是的，你猜对了！负边距是解决办法。...文章内容 我相信这是一个非常非常普遍的用例。由于文章内容来自CMS（内容管理系统），或者是由Markdown文件自动生成的，因此无法为元素添加类。 考虑下面的示例，其中包含标题，段落和图像。...你是否曾经考虑过将边距与具有不同 writing-mode 的元素一起使用时应如何表现？考虑以下示例。 ?
请务必使用正确的HTML标签，就h1-h6表示标题和p表示段落。 字体大小的值是可以绝对或相对的大小。...CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。... 这是一个指定填充边距的段落。...重叠的元素 元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素 z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面） 一个元素可以有正数或负数的堆叠顺序： img {...使用CSS来添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距。
如果加了前缀还不支持的话，那么该浏览器则无法正常显示渐变了。...属性：text-shadow 取值：h-shadow v-shadow blur color; 3、表格 1、表格常用属性 1、边距属性...separate 默认值，即分离边框 2、collapse 边框合并 2、边框边距...2、fixed 固定，固定表格布局，单元格的尺寸是以设定的值为准，不会通过内容而改变布局...3、自动表格布局 VS 固定表格布局 1、自动表格布局 1、单元格的大小会适应内容的大小
固定定位 fixed： 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定 位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。...（脱离文档流） 相对定位 relative： 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直 或水平位置，让这个元素“相对于”它的起点进行移动。...在使用相对定位时，无论是 否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。...important 声明 > 其它 2.3 CSS 盒子模型 CSS 盒模型本质上是一个盒子，它包括：边距，边框，填充和实际内容。...的值不为visible BFC的使用场景 去除边距重叠现象 清除浮动（让父元素的高度包含子浮动元素） 避免某元素被浮动元素覆盖 避免多列布局由于宽度计算四舍五入而自动换行 3.
： 外边距（margin）：是元素与元素之间的距离，或者是元素外面留出的一段空白 内边距（padding）：元素里的内容与元素边框之间的距离 边框（border）：元素本身 内容（content）：元素中放置的东西...) 内边距 内边距(padding)：设置内容与边框之间的距离 外边距 外边距(margin)：设置元素之外的距离 盒子大小计算 box-sizing box-sizing：指定计算盒子宽高的方式，...clear:both进行浮动清除 双伪元素法 双伪元素是after伪元素的升级方法 核心原理:利用CSS3的新特性自动创建before和after两个伪元素，再使用clear:both进行浮动清处...、静态定位 边偏移：top、left、fight、bottom 静态定位(static) 就是无定位，无法使用边便宜来调整盒子的位置。...固定定位 固定定位就是将盒子定位到页面的固定位置 固定定位也是投标，只认浏览器的可视窗口 { position: fixed; } 堆叠 定位会让盒子重叠，后面的盒子会压住前面的盒子 z-index
绝对定位：position:absolute (1) 绝对定位是将元素依据已经定位（绝对、固定或相对定位）的离他最近的祖先元素进行定位，祖先元素没有定位或没有祖先元素则默认依据body浏览器窗口定位。...绝对定位必须用left、right、top、bottom属性之一激活，用于指定元素左、右、上、下外边距距离已定位祖先元素（或浏览器）左、右、上、下内边框的距离。...绝对定位元素定位后相对祖先元素的位置不在变化，若页面内容较多拖动页面滚动时，定位元素会随页面一起滚动。 绝对定位元素重叠覆盖其他元素时可用z-index属性设置他们的叠放次序。 ? 2....固定定位：position:fixed 固定定位与绝对定位absolute相似，定位后元素也生成为新块级盒框、覆盖新位置原有元素，在正常文档流中所占的原空间关闭被后续元素使用。 ?...固定定位与绝对定位absolute的区别是定位的元素无论父元素是否定位都会直接在浏览器窗口中定位，不会随滚动条拖动页面而滚动，固定定位用left、right、top、bottom指定浏览器左、右、上、下各边向中心的偏移量作为定位元素外边距位置
10px;} 但是当你将负边距设置为相对bottom/right时，它并不会把元素向下或右拉，相反，它会把后面的元素往里面拉，从而覆盖自己。...比如有一列宽度100%，另一列有固定的宽度，比如说100px。...如果负边距和宽度一样大的话，它就会被完全覆盖掉。因为外边距，内边距，边框和内容加起来等于元素的宽度。如果负外边距等于元素的宽度的话，那么该元素的宽度就会变成0px。...使用负边距会比使用相对定位好很多，因为你只需要给新的一列的第一个元素添加负边距即可。酷吧，哈哈哈 重叠来强调 ? 故意重叠元素也是一种很好地设计隐喻。重叠效果可以增强深度感从而为突出特定元素。...就不需要浪费很多贷款来加载大的图片来实现这个效果啦 简单的两列布局 负边距也是在流式布局中创建简单一列宽度固定，一列内容为宽度的100%的两列布局的好方法。
相关概念 内容区（content） 用于显示文本和图像 内边距（padding） 内容区至边框的边距 边框（border） 内容区的边界 外边距（margin） 两个元素的边距之间的距离...内边距 内边距不能设置颜色 颜色与元素的背景颜色保持一致....使用margin即可. div{ margin:0 auto; } 固定写法,其中0表示上下 auto表示左右....盒子模型的类型 块级元素 可以设置宽高 内联元素 水平方向的内边距有效的 - 控制文本内容在水平方向的位置 垂直方向的内边距有效的 - 文本内容的位置没有变化，内边距向上和向下进行扩展 垂直方向的外边距无效的...该模型设置元素在HTML页面中所占区域为盒子的大小+外边距。. ? 外边距常见的问题 外边距重叠 外边距重叠的问题只出现在上外边距和下外边距中 左外边距和右外边距之间不存在外边距重叠 ?
结论：要实现以上效果，标准流或浮动都无法快速实现 pink老师一句话说出定位： 将盒子定在某一个位置 自由的漂浮在其他盒子(包括标准流和浮动)的上面 所以，我们脑海应该有三种布局机制的上下顺序...父元素要有定位 将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。 ?...哈根达斯分析 一个大的 div 中包含 3 张图片； 大的 div 水平居中； 2 张小图片重叠在广告图片上方 —— 脱标，不占位置，需要使用绝对定位； 2 张小图片分别显示在左上角和右下角 —— 需要使用边偏移确定准确位置...案例小结： 子绝父相 —— 子元素使用绝对定位，父元素使用相对定位； 与浮动的对比： 绝对定位：脱标，利用边偏移指定准确位置； 浮动：脱标，不能指定准确位置，让多个块级元素在一行显示。...案例小结： 固定定位的应用场景：固定在浏览器可视窗口某个位置的布局； 在使用固定和绝对定位时，如果盒子中没有内容，需要指定宽度（稍后就讲）。
(dom).width/height 取得最终渲染后的宽高 dom.getBoundClientRect().width/height 取得最终渲染后的宽高，还可以取得相对于视窗的上下左右的距离 # 边距重叠...只有普通文档流中的垂直外边距才会发生折叠，行内元素、浮动元素或绝对定位之间的外边距不会发生折叠。...# 使用 BFC 解决边距重叠问题 块格式化上下文（Block Formatting Context，BFC） (opens new window) 是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域...BFC 决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当设计到可视化布局的时候，BFC 提供了一个环境，HTML 元素在这个环境中按照一定的规则进行布局。...# BFC 渲染规则 BFC 元素垂直方向的边距会发生重叠，属于不同 BFC 外边距不会发生重叠 BFC 的区域不会与浮动元素的布局重叠 BFC元素是一个独立的容器，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素
在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。...父级有定位 绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。 子绝父相 这个“子绝父相”太重要了，是我们学习定位的口诀，时时刻刻记住的。...首先， 绝对定位是将元素依据最近的已经定位绝对、固定或相对定位）的父元素（祖先）进行定位。...四种定位总结 定位模式 是否脱标占有位置 是否可以使用边偏移 移动位置基准 静态static 不脱标，正常模式 不可以 正常模式 相对定位relative 不脱标，占有位置 可以 相对自身位置移动（自恋型...块级元素添加绝对定位后固定定位后，如果不给宽高，默认是内容的大小**
目录 一、css的介绍 CSS引入 CSS选择器 CSS选择器-浮动 布局-盒子 布局-相对定位 布局-固定定位和重叠 布局-CSS练习 最近视频看的差不多了，就是一直没总结，这几天在上班之余，偷偷地总结吧...边框用于将边缘和其他框分开 margin:外边距，表示框的边缘与相邻框之间的距离，也称为页边空白 padding:内边距，表示框内容和边框之间的空间 一 边框的三种定义： 然后就是内边距 和外边距...会相对于游览器进行定位。 一般父元素，要开启相对定位，若父元素开启定位，会相对于父元素进行定位 通常都是配合left，right，botton,top使用。...只需要使用两个就可以对一个元素进行定位，一个水平，一个竖直。...固定定位 position:fixed 相对于浏览器窗口进行定位 固定定位的元素，将脱离文档流，不占用空间 当页面滚动时，元素始终出现在浏览器的固定位置上 <title
与上一种方法相比，本种方法是通过定位来实现侧栏的位置固定。 如果中间栏含有最小宽度限制，或是含有宽度的内部元素，则浏览器窗口小到一定程度，主面板与侧栏会发生重叠。...通过负边距将浮动的侧栏拉上来，左侧栏的负边距为100%，刚好是窗口的宽度，因此会从主面板下面的左边跑到与主面板对齐的左边，右侧栏此时浮动在主面板下面的左边，设置负边距为负的自身宽度刚好浮动到主面板对齐的右边...由于侧栏的负margin都是相对主面板的，两个侧栏并不会像我们理想中的停靠在左右两边，而是跟着缩小的主面板一起向中间靠拢。此时使用相对布局，调整两个侧栏到相应的位置。...主面板部分优先渲染（一般主面板会比侧栏内容重要）。 当面板的main内容部分比两边的子面板宽度小的时候，布局就会乱掉。可以通过设置main的min-width属性或使用双飞翼布局避免问题。...设置 负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。 设置main的margin值给左右两个子面板留出空间。
； ：定义独立的内容； ：定义页面主区域之外的内容，比如侧边栏； ：定义元素的标题，一般被放置在元素内的第一个或最后一个位置处...9、请写出多种等高布局 假等高布局：使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假象 给容器div使用单独的背景色（固定布局、流体布局）：用元素中的最大高度撑大其他的容器高度...javascript控制DOM去改变样式的时候，只能使用link方式，因为@import只有CSS才能识别，DOM无法控制； 12、position的absolute与fixed共同点与不同点？...外部样式表，使用 标签引入一个外部CSS样式 内部样式表，将CSS代码放在 标签内部 内联样式，将CSS样式直接定义在HTML元素内部 24、什么是外边距重叠？...重叠的结果是什么？ 外边距重叠就是margin-collapse； 在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。
定宽布局：给内容区域设置固定的像素宽度，把页面限制在这个宽度以内； 在需要精确控制图片这类宽度大小不会变动的元素时，该方法特别有效。...弹性设计 基于固定布局与变宽布局的优缺点，延伸出“弹性设计”。在宽度、内边距、外边距以及其他的度量单位都使用了em而非px,那么这些元素能够随字体大小的变化而相应改变。...（3）为元素应用内边距或边框来避免外边距重叠。 有时候元素之间留出了一条并不希望看到的缝隙，而另一些时候却无法让元素之间保持一段距离。...若效果是由外边距实现的话，那么罪魁祸首十有八九是外边距重叠现象。...（4）避免同时为元素指定明确的内边距/边框值与宽度/高度值 （5）不要依靠min-width或min-height属性 （6）尝试减少百分比值 （7）牢记“LoVe/HAte”（爱/恨）链接规则
什么是外边距重叠？重叠的结果是什么？ 外边距重叠就是margin-collapse。 在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。...既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。 在这一方面，无法做每一个复位重置。...什么是外边距重叠？重叠的结果是什么？ 答案： 外边距重叠就是margin-collapse。 ...父元素设置特定的宽高上的边框、内边距、内容填充 58、描述一个"reset"的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？ ...既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。 在这一方面，无法做每一个复位重置。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
