CSS面试题
布局相关面试题
盒子模型
CSS 盒子模型定义了元素的大小和布局，它包括元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）。理解盒子模型对于进行精确的布局和设计是非常重要的
盒子模型的宽度计算
在 CSS 中，一个元素的总宽度可以通过以下公式计算：
总宽度 = 内容宽度 + 左内边距 + 右内边距 + 左边框宽度 + 右边框宽度 + 左外边距 + 右外边距
width = content + padding-left + padding-right + border-left-width + border-right-width + margin-left + margin-rightCSS 盒子模型类型
标准盒子模型（content-box）：
- 在这种模型中，
width和height属性只包括内容区域的尺寸，不包括内边距、边框或外边距。
IE 盒子模型（怪异模式，border-box）：
- 在这种模型中，
width和height属性包括内容区域、内边距和边框的总和，但不包括外边距
box-sizing 属性可以改变元素的盒子模型行为。默认值是 content-box，表示使用标准盒子模型。将其设置为 border-box 可以启用 IE 盒子模型
假设你有一个元素，你想要设置其宽度为 300px，并且你希望这个宽度只包括内容区域，不包括内边距和边框
.element {
width: 300px;
box-sizing: content-box;
padding: 20px;
border: 10px solid #000;
margin: 10px;
}在这种情况下，元素的实际宽度将会比 300px 宽，因为内边距和边框也会占据空间。如果你想要元素的总宽度为 300px，包括内容、内边距和边框，但不包括外边距，你应该这样设置：
.element {
width: 300px;
box-sizing: border-box;
padding: 20px;
border: 10px solid #000;
margin: 10px;
}面试题示例
- 解释 CSS 盒子模型：描述盒子模型的各个部分以及它们如何影响布局。
- 标准盒子模型与 IE 盒子模型的区别：解释两种盒子模型的区别以及
box-sizing属性如何改变元素的盒子模型行为。 - 如何控制元素的总宽度：展示如何使用
box-sizing属性和 CSS 宽度、内边距、边框和外边距属性来控制元素的总宽度。 - 在布局中使用盒子模型的挑战：讨论在使用盒子模型进行布局时可能遇到的一些常见问题，如过度扩展或宽度计算错误。
在面试中，这些问题可以帮助评估候选人对 CSS 盒子模型的理解以及他们在布局设计中应用这一概念的能力。
margin 纵向重叠的问题
在 CSS 中，margin 纵向重叠（也称为 "margin collapse"）是一个特性，当两个或多个块级元素的上下 margin 相遇时，它们会合并为一个 margin，这个 margin 的大小是相遇的两个 margin 中较大的一个，或者是它们的总和，如果它们相等的话
纵向外边距重叠的规则
- 相邻兄弟元素：两个相邻的块级元素（兄弟元素）的纵向
margin可能会重叠 - 父子元素：一个块级元素的底部外边距和一个内联元素的底部外边距不会重叠
- 嵌套元素：嵌套的块级元素（父子关系）的纵向
margin也不会重叠 - 浮动元素：浮动元素的纵向外边距不会与其兄弟元素的外边距重叠
- 根元素：HTML 文档的根元素（
html或body）的纵向外边距不会重叠
解决纵向外边距重叠
- 使用
overflow属性：给一个元素添加overflow: hidden;可以阻止其内部元素的外边距重叠
.parent {
overflow: hidden;
}- 使用
padding：在父元素上添加padding可以视觉上模拟外边距的分离
.parent {
padding-bottom: 20px; /* 举例 */
}- 使用空元素：在两个相邻元素之间插入一个空的
div或其他元素，可以阻止外边距重叠
<div class="element1">...</div>
<div style="height: 0;"></div>
<div class="element2">...</div>- 使用
border：给父元素添加border可以在视觉上分隔重叠的外边距
.parent {
border-bottom: 1px solid #000; /* 举例 */
}- 使用
margin负值：通过给子元素一个负的margin值，可以将其内容向下推动，从而避免外边距重叠
.child {
margin-top: -20px; /* 举例，与父元素的外边距大小相匹配 */
}- 使用 Flexbox：使用 Flexbox 布局可以避免外边距重叠的问题，因为 Flexbox 可以处理子元素的外边距
.parent {
display: flex;
}面试题示例
- 解释 CSS 中的 margin 重叠：描述 margin 重叠是什么，以及它是如何工作的。
- 如何避免 margin 重叠：列举并解释避免 margin 重叠的不同方法。
- margin 重叠的好处：讨论 margin 重叠在布局中可能带来的一些好处，如减少页面的总高度。
- 在哪些情况下 margin 重叠不会发生：描述 CSS 中防止 margin 重叠的一些场景。
在面试中，这些问题可以帮助评估候选人对 CSS 布局中 margin 重叠现象的理解，以及他们在实际开发中解决这一问题的能力。
margin 负值的问题
BFC 理解和应用
float 布局的问题，以及 clearfix
flex 画色子
定位
absolute 和 relative 分别依据什么定位？
居中对齐有哪些实现方式？
图文样式
line-height 的继承问题
响应式
rem 是什么？ 如何实现响应式？
CSS3
关于 CSS3 动画CSS 面试题
布局相关面试题
盒子模型
CSS 盒子模型定义了元素的大小和布局，它包括元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）。理解盒子模型对于进行精确的布局和设计是非常重要的
盒子模型的宽度计算
在 CSS 中，一个元素的总宽度可以通过以下公式计算：
总宽度 = 内容宽度 + 左内边距 + 右内边距 + 左边框宽度 + 右边框宽度 + 左外边距 + 右外边距
width = content + padding-left + padding-right + border-left-width + border-right-width + margin-left + margin-rightCSS 盒子模型类型
标准盒子模型（content-box）：
- 在这种模型中，
width和height属性只包括内容区域的尺寸，不包括内边距、边框或外边距。
IE 盒子模型（怪异模式，border-box）：
- 在这种模型中，
width和height属性包括内容区域、内边距和边框的总和，但不包括外边距
box-sizing 属性可以改变元素的盒子模型行为。默认值是 content-box，表示使用标准盒子模型。将其设置为 border-box 可以启用 IE 盒子模型
假设你有一个元素，你想要设置其宽度为 300px，并且你希望这个宽度只包括内容区域，不包括内边距和边框
.element {
width: 300px;
box-sizing: content-box;
padding: 20px;
border: 10px solid #000;
margin: 10px;
}在这种情况下，元素的实际宽度将会比 300px 宽，因为内边距和边框也会占据空间。如果你想要元素的总宽度为 300px，包括内容、内边距和边框，但不包括外边距，你应该这样设置：
.element {
width: 300px;
box-sizing: border-box;
padding: 20px;
border: 10px solid #000;
margin: 10px;
}面试题示例
- 解释 CSS 盒子模型：描述盒子模型的各个部分以及它们如何影响布局。
- 标准盒子模型与 IE 盒子模型的区别：解释两种盒子模型的区别以及
box-sizing属性如何改变元素的盒子模型行为。 - 如何控制元素的总宽度：展示如何使用
box-sizing属性和 CSS 宽度、内边距、边框和外边距属性来控制元素的总宽度。 - 在布局中使用盒子模型的挑战：讨论在使用盒子模型进行布局时可能遇到的一些常见问题，如过度扩展或宽度计算错误。
在面试中，这些问题可以帮助评估候选人对 CSS 盒子模型的理解以及他们在布局设计中应用这一概念的能力。
margin 纵向重叠的问题
在 CSS 中，margin 纵向重叠（也称为 "margin collapse"）是一个特性，当两个或多个块级元素的上下 margin 相遇时，它们会合并为一个 margin，这个 margin 的大小是相遇的两个 margin 中较大的一个，或者是它们的总和，如果它们相等的话
纵向外边距重叠的规则
- 相邻兄弟元素：两个相邻的块级元素（兄弟元素）的纵向
margin可能会重叠 - 父子元素：一个块级元素的底部外边距和一个内联元素的底部外边距不会重叠
- 嵌套元素：嵌套的块级元素（父子关系）的纵向
margin也不会重叠 - 浮动元素：浮动元素的纵向外边距不会与其兄弟元素的外边距重叠
- 根元素：HTML 文档的根元素（
html或body）的纵向外边距不会重叠
解决纵向外边距重叠
- 使用
overflow属性：给一个元素添加overflow: hidden;可以阻止其内部元素的外边距重叠
.parent {
overflow: hidden;
}- 使用
padding：在父元素上添加padding可以视觉上模拟外边距的分离
.parent {
padding-bottom: 20px; /* 举例 */
}- 使用空元素：在两个相邻元素之间插入一个空的
div或其他元素，可以阻止外边距重叠
<div class="element1">...</div>
<div style="height: 0;"></div>
<div class="element2">...</div>- 使用
border：给父元素添加border可以在视觉上分隔重叠的外边距
.parent {
border-bottom: 1px solid #000; /* 举例 */
}- 使用
margin负值：通过给子元素一个负的margin值，可以将其内容向下推动，从而避免外边距重叠
.child {
margin-top: -20px; /* 举例，与父元素的外边距大小相匹配 */
}- 使用 Flexbox：使用 Flexbox 布局可以避免外边距重叠的问题，因为 Flexbox 可以处理子元素的外边距
.parent {
display: flex;
}面试题示例
- 解释 CSS 中的 margin 重叠：描述 margin 重叠是什么，以及它是如何工作的。
- 如何避免 margin 重叠：列举并解释避免 margin 重叠的不同方法。
- margin 重叠的好处：讨论 margin 重叠在布局中可能带来的一些好处，如减少页面的总高度。
- 在哪些情况下 margin 重叠不会发生：描述 CSS 中防止 margin 重叠的一些场景。
在面试中，这些问题可以帮助评估候选人对 CSS 布局中 margin 重叠现象的理解，以及他们在实际开发中解决这一问题的能力。
margin 负值的问题
BFC 理解和应用
float 布局的问题，以及 clearfix
flex 画色子
定位
absolute 和 relative 分别依据什么定位？
居中对齐有哪些实现方式？
图文样式
line-height 的继承问题
响应式
rem 是什么？ 如何实现响应式？
CSS3
关于 CSS3 动画