它们使得在不同的书写模式下，元素的布局和间距能够自动调整，而不需要手动设置每种方向的样式。 1、逻辑属性 逻辑属性是相对于元素的书写模式的属性。...常见的逻辑属性包括： margin-inline-start 和 margin-inline-end：表示元素的内联起始边距和内联结束边距。 ...padding-inline-start 和 padding-inline-end：表示元素的内联起始内边距和内联结束内边距。 ...margin-block-start 和 margin-block-end：表示元素的块级起始边距和块级结束边距。 ...1、逻辑外边距 逻辑外边距属性包括： margin-inline-start：设置内联起始边距。 margin-inline-end：设置内联结束边距。
因此，在本文中，我将分享关于 CSS 中的间距、实现该间距的不同方法以及何时使用填充或边距的所有信息。 现在，让我们开始吧。 间距类型 CSS 中的间距有两种类型，一种在元素外，另一种在元素内。...在上面的模型中，一个元素具有底部边缘，而另一个元素具有顶部边缘。 具有较大边距的元素获胜。 为避免此类问题，建议根据本文使用单向边距。...负边距 它可以与四个方向的边距一起使用，在某些用例中非常有用。 让我们假设以下内容： 父级有 padding: 1rem，这导致子级从顶部、左侧和右侧偏移。 但是，子元素应该紧贴其父元素的边缘。...因此，导航项的宽度取决于它们的内容。 以下是解决方案： 设置导航项的最小宽度 增加水平填充 在分隔符的左侧添加额外的边距 最简单更好的解决方案是第三种，即添加一个margin-left。...处理底边距 假设以下组件堆叠。 每个组件都有一个底部边距。 请注意，最后一个元素有边距。 这是不正确的，因为边距应该只在元素之间。
有了 CSS，html 中大部分表现样式的标签就废弃不用了，html 只负责文档的结构和内容，表现形式完全交给 CSS，html 文档变得更加简洁。...1.1.2 CSS 的定义 选择器 { 属性：值； 属性：值； 属性：值；} 选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性，每个属性有一个或多个值。...*/ 1.4 盒子模型 元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。...*/ padding：20px 40px 50px 30px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ padding：20px 40px 50px; /...*/ margin：20px 40px 50px 30px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ margin：20px 40px 50px; /*
此外，CSS Tricks还在页边距底部和页边距顶部之间进行了投票。61%的开发者更喜欢 margin-bottom 而不是 margin-top。...必须提出的是，垂直方向的padding对于那些具有 display:inline 的元素不适用，比如 或 。如果添加了内边距，它不会影响元素，内边距将覆盖其他内联元素。...内联块元素在它的兄弟元素之间添加了一点空间，因为它将元素视为字符。...处理底部margin 假设以下组件堆叠在一起，每个组件都有底边距。 ? 注意最后一个元素有一个空白，这是不正确的，因为边距只能在元素之间。...更好的解决方案是通过向父元素添加负边距来取消不需要的间距。 .wrapper { margin-bottom: -16px; } 它用一个等于底部间距的值将元素推到底部。
元素可以拥有属性，属性包含有元素的额外信息，如 img 标签的 alt 属性可以用于指定图片的替换文字，即当无法正常显示图片时会显示出来的文字。 HTML 固定结构 内联元素） 可以控制宽高、行高、边距、边框等改变尺寸 常见块级元素：div、p、h1-h6、ul、ol、dl、table、form、blockquote、address 行内元素（内联元素） 只占据对应标签边框所占据的空间...，不独占一行 只能容纳文本或其他内联元素 只能通过修改水平边距、边框或行高来改变尺寸 常见行内元素有：a、span、br(br 会让后面的元素从另一行开始，但它还是属于上一行)、i、em、strong、...label、code、cite 行内块级元素 元素在行内排列，不会独占一行 可以控制宽高、垂直边距、边框来改变尺寸 常见行内块级元素有：img、input、td 语义化标签 根据内容的结构，选择合适的标签构建出便于开发者阅读的可维护性更高的代码结构... 在 article 元素之外作为页面或站点的附属信息部分。如侧边栏，其中的内容可以是友情链接、博客中的其他文章列表、广告等。
html中元素分为三种：块级元素、行内元素（也叫内联元素），内联块级元素。 常用块级元素：、、......（霸道，一个块级元素独占一行） 2、元素的高度、宽度、行高以及顶和底边距都可设置。...3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致） 常用内联元素：、、、、、、、 内联元素特点： 1...、和其他元素都在一行上； 2、元素的高度、宽度及顶部和底部边距不可设置； 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。...常用内联块元素：、 内联块级元素特点：（同时具备内联元素、块级元素的特点） 1、和其他元素都在一行上； 2、元素的高度、宽度、行高以及顶和底边距都可设置！
元素 = 开始标签 + 结束标签 + 元素内容 一些元素只有一个标签，如 img、 input、 br 等 HTML元素标签不区分大小写 元素可以嵌套在其他元素中间 元素可以拥有属性，属性包含有元素的额外信息...有 defer 属性的脚本会阻止 DOMContentLoaded 事件，直到脚本被加载并且解析完成。...async：立即下载脚本，不妨碍其他操作，比如下载其他资源或者加载其他脚本，只对外部脚本有效 常用元素 内联元素 只占据它对应标签的边框所包含的空间 只能容纳文本或其他内联元素 只能通过修改水平边距、边框或者行高的方式改变尺寸...可以控制宽高、行高、边距、边框等改变其尺寸 常用的块级元素:：、 、- 、、、、 、 、...、 行内块级元素 元素在行内排列，不会独占一行 支持设置宽高以及垂直边距、边框 常用的内联元素：、、 语义化 根据内容的结构，选择合适的标签构建出便于开发者阅读的可维护性更高的代码结构
CSS 注释 /*注释*/ 内联式 嵌入式 外部式 类选择器 .类名{ } ID 选择器 #id{ } 子选择器 第一代子元素 .food>li{ } 包含后代选择器 .first...span{ } > 作用于元素的第一代后代，空格 作用于元素的所有后代 伪类选择器 a:hover{ } 分组选择符 h1,span{ } CSS 属性 font-family font-size...块状元素 display:block 内联元素（行内元素） display:inline 和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变...内联块状元素 display:inline-block 和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。
p { margin-bottom: 50px; } margin 和 padding 有一样的速记形式。 边距和填充可以在很多情况下完成同样的事情，因此很难确定哪一个是”正确的”选择。...您选择其中一个的最常见原因是: 填充具有背景，而边距始终是透明的 填充包含在元素的单击区域中，而边距则不包括在内 边距会发生垂直折叠，而填充则不会 块级元素和内联元素之间最明显的对比之一是它们对边距的处理...Inline box 完全忽略元素的顶部和底部边距。 水平边距显示会像我们期望的那样，而元素周围的垂直空间没有变化。...当你有两个垂直边距彼此相邻的盒子时，它们会折叠。不是将边距加到一起，而是仅显示最大的边距。...垂直外边距折叠最可能发生的两种简单情况: 两个紧邻的兄弟元素的外边距发生折叠 父子元素的外边距发生折叠 首子元素与父元素的上外边距发生折叠 尾子元素与父元素的下外边距发生折叠 预防边距折叠 有时我们确实希望防止边距折叠
2.元素分类 在css中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素（又叫行内元素）和内联块状元素。...a{ display:block; } 块级元素特点： 每个块级元素都从新的一行开始，并且其后的元素也另起一行（真霸道，一个块级元素独占一行） 元素的高度、宽度、行高以及顶和底边距都可以设置 元素宽度在不设置的情况下...2.2内联元素 在html中，span，a，label，strong，em就是内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display：inline将元素设置为内联元素。...div{ display:inline; } 内联元素特点： 和其他元素都在一行上； 元素的高度、宽度及顶部和底部边距不可设置； 元素的宽度就是它包含的文字或图片的宽度，不可改变 解决行内元素间隙bug...问题 行内元素之间会产生间隙bug问题的场景： 1、当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。
调整背景图像的大小 在上面的例子中，我们有一个很大的图像，由于它比作为背景的元素大，所以最后被裁剪掉了。...在这种情况下，有些图像可能会跳出盒子外 contain — 浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。... ---- 盒模型 在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用CSS实现准确布局、处理元素排列的关键； 块级盒子（Block...这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为: 一个被定义成块级的（block）盒子会表现出以下行为: 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽...为了增加一些额外的复杂性，有一个标准的和替代（IE）的盒模型； 盒模型的各个部分 CSS中组成一个块级盒子需要: Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height
在本文中，通过熟悉的示例来解释什么是 BFC。然后说明 display 的一个新值，只有当你理解了什么是 BFC 以及为什么需要它时，它才有意义。...BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个 BFC 中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。...我们在 p 的上方和下方看不到任何灰色。 ? 在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。...如果我们把盒子设为 BFC，它现在包含了标签 p 和它们的边距，这样它们就不会折叠，我们可以看到边距后面容器的灰色背景。...首先，这些方法本身是有自身的设计目的，所以在使用它们创建BFC时可能会产生副作用。例如，使用overflow创建BFC后在某些情况下可能会看到出现一个滚动条或者元素内容被裁切。
在本文中，通过熟悉的示例来解释什么是 BFC。然后说明 display 的一个新值，只有当你理解了什么是 BFC 以及为什么需要它时，它才有意义。...BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个 BFC 中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。...BFC 还会导致一些其他有用的行为。 BFC 可以防止 margin 折叠 了解边距合并是另一个被低估的 CSS 技能。在下一个示例中，假设有一个背景颜色为灰色的 div。...我们在 p 的上方和下方看不到任何灰色。 ? 防止 margin 折叠 在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。...如果我们把盒子设为 BFC，它现在包含了标签 p 和它们的边距，这样它们就不会折叠，我们可以看到边距后面容器的灰色背景。
你知道margin有什么特性吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？什么时候该用padding而不是margin？你知道负margin吗？...你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？…… Margin是什么 CSS 边距属性定义元素周围的空间。...通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School 边界，元素周围生成额外的空白区。...原理分析：块级对象默认的display属性值是block，当设置了浮动的同时，还设置了它的外边距就会出现这种情况。也许你会问：“为什么之后的对象和第一个对象之间就不存在双倍边距的Bug”？...为什么display:inline可以解决这个双边距bug，首先是inline元素或inline-block元素是不存在双边距问题的。
HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等用我自己的一句话来说就是：HTML是用来描述网页的标记语言那我们为什么要学HTML呢？...那接下来就让我来学习HTML，首先我们先来了解页面的整体一、HTML的基本语法规则文档的扩展名为.html或.htmHTML标签不区分大小写,推荐小写元素可嵌套，可以包括属性的额外信息标签和属性不区分大小写...script： 异步下载脚本，页面完全加载后开始加载脚本常用元素内联元素(inline)特性：只占据它对应标签的边框所包含的空间只能容纳文本或其他内联元素只能通过修改水平边距...总是从新行上开始能容纳其他块元索或者内联元素可以控制宽高、行高、边距、边框等改变其尺寸常用的块级元素:、、ch1>-eh6>、、、、、、、行内块级元素(inline-block)特性：元素在行内排列，不会独占一行·支持设置宽高以及垂直边距、边框常用的内联元素:、、示例
邮件开发最让人头痛，当数其中大量使用到 table 元素，以及永无止境的和字符串。但是，为什么会这样？ 根据相关文献的解释，微软 Outlook 使用着与 Word 相同的渲染引擎。...而之所以能这么规整，是因为邮件的 HTML 中包含 75 个和 122 个。看看 HTML 格式，就知道内容有多乱了。 为什么要使用内联样式？...Gmail 在每封邮件的侧面，都放置了一块莫名其妙的 16 像素空白。 Apple Mail 和 Gmail 的侧边留白比较 我们没法去掉这块留白。查看边距？已经是 0 了。填充？是 0。而且!...在 Outlook 中，列表项目还应该用边距分开，且列表本身需要缩进来保证保留边距： 底部再留额外的空间。
该方法优点在于结构简洁，不理想的地方：1.由于使用场景不同，负缩进的值可能会不一样，不易抽象成公用样式；2.当该元素为链接时，在非IE下虚线框将变得不完整；3.如果该元素被定义为内联级或者内联块级，不同浏览器下会有较多的差异...”；外边距合并不仅仅出现在相邻的元素间，父子间同样会出现 // 简单列举几点外边距合并的注意事项: // a....外边距合并只出现在块级元素上； // b. 浮动元素不会和相邻的元素产生外边距合并； // c. 绝对定位元素不会和相邻的元素产生外边距合并； // d....内联块级元素间不会产生外边距合并； // e. 根元素间不会产生外边距合并（如html与body间）； // f....设置了属性overflow且值不为visible的块级元素不会与它的子元素发生外边距合并； 22.
2、margin：外边距 2.1 相邻盒模型，在相邻间隙中，都有margin的时候，虽然各有各的margin，但是最终显示是取大原则，选择大的margin作为两盒字的边距 ... 2.2.2 margin叠压问题，见2.1 2.2.3 margin-bottom 无效问题，有时候需要设置某块级元素在该父类的底部显示...--》 2.2.3.1 理解错了这个属性的含义，它指的是你所设置的元素的下外边距，但不代表它在父元素的底部，也不代表它的子元素都会在它的底部显示。...2.2.3.3 如果目标元素下方没有其他同辈元素，为什么margin-bottom:0不代表它在父元素的底部？...3、盒子的大小：( border + padding ) * 2 + width ( margin 不算 , 这里前提是左右对称 ) 4、让元素在父级的底部显示：
边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边，例如margin-top、或者padding-down，并且内边距、边框和外边距都是可选的，默认值是零，但是，许多元素将由用户代理样式表设置外边距和内边距...内联元素（inline elements）：内联元素以行的形式显示在页面上，它们不会独占一行，宽度由内容决定。...内联块状元素（inline-block elements）：内联块状元素结合了块级元素和内联元素的特性，可以设置宽度、高度、内外边距等属性，同时以行的形式显示在页面上。...常见的内联块状元素有input、button等。 内联块状元素可以包含其他内联元素和文本，也可以和其他内联元素在同一行显示。...margin-外边距 描述: 外边距是盒子周围一圈看不到的空间,它会把其他元素从盒子旁边推开, 其值可正可负，但是在设置负值会导致和其他内容重叠，并且无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加
除了显示成方块，它们一般分为下面两类： 块元素：在布局中默认会独占一行，块元素后的元素需换行排列。 内联元素：元素之间可以排列在一行，设置宽高无效，它的宽高由内容撑开。... 常用内联元素标签 1、超链接标签，链接到另外一个网页，具有内联元素基本特性，默认文字蓝色，有下划线 第二个网页 <a href="http...： 1、内联式：通过标签的style属性，在标签上直接写样式。...margin 设置元素和外界的距离，也叫外边距，如margin:20px;margin是同时设置4个边的，也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right...*/ padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下： padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
