为什么CSS水平边距在这个简单的情况下是不均匀的，如果显式指定的话？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

css负边距之详解

下面是一些你应该知道的关于负边距的事情：他们是完全有效的CSS 这不是在跟你开玩笑。W3C甚至都说，在外边框中使用负边距是允许的。要了解更多可以点击这篇文章负边距不是在hack 这是尤其正确的。...Dreamweaver不理解它负边距不会在DW的设计窗口展示出效果。那你为什么还用DW的设计窗口查看效果呢？与其共事负边距如果可以正确的使用的话它的功能是很强大的。有两种场景负边距是很重要的。...#mydiv2会把#mydiv1看成宽度缩小20px（所以会覆盖一部分），但是有趣的是#mydiv1并不会有任何变化，而是依然保持原先的宽度。如果负边距和宽度一样大的话，它就会被完全覆盖掉。...学以致用既然我们知道使用负边距在CSS2中是有效的，使用它可以给我们提供一些非常有趣的CSS技巧。把单个列表变成三列如果你有一个列表垂直方向太长了，为什么不把它分成几列呢？...就不需要浪费很多贷款来加载大的图片来实现这个效果啦简单的两列布局负边距也是在流式布局中创建简单一列宽度固定，一列内容为宽度的100%的两列布局的好方法。

2.2K4 0

css负边距之详解

下面是一些你应该知道的关于负边距的事情：他们是完全有效的CSS 这不是在跟你开玩笑。W3C甚至都说，在外边框中使用负边距是允许的。要了解更多可以点击这篇文章负边距不是在hack 这是尤其正确的。...Dreamweaver不理解它负边距不会在DW的设计窗口展示出效果。那你为什么还用DW的设计窗口查看效果呢？与其共事负边距如果可以正确的使用的话它的功能是很强大的。有两种场景负边距是很重要的。...#mydiv2会把#mydiv1看成宽度缩小20px（所以会覆盖一部分），但是有趣的是#mydiv1并不会有任何变化，而是依然保持原先的宽度。如果负边距和宽度一样大的话，它就会被完全覆盖掉。...学以致用既然我们知道使用负边距在CSS2中是有效的，使用它可以给我们提供一些非常有趣的CSS技巧。把单个列表变成三列如果你有一个列表垂直方向太长了，为什么不把它分成几列呢？...就不需要浪费很多贷款来加载大的图片来实现这个效果啦简单的两列布局负边距也是在流式布局中创建简单一列宽度固定，一列内容为宽度的100%的两列布局的好方法。

1.8K8 0

您找到你想要的搜索结果了吗？

是的

没有找到

CSS入门？一篇就够了！

type=“text/CSS” 在html5中可以省略，写上也比较符合规范，所以这个地方可以写也可以省略。行内式（内联样式）内联样式，又有人称行内样式、行间样式、内嵌样式。...是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况...外边距实现盒子居中可以让一个盒子实现水平居中，需要满足一下两个条件：必须是块级元素。盒子必须指定了宽度（width）然后就给左右的外边距都设置为auto，就可使块级元素水平居中。...盒子模型布局稳定性开始学习盒子模型，同学们最大的困惑就是，分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距？答案是：其实他们大部分情况下是可以混用的。...所谓静态位置就是各个元素在HTML文档流中默认的位置。上面的话翻译成白话：就是网页中所有元素都默认的是静态定位哦！其实就是标准流的特性。

5.1K2 0

一道面试题来看伪元素、包含块和高度坍塌

margin-top:100% 为什么能够自适应宽度？现在我们已经将这个示例转化成一个比较简单的形态，没有过多的知识。...如果 position 属性是「fixed」，在连续媒体的情况下(continuous media)包含块是 viewport ,在分页媒体(paged media)下的情况下包含块是分页区域(page...边距塌陷(Collapsing margins) 在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以合并形成一个边距，称为边距塌陷。...，包括其所有流入子元素的边距（如果有的话）都会坍塌。...2.当边距全为负数的时候，取最小值。 3.在存在负边距的情况下，从正边距的最大值中减去负边距的绝对值的最大值。

1.1K2 0

勇闯44关深入浅出CSS基础之第一篇

理解CSS 以上是一个官方的定义。我们用一个更简单的方式理解CSS到底是一个什么东东：如果HTML是骨架，那CSS就是装饰这个骨架的一层皮和身上的装饰品。...这个关卡我们使用了Google Fonts库（顾名思义，就是使用谷歌公司提供的公开字体库 - 也就是免费使用的）注意：如果我们无法访问谷歌字体的话，这一关是无法过的，只能跳过。...: font-family: FAMILY_NAME, GENERIC_NAME;; 里面的FAMILY_NAME就是指定的字体名，如果这个字体找不到，或者语言不适应的话，就会往后面定义的字体进行应用；...该盒子是水平居中的 */ margin: auto; /* 该盒子是水平居中的, 上下边距为0 */ 在现代浏览器中，如果要把一些东西水平居中，使用 display:flex...《前端必看的8个HTML+CSS技巧》 --- CSS是一个很独特的语言。看起来非常简单，但是某种特殊效果看似简单，实现起来就颇有难度。

1.2K1 0

CSS布局(二) 盒子模型属性

盒子模型的属性宽高width/height 　　在CSS中，可以对任何块级元素设置显式高度。　　...如果指定高度大于显示内容所需高度，多余的高度会产生一个视觉效果，就好像有额外的内边距一样；　　如果指定高度小于显示内容所需高度，取决于overflow属性，需要滚动条需要设置为overflow:auto...对于块级元素来说，宽度设置为auto，则会尽可能的宽。详细来说，元素宽度=包含块宽度—元素水平外边距-元素水平边距宽度-元素水平内边距；　　高度设置为auto，则会尽可能的窄。...详细来说，元素高度=恰好足以包含其内联内容的高度　　[注意]如果没有显式声明包含块的height，则元素的百分数高度会重置为auto 【最大最小宽高】 min-width | min-height...【为什么margin:auto无法实现垂直居中】水平方向可以居中是因为块级元素的宽度默认是撑满父级元素的，如果给宽度设置一个固定值，而左右margin设置为auto，则可以平分剩余空间垂直方向不可以居中是因为块级元素的高度默认是内容高度

1.9K7 0

《精通CSS》第3章可见格式化模型

行内盒子是沿文本流水平排列的，也会随文本换行而换行。它们之间的水平间距可以通过水平方向的内边距、边框和外边距来调节。...但是行内盒子的高度不受其垂直方向上的内边距、边框和外边距的影响，且给行内盒子显示地设置宽高也不会起作用。修改行内盒子高度的唯一方式是修改行高line-height。...最后，内边距、边框和外边框可以应用于元素的四边，也可以单独用于某一边。外边距甚至可以使用负值，从而使得元素在页面中移动。...如果包含块太窄无法容纳所有浮动元素水平排列，后面的元素会向下移动如下图左侧。如果浮动元素高度不同，后面的浮动元素在向下移动时可能会“卡”在前面的浮动元素左侧，如下图右侧。 ?...不过如果利用块级格式化上下文，我们可以更简单地实现上面这一效果，将 CSS 进行如下修改。

1.3K2 0

大型编程电视剧连载 | CSS知识点硬核整理归纳（二）

**是指边框与内容之间的距离。**当我们给盒子指定padding值之后，发生了2件事情：内容和边框有了距离，添加了内边距。盒子会变大了。...定位：将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。 6.2、什么是浮动(float) 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制移动到指定位置。...浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。 6.4、浮动小结我们使用浮动的核心目的——让多个块级盒子在同一行显示。...7.2、边偏移简单说，我们定位的盒子，是通过边偏移来移动位置的。在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）。...7.3、定位模式在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：选择器 { position: 属性值; } 定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

1.8K2 0

揭示不为人知的CSS

最多你可能只是直观地了解这个属性是如何工作的。没关系，你可以在不了解基本原理的情况下，对CSS有很好的争议。虽然，你知道解决问题的方案，但是你却不一定真的了解问题。你过你正式上面说的那样，没关系。...很多人喜欢这个属性，如果你正在建立一个网格系统，或任何其他需要水平对齐类型的布局项目，这可以是更直观的工作方式。边距重叠当边距意外重叠当时候，真的令人很困惑，因为你不知道发生了什么。...如果元素采用的是绝对定位、浮动定位或者有一个不一样的格式化上下文时，边距不会发生重叠现象，以及在其他一些不太可能的情况下。如果你感到困惑，没关系。边距不会发生重叠的规则是复杂的。...您需要知道的主要事情是当元素没有填充或边框时，垂直边距可能会重叠。如果你想了解的更详细， CSS Tricks 有一篇很好的边距重叠释义的文章推荐你看一下。...在不牺牲精确性的情况下，用简单的术语解释这些东西是一个真正的挑战。我希望这是对的。

1.6K3 0

深入学习下 CSS 间距相关的知识

因此，在本文中，我将分享关于 CSS 中的间距、实现该间距的不同方法以及何时使用填充或边距的所有信息。现在，让我们开始吧。间距类型 CSS 中的间距有两种类型，一种在元素外，另一种在元素内。...边距折叠简而言之，当两个垂直元素有一个边距，并且其中一个的边距大于另一个时，就会发生边距折叠。在这种情况下，将使用较大的边距，而忽略另一个边距。...具有较大边距的元素获胜。为避免此类问题，建议根据本文使用单向边距。更重要的是，CSS Tricks 在 margin-bottom 和 margin-top 之间进行了投票。...因此，导航项的宽度取决于它们的内容。以下是解决方案：设置导航项的最小宽度增加水平填充在分隔符的左侧添加额外的边距最简单更好的解决方案是第三种，即添加一个margin-left。...如果你觉得我跟你分享的内容有用的话，请点赞我，关注我，并与你的开发者朋友一起来分享讨论它，如果还有问题，请在留言区给我留言，我会答复你提出的问题，如果我知道的话。最后，感谢你的阅读，编程愉快！

13.4K4 0

网页布局基础

倡导的是结构、样式、行为分离 3.盒模型（Box Model）所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。...aotu 会根据浏览器的宽度自动的设置两边的外边距。...还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。但是在一种情况下，即使没有进行显式定义，也会创建块级元素。...也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。行内框在一行中水平布置。...不过，设置行高可以增加这个框的高度。 10.绝对定位布局绝对定位布局就是使用position属性实现的网页布局，是CSS中规定的第三种定位机制。

1.8K2 0

分享 10 个常用且必须要掌握的 CSS 知识点

在这个迷你 CSS 盒子模型教程中，我们将快速了解 CSS 盒子模型是什么以及它是如何工作的。在谈论 CSS 中网站的设计和布局时，使用的是盒子模型。...简单来说，CSS 盒模型是一个包含多个组件的容器，包括边框、边距、内边距和内容本身。总之，它是一个用于自定义不同元素布局的 CSS 工具包。...其他各种 CSS 属性可以应用于边框。这些属性包括但不限于边界半径等。 4、边距：边距是元素边界之外的空间。它在相邻元素之间创建了一个空间。...这并不是创建网格布局所需要做的全部。您必须使用 CSS 属性 grid-template-columns 和 grid-template-rows 显式创建网格行和列。...这就是为什么，我们进行了研究，为您找出 10 个 CSS 专业技巧。如果您喜欢本教程，请在本文末尾留下反馈。我们很高兴您能来到这里，并希望您喜欢 10 个专业的 CSS 技巧。

6.8K1 0

译|CSS中的间距，前端开发中各种设置间距的优点缺点及实例

另一个与边距折叠相关的例子是子节点和父节点。...以下是解决方案：设置导航项目的最小宽度增加水平padding 在分隔符的左侧添加一个额外的margin 最简单，更好的解决方案是第三个解决方案，即添加 margin-left。...如你所见，这个方案并不是那么简单。我比较喜欢的是下面这个办法。向网格项目添加 padding-left 在网格父节点上增加一个负值 margin-left，其 padding-left 值相同。...注意不要超过边距值，因为它会与同级元素重叠。 Card组件 Oh，如果我想把所有细节的Card组件间距都写进去的话，最后可能会出现书本上的内容。我就突出一个大概的模式，看看间距应该如何应用。 ?...如果设计上需要改一下怎么办？那么，如果是这样的话，样式就应该改了。见下文，你看到那里的灵活性了吗？

11.9K1 0

【JavaEE初阶】CSS

2.CSS选择器标签选择器在｛前面写标签名字，此时意味着会选中当前页面所有的指定标签。...选择的标签 { CSS属性; } 类选择器可以创建CSS类，手动指定哪些元素应用这个类。定义类，需要用.+class类名来定义一个类。...字体属性 font-family, 表示字体格式, 比如微软雅黑宋体, 楷体等, 要注意这个属性指定的字体必须是系统上已经安转了的字体, 如果要指定一些特殊的字体, 系统上没有, 就不能正确显示了;...在background系列属性的加持下, div等任何一个元素都可以用来显示图片, 而且提供的功能比img标签还更强大, 使用background-image属性添加背景图片, 默认情况下, 如果背景图片较小...而无法进行水平方向的排列; 行内元素虽然是在水平方向上排列的, 但是不适合进行水平布局, 因为尺寸边距这些都是不可设置的; 行内块元素可以设置尺寸, 边距也生效, 但是默认不独占一行, 同时行内块元素和行内元素一样

1771 0

Web前端最全面试宝典- CSS篇

在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。 border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。...在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。...3）两个外边距一正一负时，折叠结果是两者的相加的和。 7. Sass、LESS是什么？大家为什么要使用他们？他们是CSS预处理器。他是CSS上的一种抽象层。...10.如何水平居中一个元素如果需要居中的元素为常规流中inline元素，为父元素设置text-align: center;即可实现如果需要居中的元素为常规流中block元素 1）为元素设置宽度 2）...解决方案是加一个全局的*{margin:0;padding:0;}来统一。 3）IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

1K1 0

【前端攻略】最全面的水平垂直居中方案与flexbox布局

由简至繁：行内元素的水平居中要实现行内元素（、等）的水平居中，只需把行内元素包裹在块级父层元素（、、等）中，并且在父层元素CSS设置如下： #container...Demo 多个块状元素的水平居中要实现多个水平排列的块状元素的水平居中，传统的方法是将要水平排列的块状元素设为display:inline-block，然后在父级元素上设置text-align...是CSS3 中一个新的布局模式，为了现代网络中更为复杂的网页需求而设计。 Flexbox 已经被浏览器快速支持。...Demo 已知高度宽度元素的水平垂直居中法一绝对定位与负边距实现利用绝对定位，将元素的top和left属性都设为50%，再利用margin边距，将元素回拉它本身高宽的一半，实现垂直居中。...Css3显威力利用Css3的transform，可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。

1.3K4 0

CSS3学习(一)——基础学习

css"> ---- 1.2 常用的选择器 1.2.1 简单选择器 1.2.1.1 元素选择器元素选择器作用：根据标签名来选中指定的元素语法：标签名{} <!...border-color：用来指定边框的颜色，同样可以分别指定四个边的边框，规则和border -width一样，border-color也可以省略不写，如果省略了则自动使用color的颜色值...margin也可以设置负值，如果是负值则元素会向相反的方向移动，元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置的左和上外边距则会移动元素自身，而设置下和右外边距会移动其他元素。...在没有auto的情况下回调整外右边距，但有auto的话会优先调改设置为auto的元素。...所以我们经常利用这个特点来使一个元素在其父元素中水平居中元素的垂直方向布局子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出使用overflow

7272 0

面试官：CSS 面试题集锦

使用z-index有什么需要注意的地方？在开发中尽量避免层叠上下文的多层嵌套，因为层叠上下文嵌套过多的话容易产生混乱，如果对层叠上下文理解不够的话是不好把控的。...下面就简单介绍一下Bootstrap栅格系统的工作原理：网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询...inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top...自适应暴露的一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看内容太过拥挤。响应式正是针对这个问题衍生出的概念。...4.流动布局流动布局是各个区块的位置都是浮动的，不是固定不变的。 float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚到前面元素的下方，不会再水平方向溢出，避免了水平滚动条的实现。

3.3K3 0

【愚公系列】2023年03月其他-Web前端基础面试题（CSS_42道）

30、html元素的id跟class什么区别 31、什么是响应式设计，响应式设计的基本原理是什么 32、什么是外边距重叠？重叠的结果是什么？ 33、CSS属性content有什么作用？有什么应用？...38、为什么css放在顶部而js写在后面？ 39、z-index属性在什么情况下会失效 40、Flex 布局父级容器属性和子级项目属性有哪些？...一个容器默认有两条轴：一个是水平的主轴，一个是与主轴垂直的交叉轴。可以使用flex-direction来指定主轴的方向。...否则，如果float不是none，框是浮动的，display根据下表进行调整否则，如果元素是根元素，display根据下表进行调整其他情况下display的值为指定值总结起来：绝对定位、浮动...32、什么是外边距重叠？重叠的结果是什么？外边距重叠就是 margin- collapse在CSS中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。

3K2 0

全栈第一步-CSS基础前言CSS基础总结

CSS基础 CSS主要知识点集中于盒模型，布局，选择器等盒模型在对html标签有了整体认识之后，在了解了文档流的概念之后，就得了解元素在整个浏览器中的展现形式。CSS盒模型如下图所示： ?...在使用过程中为了统一认识，使用box-sizing:border-box比较好。上文提到了可以显式设置width、height，目前也存在一些设置width/height不起作用的元素。...inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top..., padding-bottom, margin-top, margin-bottom不会产生边距效果。...的“根元素”是可以被设置的，默认的话是body标签 static与fixed的定位方式较好理解，在此不做分析。

5102 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭