如果它们对齐 top 或 bottom，它们必须对齐，以便使行盒高度最小化。如果这些盒足够高，则有多种解决方案并且CSS2.2没有规定此行盒的基线的位置（即，strut的位置，参见下文）。...用户代理必须通过其相关基线将非替换的行内框中的字形彼此对齐。然后，对于每个字形，确定A和D。需要注意的是在单个元素内的字形可能来自不同的字体，因此不需要都具有相同的A和D。...字体在基线之上的高度和和基线之下的深度被假定为包含在字体内的特性。（更多细节，参见CSS3。） 在一个非替换行内元素上，line-height 指定一个高度用于计算行盒的高度。...值0% 意味着与 baseline 相同。 把盒提升（正值）或降低（负值）指定距离。值0cm 意味着与 baseline 相同。 下面的值使元素相对于行盒对齐。...当在水平方向上几个行内级盒不能完全被单个行盒包含时，它们会被分配到两个或者多个垂直堆叠的行盒中。因此，一个段落就是多个行盒的垂直堆叠。行盒的堆叠没有垂直间距（除非有特别声明）并且从不重叠。 3.
通过将其中一个元素或它们的共同父元素设置为BFC，可以避免这种外边距合并现象。...卡片列表：在展示一系列卡片式的内容时，Flex布局能使卡片在一行或一列中整齐排列，并且可以根据容器的大小自动调整卡片的宽度或高度，实现响应式布局。...以下是Grid布局的一些适用场景：复杂页面布局：对于一些具有明确网格结构的页面，如电商网站的首页，包含多个不同模块，每个模块又有自己的子模块，使用Grid布局可以清晰地划分页面结构，使各个模块在网格中定位准确...如果两个选择器的权重值相同，那么后出现的样式声明会覆盖先出现的样式声明（在同一个样式表中）。...伪元素：使用两个冒号::作为前缀（在CSS3中引入这种写法以区分伪类，在一些旧版本浏览器中也可使用一个冒号的写法，但不推荐），紧跟在选择器后面前端面试题，前端面试答案，前端面试汇总，前端面试攻略，JavaScript
有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重 HTML5新特性有哪些 语义化标签 音视频处理API(audio,video) canvas / webGL 拖拽释放(Drag...BFC是CSS布局的一个概念，是一个独立的渲染区域，规定了内部box如何布局， 并且这个区域的子元素不会影响到外面的元素，其中比较重要的布局规则有内部 box 垂直放置，计算 BFC 的高度的时候，浮动元素也参与计算...不同类型的Box会参与不同的Formatting Context。 如何创建BFC？...如何使用rem或viewport进行移动端适配 rem适配原理： 改变了一个元素在不同设备上占据的css像素的个数 rem适配的优缺点 优点：没有破坏完美视口 缺点：px值转换rem太过于复杂(下面我们使用...less来解决这个问题) viewport适配的原理 viewport适配方案中，每一个元素在不同设备上占据的css像素的个数是一样的。
幽灵空白节点 在H5文档声明中，内联元素的所有解析和渲染表现就，如同每个「行框盒子」的前面有一个空白节点一样，这个空白节点「永远透明，不占据任何宽度」。...padding 和 border 值 更改盒模型 CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的「总宽度和总高度」 box-sizing: content-box|border-box...❞ CSS3中，z-index已经并非只对定位元素有效，flex盒子的「子元素」也可以设置z-index属性。...，只需要考虑后代元素 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中 层叠上下文的创建（3类） 由一些CSS属性创建 「天生派」 「页面根元素天生具有层叠上下文...的值为absolute或fixed 应用场景 防止margin重叠 将位于同一个BFC的元素，分割到不同的BFC中 高度塌陷 --- 「计算BFC的高度时，浮动子元素也参与计算」 子元素浮动 父元素
文章分为上（html，css）中(js)下(vue)三部分。 html篇 html应该是前端中最简单的知识点了，标签用着用着就熟记于心，在面试过程中对html的提问更是少之又少，话不多说，上干货。...、table-cell等 BFC作用 可以避免外边距重叠的问题，将两个元素放在不同的BFC容器中即可。...（或者把其中一个margin改为padding） 解决高度塌陷 阻止元素被浮动元素覆盖 5....高度塌陷 原因 很多情况父盒子不方便给高度，子盒子浮动脱离文档流不占位置，使父盒子高度为0 解决方案 在浮动元素末尾加一个空标签，设clear:both 父级添加overflow:hidden 使用...为什么要初始化css 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有初始化CSS，往往会导致页面在不同浏览器之间出现差异。
BFC 也就是常说的块格式化上下文，这是一个独立的渲染区域，规定了内部如何布局，并且这个区域的子元素不会影响到外面的元素，其中比较重要的布局规则有内部 box 垂直放置，计算 BFC 的高度的时候，浮动元素也参与计算...），而它所占据的空间位置仍然存在，也即是说它仍然具有高度，宽度等属性值。...而class正好相反，是先定义样式，然后在页面中根据不同需求把样式应用到不同结构和内容上 5、目前浏览器都允许同一个页面出现多个相同属性值的id，一般情况能正常显示，不过当javascript通过id...32、什么是外边距重叠？重叠的结果是什么？ 外边距重叠就是 margin- collapse在CSS中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。...39、z-index属性在什么情况下会失效 通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。
这是因为我们对css只是大概知道个形，并没有看透css的本质。在同事的推荐下我阅读了张鑫旭老师的《css世界》，才发现css跟想象中的不太一样。...（图中两个div行高一样，div.one 的背景色区域就是行框盒子的高度，而 div.two 的背景区域则是实际高度，其行框盒子高度和 div.one 是一样的。） ?...没有任何margin合并； 脱离文档流：float设计的初衷就是为了“文字环绕”效果，为了让文字环绕图片，就需要具备两个条件。第一是元素高度坍塌，第二是行框盒子不可与浮动元素重叠。...当绝对定位元素的水平方向(left/right)或垂直方向(top/bottom)的两个定位属性同时存在的时候，绝对元素在该方向上便具有了流体特性。...上图分析：首先第一个i标签基线与第二行的span标签中的数字的基线对其，所以其位置在中间。其次最后一行的i标签基线对齐幽灵空白节点字母x的基线，没有错位，所以此时最后一行的间隙高度就是字母x的高度。
盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。...什么是外边距重叠？重叠的结果是什么？ 外边距重叠就是margin-collapse。 在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。...（设置rgba透明的元素的子元素不会继承透明效果！） 25. css中可以让文字在垂直和水平方向上重叠的两个属性是什么？...在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题 BFC是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用 35....当页面样式加载失败的时候能够让页面呈现出清晰的结构 有利于seo优化，利于被搜索引擎收录（更便于搜索引擎的爬虫程序来识别） 便于项目的开发及维护，使html代码更具有可读性，便于其他设备解析。
回答： margin重叠指的是在垂直方向上，两个相邻元素的margin发生重叠的情况。...一般来说可以分为四种情形： 第一种是相邻兄弟元素的marin-bottom和margin-top的值发生重叠。这种情况下我们可以通过设置其中一个元素为BFC 来解决。...第三种是高度为auto的父元素的margin-bottom和子元素的margin-bottom发生重叠。它们发生重叠一个是因为它们相 邻，一个是因为父元素的高度不固定。...可维护性、健壮性： （1）将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。 （2）样式与内容分离：将css代码定义到外部css中。...在CSS中，“行距”分散在当前文字的上方和下方，也就是即使是第一行文字，其上方也是 有“行距”的，只不过这个“行距”的高度仅仅是完整“行距”高度的一半，因此，也被称为“半行距”。
浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。 浮动的元素会具有行内块元素的特性 任何元素都可以浮动。...（当然前面的标准流不会被影响） 这时如果想要不被影响，就要清除浮动，从而它们就能使浮动的盒子恢复到标准流中：高度能恢复成应有的高度，也不会被之前的标准流给重叠影响到，同时它们浮动盒子之间的布局也不会被影响...符合网页布局第一准侧 4.定位 在网页设计中，定位（Positioning）是一种CSS属性，用于控制元素在页面中的位置。...子绝父相 —— 虽然父元素的定位可以是相对、绝对或者固定定位，但是绝对定位和固定定位都会脱离标准流，所以我们实际开发中，一般都使用相对定位，这就是常说的子绝父相。...只有设置了定位的元素才能通过 z-index 控制其堆叠顺序，因为只有这些元素才能脱离正常文档流并具有层叠上下文。
开发者可以将表格的视觉格式指定为矩形网格单元格。单元格的行和列可以组织成行组和列组。行，列，行组，列组和单元格可以在它们周围绘制边框（CSS 2.2中有两个边框模型）。...在其中一个图层中的元素上设置的背景只有在它上面的图层具有透明背景时才可见。 ? 表层架构Schema of table layers 最底层是一个单独的平面，代表表格本身。...一旦用户代理具有行中的所有单元格，就计算'table-row'元素框的高度：它是行计算的'height'的最大值，行中每个单元格计算的'height'和单元格所需的最小高度（MIN）。...CSS 2.2没有定义表单元格和表行的高度是如何用百分比值指定其高度的。CSS 2.2没有定义行组上“高度”的含义。 在CSS 2.2中，单元格盒的高度是内容所需的最小高度。...在表格的上下文中，'vertical-align'的值具有以下含义： baseline 单元格的基线与它所跨越的第一行的基线高度相同（见下面单元格和行基线的定义）。
盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。...优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。（应用范例：豆瓣，有兴趣自行google） CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？...外边距重叠就是margin-collapse。 在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。...由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异 但是初始化CSS会对搜索引擎优化造成小影响 BFC是什么?...在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题 BFC是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用 HTML
CSS 类 CSS类是一种用于在多个元素之间共享样式规则的方法。通过定义类，可以将相同的样式应用于多个元素。...ID 选择器 ID选择器用于选择页面中的唯一元素。与类不同，每个ID在文档中只能出现一次。...这些属性可以帮助你调整元素之间的间距以及元素内部的空白。 z-index属性：用于控制元素的堆叠顺序。当多个元素重叠时，z-index值较大的元素将显示在较小的元素上方。 8....伪元素以::开头，例如::before和::after，它们允许你在元素的内容前后插入内容。 9. 响应式设计 响应式设计是一种使网页能够适应不同屏幕尺寸和设备的技术。...Flexbox适用于一维布局，如排列元素在一行或一列中的情况，而Grid布局适用于二维布局，允许你创建行和列的复杂网格结构。这些布局模型提供了更强大的布局控制和灵活性。
如果你在日常工作中使用CSS，那么你的主要目标很可能集中在使事情看起来是正确的。最终得到的正确结果远比如何实现更重要。这意味着相比正确的语法和视觉效果我们更少关注CSS的实现原理。...当两个或多个相邻的垂直边距接触时，边距有时会发生重叠，并且不会用填充或边框分隔。如果子元素的边缘扩展到父元素的边缘，并且不会被填充分隔开，那么就会出现边距重叠的现象。...你需要知道什么: 视觉格式模型遍历文档树，并按CSS盒模型生成一个或多个渲染元素所需的盒子。CSSdisplay属性在决定元素如何参与当前的格式化上下文和定位方案中起着关键的作用。...浮动布局 Float（浮动）是一个CSS属性，它使一个元素从正常流中跳出来，并尽可能地向左或向右偏移，直到它接触到其上一级的盒元素或另一个浮动元素的边缘。...具有重叠偏移的定位元素可以导致元素占用相同空间而发生重叠问题。堆叠上下文可以解决这个问题。 层叠上下文 堆叠上下文决定事物呈现到页面的顺序。 你可以想象一个堆叠上下文，如图层。
(2) CSS 中哪些属性可以同父元素继承 ?...box-sizing用于告诉浏览器如何计算一个元素总宽度和总高度。...(12) 如何解决多个元素重叠问题？ 使用z-index属性可以设置元素的层叠顺序,适用于定位元素。 (13) CSS 选择符有哪些 ？哪些属性可以继承 ？优先级算法如何计算 ？新增伪类有那些 ？...外边距折叠（margin塌陷）： 相邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距（margin） 什么时候会造成margin塌陷？ 相邻的元素都在普通流中。...在不同浏览器下有什么区别 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局，被行或列占据的空间会留给其他内容使用 在Chrome中，如果此值在非表格元素上使用，与hidden值没有什么区别
其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。...是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉 比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况...在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。...比如： z-index: 2; font-weight: 700 注意： z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。 如果取值相同，则根据书写顺序，后来居上。...translate3d(x,y,z) [注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值 开门案例 body { } .door
回答： margin重叠指的是在垂直方向上，两个相邻元素的margin发生重叠的情况。 一般来说可以分为四种情形： 第一种是相邻兄弟元素的marin-bottom和margin-top的值发生重叠。...这种情况下我们可以通过设置其中一个元素为BFC来解决。 第二种是父元素的margin-top和子元素的margin-top发生重叠。...可维护性、健壮性： （1）将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。 （2）样式与内容分离：将css代码定义到外部css中。...在CSS中，“行距”分散在当前文字的上方和下方，也就是即使是第一行文字，其上方也是有“行距”的，只不过这个“行距”的高度仅仅是完整“行距”高度的一半，因此，也被称为“半行距”。...（1）谁大谁上：当具有明显的层叠水平标识的时候，如生效的z-index属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
层叠性决定了 CSS 如何处理样式冲突，以及它如何处理不同来源的样式，比如行内样式、外部样式表、以及浏览器默认样式之间的冲突。...权重优先级：不同的选择器具有不同的权重，权重越高优先级越大（详细内容请见后文）。 顺序优先级：如果样式的来源和权重都相同，则遵循就近原则，即后声明的样式会覆盖先声明的样式。 1.2.1 示例 在上面的例子中，我们为 元素设置了两个不同的 color 样式，一个来自于 标签（外部样式），另一个是行内样式（style 属性）。...1.3 层叠性在实际项目中的应用 在实际开发中，经常会有多个 CSS 文件。...在 CSS 中，继承性使我们可以避免为相同的属性重复编写样式，从而简化代码。 2.1 什么是继承性？
，之后的内联对象会被排列在同一行内。...（2）PostCss：PostCss 是如何工作的？我们在什么场景下会使用 PostCss？ 它和预处理器的不同就在于，预处理器处理的是 类CSS，而 PostCss 处理的就是 CSS 本身。...如何用 Webpack 实现对 CSS 的处理： Webpack 中操作 CSS 需要使用的两个关键的 loader：css-loader 和 style-loader 注意，答出“用什么”有时候可能还不够...在BFC中上下相邻的两个容器的margin会重叠 计算BFC的高度时，需要计算浮动元素的高度 BFC区域不会与浮动的容器发生重叠 BFC是独立的容器，容器内部元素不会影响外部元素 每个元素的左margin...值和容器的左border相接触 BFC的作用： 解决margin的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。
这意味着它不会影响其他元素在文档流中的原始位置。 控制偏移属性：可以通过四个 CSS 属性（left、right、top、bottom）来精确控制元素的偏移量。...元素会根据top、right、bottom、left属性进行位置偏移，并且也会脱离文档流，具有与绝对定位类似的影响。 不同的包含块：固定定位的元素的包含块与绝对定位不同。...固定定位的元素固定为视口，即浏览器的可视窗口。这意味着无论页面如何滚动，固定定位的元素始终保持在相对于视口的相同位置。...四、多个定位元素重叠时 （一）堆叠上下文 当多个定位元素重叠时，会涉及到堆叠上下文的概念。可以通过设置z-index属性来控制元素的堆叠顺序。通常情况下，z-index值越大，元素越靠近用户。...外边距合并问题：绝对定位和固定定位的元素没有外边距合并的情况。这与常规流中的块盒和行盒不同，在常规流中，块盒之间可能会发生外边距合并。
云服务器
ICP备案
云直播
对象存储
即时通信 IM
