为其正名 我们都使用过CSS得外边距，但是当谈到负边距的时候，我们好像往差的方向发展啦。在网页设计中负边距的使用出现了两种极端，一种特别喜欢它，也有一些人认为这完全就是魔鬼的作品。...负边距的使用如下： #content {margin-left:-100px;} 负边距通常在小范围使用。但是接下来你会看到，它能做的事情很多。...下面是一些你应该知道的关于负边距的事情： 他们是完全有效的CSS 这不是在跟你开玩笑。W3C甚至都说，在外边框中使用负边距是允许的。要了解更多可以点击这篇文章 负边距不是在hack 这是尤其正确的。...Dreamweaver不理解它 负边距不会在DW的设计窗口展示出效果。那你为什么还用DW的设计窗口查看效果呢？ 与其共事 负边距如果可以正确的使用的话它的功能是很强大的。有两种场景负边距是很重要的。...这里有一个文章讨论了负边距在多列布局中的应用。 微调元素 这是负外边距最常也是最简单的使用方式。
常见的块级元素有div、p、h1-h6、ol、ul、li、table、form、address、blockquote等。 块级元素可以设置宽度、高度、内外边距等属性，可以包含其他块级元素和内联元素。...内联块状元素（inline-block elements）：内联块状元素结合了块级元素和内联元素的特性，可以设置宽度、高度、内外边距等属性，同时以行的形式显示在页面上。...语法参数: /* # 一次控制一个元素的所有边距 */ margin: {1,4} > 当只指定一个值时，该值会统一应用到全部四个边的外边距上。...，来查看当前元素和其包含元素，在外边距设置为正时是如何推开周边元素，以及设置为负时，是如何收缩空间的。...对于浮动元素、绝对定位元素、内联块元素或者有边框、内边距或清除浮动的元素，外边距合并的规则会有所不同。
水平居中 内联元素 要使内联元素（如链接，span 或img）居中，使用 text-align: center 足够了。....desk { display: grid; justify-content: center; } image.png 块元素 Auto Margin 宽度和高度已知的块元素可以通过设置margin-left...plate { width: 120px; height: 120px; margin-left: auto; margin-right: auto; } image.png 对于多个块元素...在已知元素宽度的情况下，可以使用负边距代替CSS transform。...plate { position: absolute; top: 50%; transform: translateY(-50%); } image.png 如果知道元素高度，则可以使用负边距代替
水平居中 内联元素 要使内联元素（如链接，span 或img）居中，使用 text-align: center 足够了。....desk { display: grid; justify-content: center; } image.png 块元素 Auto Margin 宽度和高度已知的块元素可以通过设置margin-left...plate { width: 120px; height: 120px; margin-left: auto; margin-right: auto; } image.png 对于多个块元素...plate { position: absolute; left: 50%; transform: translateX(-50%); } image.png 在已知元素宽度的情况下，可以使用负边距代替...plate { position: absolute; top: 50%; transform: translateY(-50%); } image.png 如果知道元素高度，则可以使用负边距代替
2）两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。 3）两个外边距一正一负时，折叠结果是两者的相加的和。 7. Sass、LESS是什么？大家为什么要使用他们？ 他们是CSS预处理器。...inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top..., padding-bottom, margin-top, margin-bottom不会产生边距效果。...常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。 在布局上有了比以前更加灵活的空间。 15.经常遇到的浏览器的兼容性有哪些？...3）IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
如果一个正外边距和一个负外边距，会从正外边距减去负外边距的绝对值。...负外边距 外边距可以是负的，即 margin 可以设为负值，此时子元素的 width 或者 height 就有可能大于父元素的 width。...block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block 行内块元素。...run-in 此元素会根据上下文作为块级元素或内联元素显示。 compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。...之下 显示，内容在浮动元素 之上 显示 清除浮动 清除浮动就是让元素的左边或者右边或者两边不会有浮动元素出现。
边距折叠 简而言之，当两个垂直元素有一个边距，并且其中一个的边距大于另一个时，就会发生边距折叠。 在这种情况下，将使用较大的边距，而忽略另一个边距。...负边距 它可以与四个方向的边距一起使用，在某些用例中非常有用。 让我们假设以下内容： 父级有 padding: 1rem，这导致子级从顶部、左侧和右侧偏移。 但是，子元素应该紧贴其父元素的边缘。...内联块元素在其兄弟元素之间添加了一点空间，因为它将元素视为字符。...editors=1100 另一个类似的概念是向两边添加填充，然后边距为负。...负边距是解决办法。
# 负外边距 不同于内边距和边框宽度，外边距可以设置为负值。负外边距有一些特殊用途，比如让元素重叠或者拉伸到比容器还宽。...负外边距的具体行为取决于设置在元素的哪边： 如果设置左边或顶部的负外边距，元素就会相应地向左或向上移动，导致元素与它前面的元素重叠 如果设置右边或者底部的负外边距，并不会移动元素，而是将它后面的元素拉过来...给元素底部加上负外边距并不等同于给它下面的元素顶部加上负外边距 如果不给一个块级元素指定宽度，它会自然地填充容器的宽度 如果在右边加上负外边距，则会把它拉出容器。...如果在左边再加上相等的负外边距，元素的两边都会扩展到容器外面 如果元素被别的元素遮挡， 利用负外边距让元素重叠的做法可能导致元素不可点击。...，防止它们折叠 使用 overflow:auto 防止内部元素的外边距跟容器外部的外边距折叠，这种方式副作用最小 如果容器为浮动元素、内联块、绝对定位或固定定位时，外边距不会在它外面折叠 当元素显示为
: 100px; } // 要使内联元素可以设置宽高，只需将其定义为块级或者内联块级元素即可。...该方法优点在于结构简洁，不理想的地方：1.由于使用场景不同，负缩进的值可能会不一样，不易抽象成公用样式；2.当该元素为链接时，在非IE下虚线框将变得不完整；3.如果该元素被定义为内联级或者内联块级，不同浏览器下会有较多的差异...外边距合并只出现在块级元素上； // b. 浮动元素不会和相邻的元素产生外边距合并； // c. 绝对定位元素不会和相邻的元素产生外边距合并； // d....内联块级元素间不会产生外边距合并； // e. 根元素间不会产生外边距合并（如html与body间）； // f....设置了属性overflow且值不为visible的块级元素不会与它的子元素发生外边距合并； 22.
inline元素的margin和padding属性，水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，但竖直方向上的padding-top...、padding-bottom、margin-top和margin-bottom不会产生边距效果。...应用场合 很多时候我们必须让一些块元素并排显示，一般会想到浮动，但是块元素浮动设边距的时候在IE下会出现加倍的BUG，所以很多时候不得不把这个块元素套在一个内联元素里，然后给这个内敛元素浮动和边距。...通过设置：display：inline-block，就将对象呈递为内联对象，但对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。...解决IE6、IE7兼容性的方法： 首先设置inline-block触发块元素，具有了layout的特性，然后设置display:inline使块元素呈现内联元素，此时layout的特性不会消失。
样式定义了元素的外观，包括颜色、大小、字体、边距、间距等。我们可以使用CSS（层叠样式表）来为HTML文档中的元素定义样式。 样式通常包括以下几个方面： 文本样式: 包括字体、字号、字重、颜色等。...尺寸和布局: 包括元素的宽度、高度、内边距和外边距。 定位: 包括元素的位置、浮动、清除浮动等。 在HTML DOM中，我们可以使用JavaScript来读取和修改这些样式。...如何使用内联样式 在HTML中，您可以使用内联样式来为特定元素指定样式。内联样式是指在HTML元素的style属性中直接定义样式。以下是一个简单的示例： <!...操作类名 除了内联样式，您还可以使用类名来为元素定义样式。类名通常在CSS中定义，并可以应用到多个元素上。在HTML DOM中，您可以使用JavaScript来添加、删除和切换元素的类名。...DOCTYPE html> 修改背景颜色示例 这是一个带有背景颜色的块级元素
border-color：就是全部四边加只设置颜色 border-top：就是全部颜色宽度样式都设置并且只给上面上边框 border-left-style：就是只设置左边且只设置样式 块元素属性...margin外边距与padding内边距 块元素与内联元素 块元素：会独占一行，默认宽度是填充父元素的宽度，高度是内容的高度。...可再自定义宽高 常见的块元素有：ul列表、form表单、h1-h6标题、hr水平线、p段落、div 内联元素：不会独占一行，不能设置宽高还有边距这些，范围只是仅仅包裹内容。...常见的内联元素有：a链接、em斜体、img图片、input输入控件、label标签、select下拉选择器、textarea多行文本输入、span 块和内联的转换： display:block 内转块...display:inline 块转内 display:inline-block 转成内联块，此元素不仅有块的特性修改宽高边距等还可以同行只要宽度够 浮动：通过设置浮动可以到达同行的效果不用去转内联块
HTML/CSS基础 目录 盒模型 margin叠加 块级元素和内联级元素 z-index属性 浮动 盒模型 ?...height(包含padding-top + padding-bottom + border-top + border-bottom) margin叠加 一种情况-父子元素叠加 子元素的外边距隔着父元素的内边距和边框...当这两项都不存在的时候, 父子元素垂直外边距相邻, 产生叠加....解决方法 添加父元素的内边距和边框任何一项即可取消叠加 给父元素加上样式即可 overflow: hidden; 块级元素和内联级元素 根据display属性，可以将元素分为块级元素(block)和内联级元素...z-index属性 定义 设置元素的堆叠顺序 用法 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面 注意 可拥有负的 z-index 属性值 仅能在定位元素上奏效 浮动 定义 使元素脱离文档流
你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？什么时候该用padding而不是margin？你知道负margin吗？你知道负margin在实际工作中的用途吗？...…… Margin是什么 CSS 边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。...margin在块元素、内联元素中的区别 HTML（这里说的是html标准，而不是xhtml）里分两种基本元素，即block和inline。...原理分析：块级对象默认的display属性值是block，当设置了浮动的同时，还设置了它的外边距就会出现这种情况。也许你会问：“为什么之后的对象和第一个对象之间就不存在双倍边距的Bug”？...在IE6/7下左侧应用了absolute属性的块级元素与右边的自适应的文字内容重叠。 解决方法：把左侧块级元素更改为内联元素，比如把div更换为span。
行内元素：又叫内联元素， 特点是行高以及底边距不可改变，只占内容的宽度(高度就是内容文字或者图片的宽度)； 行内的元素都会在同一条直线上，也就是水平布局的； 默认不会换行(不强制换行)。...inline元素的margin和padding属性，水平方向的padding-left, padding-right,margin-left, margin-right都产生边距效果； 但竖直方向的padding-top..., padding-bottom, margin-top,margin-bottom不会产生边距效果。...无效，而且块级元素即使设置宽度也还是独占一行 块级元素可以设置margin和padding属性，行内元素水平方向的margin和padding如margin-left、padding-right,可以产生边距效果...，但是竖直方向的如padding-top和margin-bottom不会产生边距效果。
（真霸道，一个块级元素独占一行） ②、元素的高度、宽度、行高以及顶和底边距都可设置。 ...①、设置display:block就是将元素显示为块级元素 ---> a{display:block;} 2、内联元素(又叫行内元素) ,、、...； ②、元素的高度、宽度及顶部和底部边距不可设置； ③、元素的宽度就是它包含的文字或图片的宽度，不可改变。...如何将一个元素设置为内联块状元素？ ...11、盒模型代码缩写 盒模型外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。
常见的逻辑属性包括： margin-inline-start 和 margin-inline-end：表示元素的内联起始边距和内联结束边距。 ...margin-block-start 和 margin-block-end：表示元素的块级起始边距和块级结束边距。 ...*/ margin-inline-end: 10px; /* 内联结束边距 */ padding-block-start: 15px; /* 块级起始内边距...1、逻辑外边距 逻辑外边距属性包括： margin-inline-start：设置内联起始边距。 margin-inline-end：设置内联结束边距。 ...margin-block-start：设置块级起始边距。 margin-block-end：设置块级结束边距。
html中元素分为三种：块级元素、行内元素（也叫内联元素），内联块级元素。 常用块级元素：、、......（霸道，一个块级元素独占一行） 2、元素的高度、宽度、行高以及顶和底边距都可设置。...3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致） 常用内联元素：、、、、、、、 内联元素特点： 1...、和其他元素都在一行上； 2、元素的高度、宽度及顶部和底部边距不可设置； 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。...常用内联块元素：、 内联块级元素特点：（同时具备内联元素、块级元素的特点） 1、和其他元素都在一行上； 2、元素的高度、宽度、行高以及顶和底边距都可设置！
如果添加了内边距，它不会影响元素，内边距将覆盖其他内联元素。 这只是一个友好的提醒，应该更改内联元素的 display 属性。...内联块元素在它的兄弟元素之间添加了一点空间，因为它将元素视为字符。...另一个类似的概念是在两边都添加填充，然后边距为负。这是Facebook故事的一个示例： ?...更好的解决方案是通过向父元素添加负边距来取消不需要的间距。 .wrapper { margin-bottom: -16px; } 它用一个等于底部间距的值将元素推到底部。...负边距是解决办法。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
实时音视频
