类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。...div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/ overflow: hidden; //此时已经触发了BFC属性。...何时使用margin： 需要在border外侧添加空白 空白处不需要背景色 上下相连的两个盒子之间的空白，需要相互抵消时。...起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after 34 你对line-height是如何理解的？...41 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度 外层div使用position：relative；高度要求自适应的div使用position: absolute
CSS 有两个最重要的基本属性，前端开发必须掌握：display 和 position。 display属性指定网页的布局。两个重要的布局，我已经介绍过了：弹性布局flex和网格布局grid。...这时，浏览器会按照源码的顺序，决定每个元素的位置，这称为"正常的页面流"（normal flow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。...所以，只要理解了它们的基点是什么，就很容易掌握这三个属性值。 这三种定位都不会对其他元素的位置产生影响，因此元素之间可能产生重叠。...div { position: fixed; top: 0; } 上面代码中，div元素始终在视口顶部，不随网页滚动而变化。...div { position: sticky; top: 0; } 它的原理是页面向下滚动时，每张图片都会变成fixed定位，导致后一张图片重叠在前一张图片上面。详细解释可以看这里。
加载差异：link 引用的 css,在页面加载时同时加载。而 @import 在页面加载完后才加载 3. 兼容性：link 是 html 标签，没有兼容问题。...aquamarine; } /* @import "03.css"; */ • 在页面中：不存在权重问题，谁在最低下就使用谁的样式 <!...垂直方向上，自上而下排列，和文档流的排列方式一致 2. 在 BFC 中上下两个相邻的两个容器的 margin 会重叠 3. 计算 BFC 的高度时，需要计算浮动元素的高度 4....在 CSS2.1 中，伪元素都是使用 单冒号 来表示伪元素的，但在 CSS3 规范中，伪元素的语法被修改为使用 双冒号 17. CSS 预处理器/后处理器是什么？为什么要使用他们？...• 1px 问题的本质：在一些 Retina 屏幕上，移动端页面的 1px 会变得很粗，所呈现出来不止是 1px 的效果，原因就是 CSS 中的 1px 不能和移动端的 1px 划等号，他们之间是有一个比例关系
然后元素将占用指定的宽度，剩下的空间将平分在两个边距之间： 这个div是居中的。...: 在我年轻而脆弱的岁月里，父亲给了我一些我一直以来一直在思考的建议....左右对齐 - 使用 position 对齐元素的一种方法是使用 position: absolute; 在我年轻而脆弱的岁月里，父亲给了我一些我一直以来一直在思考的建议。...padding: 10px; } 注意： 绝对定位元素从正常流中移除，并且可以重叠元素。...当使用 position对齐元素时, 总是定义 margin 和 padding 为 元素. 这是为了避免不同浏览器的视觉差异。
6 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？...类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。...Less sass 25 CSS优化、提高性能的方法有哪些？ 避免过度约束 避免后代选择符 避免链式选择符 使用紧凑的语法 避免不必要的命名空间 避免不必要的重复 最好使用表示语义的名字。...何时使用margin： 需要在border外侧添加空白 空白处不需要背景色 上下相连的两个盒子之间的空白，需要相互抵消时。...41 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度 外层div使用position：relative；高度要求自适应的div使用position: absolute
CSS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。 1. 简介 在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流、普通流三种。...FC(Formatting Context)，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。...（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界） BFC的区域不会与float的元素区域重叠 计算BFC的高度时，浮动子元素也参与计算 5....所以当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠。...这里给任一个相邻块级盒子的外面包一个div，通过改变此div的属性使两个原盒子分属于两个不同的BFC，以此来阻止margin重叠。
3.BFC BFC（Block Formatting Context 块格式化上下文）：是W3C CSS 2.1 规范中的一个概念，在CSS3中被修改为flow root。...创建了BFC的元素会按照如下的方式对其子元素进行排列： 在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。...在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。即是在BFC中相邻的块级元素的垂直边距会折叠（collapse）。...折叠的结果： 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。 两个外边距一正一负时，折叠结果是两者的相加的和。...同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。
CSS 有两个最重要的基本属性，前端开发必须掌握：display 和 position。 display属性指定网页的布局。两个重要的布局，我已经介绍过了：弹性布局flex和网格布局grid。...这时，浏览器会按照源码的顺序，决定每个元素的位置，这称为"正常的页面流"（normal flow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。...所以，只要理解了它们的基点是什么，就很容易掌握这三个属性值。 这三种定位都不会对其他元素的位置产生影响，因此元素之间可能产生重叠。...div { position: fixed; top: 0; } 1 2 3 4 复制 上面代码中，div元素始终在视口顶部，不随网页滚动而变化。...div { position: sticky; top: 0; } 1 2 3 4 复制 它的原理是页面向下滚动时，每张图片都会变成fixed定位，导致后一张图片重叠在前一张图片上面。
类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。...Less sass 25 CSS优化、提高性能的方法有哪些？ 避免过度约束 避免后代选择符 避免链式选择符 使用紧凑的语法 避免不必要的命名空间 避免不必要的重复 最好使用表示语义的名字。...何时使用margin： 需要在border外侧添加空白 空白处不需要背景色 上下相连的两个盒子之间的空白，需要相互抵消时。...起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after 34 你对line-height是如何理解的？...41 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度 外层div使用position：relative；高度要求自适应的div使用position: absolute
类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。...div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/ overflow: hidden; //此时已经触发了BFC属性。...Less sass 25 CSS优化、提高性能的方法有哪些？ 避免过度约束 避免后代选择符 避免链式选择符 使用紧凑的语法 避免不必要的命名空间 避免不必要的重复 最好使用表示语义的名字。...何时使用margin： 需要在border外侧添加空白 空白处不需要背景色 上下相连的两个盒子之间的空白，需要相互抵消时。...41 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度 外层div使用position：relative；高度要求自适应的div使用position: absolute
元素可以通过使用position属性和偏移属性的组合来进行重叠，偏移属性值包括top，right，bottom以及left。...如果为每个元素设置position: absolute ，他们都会在彼此的基础上进行布局。footer元素在文档中最后出现，因此默认情况下，该元素会层叠在前两个元素之上。...层叠上下文 虽然使用position: absolute可以创建相互重叠的元素，但我们还没有创建所谓的「层叠上下文」。...以前，我们使用个位数递增来设置z-index值，但如果你想在两个设置了z-index: 3和z-index: 4 的元素之间添加一个新的元素，你该怎么办？你必须同时改变更多的值。...另一个好处是，如果需要在其他两个图层之间添加一个新的图层，有99个潜在的值可以挑选。
它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。...根元素 float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex...两个p之间的距离为100px，发送了margin重叠。 根据BFC布局规则第二条： Box垂直方向的距离由margin决定。...属于同一个BFC的两个相邻Box的margin会发生重叠 我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。...同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。 原文
非浮动元素会覆盖浮动元素的位置 margin会传递给父级元素 两个相邻元素上下的margin会重叠 开发中的应用 阻止margin重叠 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个 div...清除浮动有哪些方法, 各有什么优缺点 使用clear属性的空元素 在浮动元素后使用一个空元素如，并在CSS中赋予.clear{clear:both;}属性即可清理浮动...开发中为什么要初始化css样式 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。 10....CSS优化、提高性能的方法有哪些 尽量将样式写在单独的css文件里面，在head元素中引用 将代码写成单独的css文件有几点好处： 内容和样式分离，易于管理和维护 减少页面体积 css文件可以被缓存、重用...，维护成本降低 不使用@import 避免使用复杂的选择器，层级越少越好 建议选择器的嵌套最好不要超过三层，比如： 精简页面的样式文件，去掉不用的样式 利用CSS继承减少代码量 避免！
它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。...二、哪些元素会生成BFC 根元素或其它包含它的元素 浮动 (元素的 float 不为 none) 绝对定位元素 (元素的 position 为 absolute 或 fixed) 行内块 inline-blocks...两个p之间的距离为100px，发送了margin重叠。 根据BFC布局规则第二条： Box垂直方向的距离由margin决定。...属于同一个BFC的两个相邻Box的margin会发生重叠 我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。...同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。
通过伪类实现了常规CSS无法实现的逻辑。 CSS3对于伪元素的定义 伪元素在DOM中创建了一些抽象元素，这些对象不存在与常文档流中。 伪元素由两个冒号::开头，然后是伪元素的名称。...使用两个冒号::是为了和伪类（CSS2中并没有区别）做区分。考虑兼容性CSS2中已存在的伪元素仍可以使用单引号:语法。但是CSS3中新增的伪元素必须以使用::。...CSS选择器优先级、权重计算 CSS选择器的优先级 选择器的优先级分为两种：1. 选择器在同一级别时。2. 选择器在不同级别时。 CSS选择器在不同级别时 在属性后面使用!...position: sticky（CSS3） 粘性定位，该定位基于用户滚动的位置。 在常态时,它的行为就像 position:relative，遵循常规流。...示意图： image.png 外边距重叠的意义 外边距的重叠只产生在普通流文档的垂直外边距之间，避免块级元素之间产生双倍边距的问题。 外边距重叠解决方案 1.
div cssz-index层重叠顺序 div层、span层等html标签层重叠顺序样式z-index，平时CSS使用较少，但也会难免会碰到CSS z-index使用。...z-index的数字越高越靠前，并且值必须为整数和正数（正数的整数）。 二、z-index使用条件 z-index在使用绝对定位 position:absolute属性条件下使用才能使用。...通常CSS让不同的对象盒子以不同顺序重叠排列，CSS就是要z-index样式属性。 三、案例 1....案例说明 三个盒子均都使用了绝对定位属性position样式，并且设置相同的高度和宽度样式。为了便于观察CSS使用left、right属性并赋予不同值，让其错落有致。...四、总结 本文基于CSS基础，介绍了如何使用z-index重叠顺序样式，在实际DIV+CSS布局时候CSS需要绝对定位样式，并且可以使用left、right进行定位，通过不同z-index值实现层重叠顺序排列
但“z 轴”顺序，不完全由 z-index 决定，在层叠比较复杂的 HTML 元素上使用 z-index 时，结果可能让人觉得困惑，甚至不可思议。这是由复杂的元素排布规则导致的。 ? 2.1....当没有元素包含z-index属性时，元素按照如下顺序堆叠（从底到顶顺序）： 根元素（）的背景和边界； 位于普通流中的后代“无定位块级元素”，按它们在HTML中的出现顺序堆叠； 后代中的...浮动块元素被放置于非定位块元素与定位块元素之间： 根元素（）的背景和边界； 位于普通流中的后代“无定位块级元素”，按它们在HTML中的出现顺序堆叠； 浮动块元素；<<<< 位于普通流中的后代...“无定位行内元素”； 后代中的“定位元素”，按它们在HTML中的出现顺序堆叠； ?...当元素之间重叠的时候，z-order 决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的一个。
属于同一个BFC(同一个标记)的两个相邻Box的margin会发生重叠规则，在一个box外包裹一个容器，让他生成不同的BFC，这样就不会margin重叠了。...类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。...何时使用margin：需要在border外侧添加空白空白处不需要背景色上下相连的两个盒子之间的空白，需要相互抵消时。...何时使用padding：兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。...区域会自动分配水平空间有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度外层div使用position：relative；高度要求自适应的div使用position
css如何实现垂直居中（5种方法） 第一种 这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性 第四种 这个方法使用了一个 position:absolute，有固定宽度和高度的 div。...所以，项目之间的间隔比项目与边框的间隔大一倍。 align-items属性定义项目在交叉轴上如何对齐。...浮动不会影响到其他BFC种的元素的布局， 清除浮动只能清除同一个BFC中在它前面的元素的浮动 外边距折叠也只会发生在属于同一BFC的块级元素之间 利用 BFC 避免 margin 重叠 下面这个例子会发现...margin是多少 看看我的 margin是多少 根据第 4 条，我们知道可以使用不同的 BFC 来避免 margin 的重叠 <!
元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。 position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。...8、图片间隙问题如何解决 两个图片之间和图片下方多出的空白间隙可以使用以下方式解决。...何时使用margin： 需要在border外侧添加空白 空白处不需要背景色 上下相连的两个盒子之间的空白，需要相互抵消时。...32、什么是外边距重叠？重叠的结果是什么？ 外边距重叠就是 margin- collapse在CSS中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。...39、z-index属性在什么情况下会失效 通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
