文章目录 一、元素默认的外边距 1、body 标签的默认外边距 2、p 标签的默认外边距 二、清除元素默认的内外边距 1、清除方式 2、代码示例 三、行内元素边距设置 一、元素默认的外边距 ---..., 选中 body 标签 , 在 上图 右侧 红色矩形框 中 , 可以看到 body 标签 默认设置了 8 像素的外边距 , 对应的调试模式中 橙色的 部分 ; body { display...padding: 0; margin: 0; } 样式 ; 查看 p 标签样式 , 其 上下边距 也消失了 ; 三、行内元素边距设置 ---- 为 行内元素 设置 上下边距 是无效的 , 建议只为...行内元素 设置 左右边距 ; 如果为 行内元素 设置了上下边距 , 可以在某些浏览器或者 web 应用场景出现适配问题 ; 反面代码示例 : <!...四个方向的边距 , 仅左右边距生效 */ margin: 50px; } 行内元素
触发这个bug的条件是： 在一个非浮动元素上应用overflow，且其值不为visible（这将形成一个Block Formatting Context元素）。...这个BFC元素没有指定宽度值（或者指定width:auto） 当满足触发条件时，该BFC元素的另一侧的边距将不再受css控制（在webkit核心浏览器下），而是由你所指定的与浮动元素相同的边距决定，即使你在...css中明确指定另一侧的边距为0或任意值也没用。...具体来说，可以分为两种情况： 当BFC与浮动方向相同的边距小于或等于浮动元素占据的总宽度（width+margin+padding+border）时，BFC另一侧的边距等于所设定方向上的边距（下图前两种情况...）； 当BFC与浮动方向相同的边距大于浮动元素占据的总宽度时，BFC另一侧的边距等于浮动元素占据的总宽度（下图第三种情况）。
一、边距重叠常见情况 1、垂直方向上相邻元素的重叠 （水平方向上不会发生重叠） ? 2、 垂直方向上父子元素间的重叠 ?...二、BFC 1、什么是 BFC BFC（Block Formatting Context），即块级格式化上下文，创建了 BFC 的元素是一个独立的容器，里面无论如何布局都不会影响到外面的元素 2、创建...table-cell... 3、BFC 的使用场景 （1）解决元素间的边距重叠问题 -- 分别添加创建了 BFC 的父元素 ?...div { width: 100px; height: 100px; background: #7b81ca; margin: 30px; } （2）解决浮动重叠问题 -- 为非浮动的元素创建...: 200px; height: 100px; background: rgba(123, 129, 202, 0.8); overflow: hidden; } （3）清除浮动，解决浮动元素的父元素高度塌陷问题
因此，在本文中，我将分享关于 CSS 中的间距、实现该间距的不同方法以及何时使用填充或边距的所有信息。 现在，让我们开始吧。 间距类型 CSS 中的间距有两种类型，一种在元素外，另一种在元素内。...在上面的模型中，一个元素具有底部边缘，而另一个元素具有顶部边缘。 具有较大边距的元素获胜。 为避免此类问题，建议根据本文使用单向边距。...此外，你不需要关心网格项目的宽度或底部边距。 CSS Grid 为你做一切！...处理底边距 假设以下组件堆叠。 每个组件都有一个底部边距。 请注意，最后一个元素有边距。 这是不正确的，因为边距应该只在元素之间。...更好的解决方案是通过向父元素添加负边距来取消不需要的间距。 .wrapper { margin-bottom: -16px; } 这就是发生的事情， 它将元素推到底部，其值等于底部间距。
边距塌陷(Collapsing margins) 在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以合并形成一个边距，称为边距塌陷。...不会发生边距坍塌的情况 根节点元素 水平边距(Horizontal margins)不会崩溃 「如果具有间隙的元素的顶部和底部相邻，他会与后续同级的元素边距一起坍塌，但是不会与父元素底部的一起坍塌（If...盒子的上边距和第一个流入子元素的上边距 盒子的下边距和同级后一个流入元素的上边距 如果父元素高度为“auto”，最后一个流入子元素的底部距和其父元素的底部距 某个元素没有建立新的 BFC，并且 min-height...「如果'min-height'属性为零，并且框没有顶部或底部边框，也没有顶部或底部填充，并且框的'height'为0或'auto'，并且框不包含边距，则框自身的边距会折叠 行框，其所有流入子页边距（如果有的话...2.当边距全为负数的时候，取最小值。 3.在存在负边距的情况下，从正边距的最大值中减去负边距的绝对值的最大值。
此外，CSS Tricks还在页边距底部和页边距顶部之间进行了投票。61%的开发者更喜欢 margin-bottom 而不是 margin-top。...所以，它将把 .wrapper 元素推到左边，取消那个不需要的空间。 另一个类似的概念是在两边都添加填充，然后边距为负。这是Facebook故事的一个示例： ?...此外，你不需要关心网格项的宽度或底部空白，CSS Grid 为你做者一切！...处理底部margin 假设以下组件堆叠在一起，每个组件都有底边距。 ? 注意最后一个元素有一个空白，这是不正确的，因为边距只能在元素之间。...更好的解决方案是通过向父元素添加负边距来取消不需要的间距。 .wrapper { margin-bottom: -16px; } 它用一个等于底部间距的值将元素推到底部。
blue-text"，即可获得该CSS类的样式属性。...记住在HTML中加入类，是不需要.这个符号在最前面的。...一个元素的padding，控制一个元素内容四边的空间，还有内容与border边框的距离； 在预览区中的蓝色与红色盒子被包裹在一个黄色盒子之中，我们应该注意到，红色盒子的padding比蓝色盒子的边距要宽...通过这个图，我们就能清晰理解这些边距的实际产生的距离的效果。...5% 的边距 */ margin: 10px; /* 所有的边都是 10像素 的边距 */ margin: 1.6em 20px; /* 上和下边是 1.6
*/ 1.4 盒子模型 元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。...*/ padding：20px 40px 50px 30px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ padding：20px 40px 50px; /...* 设置上下内边距为20px，左右内边距为40px*/ padding：20px 40px; /* 设置四边内边距为20px */ padding：20px; 设置外间距 margin-top：20px...*/ margin：20px 40px 50px 30px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ margin：20px 40px 50px; /*...设置上下内边距为20px，左右内边距为40px*/ margin：20px 40px; /* 设置四边内边距为20px */ margin：20px; 设置垂直居中 margin: auto; position
我们知道，当内容足够多可以撑开底部到达浏览器的底部，如果内容不够多，不足以撑开元素到达浏览器的底部时，下面要讲的布局就是解决如何使元素粘住浏览器底部。...方法一：全局增加一个负值下边距等于底部高度 有一个全局的元素包含除了底部之外的所有内容。它有一个负值下边距等于底部的高度。....push等于底部的高度，来防止内容覆盖到底部的元素。...这个push元素是智能的，它并没有占用到底部的利用，而是通过全局加了一个负边距来填充。...方法二：底部元素增加负值上边距 虽然这个代码减少了一个.push的元素，但还是需要增加多一层的元素包裹内容，并给他一个内边距使其等于底部的高度，防止内容覆盖到底部的内容。
我们知道当内容足够多可以撑开底部到达浏览器的底部，如果内容不够多，不足以撑开元素到达浏览器的底部。下面要讲的布局就是解决如何使元素贴住浏览器底部。...方法一：全局增加一个负值的下边距等于底部高度 有一个全局的元素包含除了底部之外的所有内容。...这个push元素是智能的，它并没有占用到底部的利用，而是通过全局加了一个负边距来填充。 效果如下： ?...方法二：底部元素增加负值的上边距 虽然这个代码减少了一个.push的元素，但还是需要增加一层的元素包裹内容，并给他一个内边距使其等于底部的高度，防止内容覆盖到底部的内容。...toString()在把数组转换成字符串时，首先要将数组的每个元素都转换成字符串（通过调用这些元素的toString方法）。
尤其对尺寸固定的移动界面有帮助，但对响应式web设计也有帮助。 与一般的设计指南相比，此文更适合一边设计一边阅读。 代码>原型 设计软件和原型工具让你创造界面看起来最好的样子。...Box模型 Box模型是一种描述物体尺寸和空间的形式，其包含四种信息：边框、外边距、内边距和元素本身的尺寸。 边框 元素边边缘轮廓线的粗细。大部分的设计工具不允许其影响整体的空间和尺寸。...内边距 元素与其包含的子元素之间的空间。 外边距 元素边界与其相邻物体之间的空间。 什么是pt pt（point的缩写）是一种与屏幕分辨率相关的空间度量单位。...在“3×（3倍）”分辨率下，1pt=9px，如此类推。 1倍分辨率（@1×） 请注意，这里的所有东西都是以1倍分辨率设计的。因为其它倍数的分辨率可以很容易地从1倍分辨率计算获得。...使用基线确定文字底部是提高纵向统一性的好方法。通过排布每行文本的基线，可以很容易地让所有的界面元素处于和谐的纵向节奏中。 我喜欢将我的8pt界面栅格和4pt基线栅格合并使用。
p { margin-bottom: 50px; } margin 和 padding 有一样的速记形式。 边距和填充可以在很多情况下完成同样的事情，因此很难确定哪一个是”正确的”选择。...您选择其中一个的最常见原因是: 填充具有背景，而边距始终是透明的 填充包含在元素的单击区域中，而边距则不包括在内 边距会发生垂直折叠，而填充则不会 块级元素和内联元素之间最明显的对比之一是它们对边距的处理...Inline box 完全忽略元素的顶部和底部边距。 水平边距显示会像我们期望的那样，而元素周围的垂直空间没有变化。...垂直外边距折叠最可能发生的两种简单情况: 两个紧邻的兄弟元素的外边距发生折叠 父子元素的外边距发生折叠 首子元素与父元素的上外边距发生折叠 尾子元素与父元素的下外边距发生折叠 预防边距折叠 有时我们确实希望防止边距折叠...做法就是在它们之间放置另一个不可见的元素。 一定要记住，填充不会折叠。
利用多投影重叠的原理，实现曲线阴影与翘边阴影的效果，花一个小时看完的课程，理解的似懂非懂。直接发一下老师写的成品吧。用到来取。css都补上了注释。...*/padding: 0;/* 定义内边距为0 */clear: both;/* 在左右两侧均不允许浮动元素。...*//* left在左侧不允许浮动元素。right在右侧不允许浮动元素。both在左右两侧均不允许浮动元素。none默认值。允许浮动元素出现在两侧。...inherit规定应该从父元素继承 clear 属性的值。...*/margin:20px 10px;/* 定位 边距 上下右左*/padding: 0;/* 内边距 */width: 300px;/* 宽 */height: 220px;/* 高 */border
image.png 仅块元素 margin 重叠 在CSS2中，只指定垂直方向的 margin 重叠，即元素的顶部和底部 margin。因此，上面的左右边距不会重叠。...BFC 可以阻止边距的重叠。...将overflow属性的值设为auto也会产生同样的效果，因为这也创建了一个新的BFC，尽管它也可能创建一些在某些场景中不需要的滚动条。...最简单的方法是只在元素的顶部或底部定义 margin。这样，就很少会遇到 margin 重叠的问题，因为有margin的边总是与没有margin的边相邻。...因此，当我们讨论垂直边距时，我们实际上是在讨论块维度的边距。如果我们在水平写作模式下，这些 margin 将是顶部和底部，但在垂直写作模式下，这些 margin 将是右侧和左侧。
除了下面提到的情况之外，如果有两个元素在正常流中依次显示，那么第一个元素的底部 margin 将与下面元素的顶部 margin 一起重叠。 在下面示例中，有三个div元素。...image.png 仅块元素 margin 重叠 在CSS2中，只指定垂直方向的 margin 重叠，即元素的顶部和底部 margin。因此，上面的左右边距不会重叠。...BFC 可以阻止边距的重叠。...将overflow属性的值设为auto也会产生同样的效果，因为这也创建了一个新的BFC，尽管它也可能创建一些在某些场景中不需要的滚动条。...因此，当我们讨论垂直边距时，我们实际上是在讨论块维度的边距。如果我们在水平写作模式下，这些 margin 将是顶部和底部，但在垂直写作模式下，这些 margin 将是右侧和左侧。
盒子模型的介绍所谓的盒子模型就是把HTML页面的元素看作一个矩形盒子，矩形盒子是由内容(content)、内边距(padding)、边框(border)、外边距(margin)四部分组成。...四个边如果设置一样，可以将四个边的设置合并成一句：border:10px solid red;设置内间距padding设置盒子四边的内间距，可设置如下：padding-top：20px; /*...*/padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px...*/ padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ padding：20px; /* 设置四边内边距为20px */设置外间距margin外边距的设置方法和...margin：外边距盒子的真实尺寸只会受到宽度、高度、边框、内边距四个属性的影响，不会受到外边距属性的影响。
CSS盒子模型就是在CSS技术中所使用的一种思维模型。CSS假定所有的HTML文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。...那此时盒子的实际宽度又是多少呢？ 盒子的实际宽度=盒子左右两边边框的宽度(3px*2)+左右两边的内边距(50px*2)+盒子内容的宽度(200px)=306px。...最终元素的总宽度计算公式是这样的： 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 元素的总高度最终计算公式是这样的： 总元素的高度=高度+顶部填充+底部填充+上边框+下边框...padding-top：设置元素的顶部填充 padding-bottom：设置元素的底部填充 padding-left：设置元素的左部填充 padding-right：设置元素的右部填充 Padding...所有的4个边距都是25px Border属性 边框样式(border-style 值) ?
内部的子元素使用绝对定位任意摆放 */ position: relative; 盒子浏览器水平居中设置 : 将该父容器设置为水平居中 , 将其 margin 的左右外边距设置为 auto...即可 ; /* 上下设置 100 像素边距 左右水平居中 */ margin: 100px auto; 设置圆角 : 该 Banner 轮播条四个角都是圆角 ; /* 设置圆角 *...垂直居中 ; 首先 , 走到父容器高度的一半 ; 然后 , 向上走自己高度的一半 ; /* 使用绝对定位 在 相对定位的父容器中任意放置元素 */ position: absolute;...代码重构 */ .left, .right { /* 使用绝对定位 在 相对定位的父容器中任意放置元素 */ position: absolute; /* 垂直居中 */..., 向左走自己宽度的一半 ; /* 在 相对定位 父容器中 使用 绝对定位 任意摆放 */ position: absolute; /* 设置底部小圆点容器居中 */ /* 首先
7.2、边偏移 简单说， 我们定位的盒子，是通过边偏移来移动位置的。 在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）。...边偏移属性 示例 描述 top top: 80px 顶端偏移量，定义元素相对于其父元素上边线的距离。 bottom bottom: 80px 底部偏移量，定义元素相对于其父元素下边线的距离。...7.3.2、相对定位(relative) 相对定位是元素相对于它原来在标准流中的位置来说的。他有两个特点： 相对定位是相对于自己原来在标准流中位置来移动的。...浏览器可视窗口 + 边偏移属性 来设置元素的位置； 跟父元素没有任何关系；单独使用的 不随滚动条滚动。...固定定位fixed 完全脱标，不占有位置 相对于浏览器移动位置 能 单独使用，不需要父级 边偏移需要和定位模式联合使用，单独使用无效； top 和 bottom 不要同时使用； left 和 right
RecyclerView 大小相同 , 这里要注意 , 每一次绘制时 , 都要先获取要绘制的 item 组件对应的坐标 ; 这里的用法与 getItemOffsets 完全不同 , 设置每个元素的边距偏移时..., 可以获取当前的序号 , 并针对不同的序号代表的 item 条目进行不同的边距设置 ; Canvas 中绘图的坐标系的 ( 0, 0 ) 位置是 RecyclerView 的左上角位置 ; 使用 Canvas...针对不同的位置设置不同的边距 // 每排最左侧和最右侧的左右边距设置成 20 像素, 其余 4 个边距一律设置成 5 if (currentPosition % 4 ==...; outRect.right = 40; outRect.bottom = 20; }else{ // 普通元素的边距都是...: 正常的 item 边距设置都是 20 像素 , 每行最左侧距离左边 40 像素 , 每行最右侧边距距离右侧 40 像素 ; ① item 底部背景 : 使用 onDraw 方法绘制 , 给每行的第一个元素绘制一个底部背景
领取专属 10元无门槛券
手把手带您无忧上云
