CSS
CSS 属性名和属性值在大多数情况下是不区分大小写的，但也有少数例外情况，如 font-variant 和 text-decoration 等属性与其值中的某些字母是区分大小写的。建议在编写 CSS 代码时还是严格遵守大小写以避免不必要的错误。
CSS 盒模型包括标准盒模型和IE盒模型。其中标准盒模型（box-sizing: content-box;）的宽度和高度只包括内容的宽度和高度；而IE盒模型（box-sizing: border-box;）的宽度和高度则包括了内容、内边距和边框的宽度和高度。这两种盒模型的主要区别在于计算元素宽度和高度时所涉及的内容不同。
<link>和@import都可以用来引入外部资源，如CSS文件，但是它们之间有以下区别：
<link>是HTML标签，@import是CSS提供的一种方式。<link>在页面载入时同时加载，@import在页面载入完成后加载。<link>可以在文档头部定义，也可以在文档中任何地方定义，@import只能在样式表中定义。<link>可以同时加载多个外部样式表，而@import必须一条一条地执行。link标签支持添加一些额外属性，如media、title等，用于指定媒体类型或提供样式表的描述。@import不支持这些附加功能。<link>支持动态插入，而@import不支持。在比较优先级时，遵循“从左到右，从高到低”的原则，也就是选择器中每增加一项就会降低一级别的优先级。如果两个选择器的优先级相同，则后面的选择器优先级更高。
块格式化上下文（Block Formatting Context，BFC）是一个独立的渲染区域，在这个区域内，元素的布局和外部元素互不影响。BFC是 Web 页面布局中的一种重要机制，主要用于控制块级元素的布局及其内部元素的排列方式。
BFC的工作原理：
形成BFC的条件：
要创建一个BFC，需要满足以下条件之一：
<html>）。float属性为left或right）。position属性为absolute或fixed）。display属性为inline-block）。display属性为table-cell）。display属性为table-caption）。display属性为table、table-row、table-row-group、table-header-group、table-footer-group、table-column、table-column-group）。overflow属性值不为visible（例如，auto、scroll、hidden）。display属性为flex或inline-flex）。display属性为grid或inline-grid）。column-count或column-width属性不为auto）。contain属性值为layout、paint或strict。通过满足以上条件之一，可以创建BFC，实现独立渲染区域。在实际应用中，BFC有助于解决外边距折叠、浮动元素引起的布局问题等。
z-index属性是CSS中用于控制元素在页面中的堆叠顺序（即在z轴上的顺序）的属性。具有较高z-index值的元素会覆盖较低z-index值的元素。需要注意的是，z-index属性只适用于具有定位属性（position属性值为relative、absolute或fixed）的元素。
层叠上下文（Stacking Context）是一个抽象概念，它定义了一个元素在z轴上的层次。在同一个层叠上下文中，元素的堆叠顺序由z-index属性控制。层叠上下文可以嵌套，形成一个层叠上下文树。层叠上下文解决了多个元素重叠时的优先级显示。
形成层叠上下文的条件：
<html>）。z-index值不为auto的定位元素（position属性值为relative、absolute或fixed）。z-index值不为auto的弹性盒子（display属性值为flex或inline-flex）的直接子元素。z-index值不为auto的网格容器（display属性值为grid或inline-grid）的直接子元素。opacity属性值小于1的元素。transform属性值不为none的元素。filter属性值不为none的元素。perspective属性值不为none的元素。will-change属性值指定了任意形成层叠上下文的属性的元素。contain属性值为paint或strict的元素。mix-blend-mode属性值不为normal的元素。isolation属性值为isolate的元素。满足以上任意条件之一的元素都会创建一个新的层叠上下文。在层叠上下文中，元素会根据其z-index值和其他因素进行堆叠。层叠上下文有助于更好地控制元素的堆叠顺序，解决元素覆盖和遮挡的问题。
colorfont-familyfont-sizefont-weightfont-stylefont-variantletter-spacingline-heighttext-aligntext-indenttext-transformwhite-spaceword-spacinglist-style-typelist-style-positionlist-style-imageborder-collapseborder-spacingcaption-sideempty-cellstable-layoutvisibilitycursorquotestext-decorationtext-shadowword-breakword-wrapwriting-modedirection使用clear属性： 在浮动元素后添加一个空元素，然后使用CSS的clear属性来清除浮动。适用于简单布局和较早的浏览器版本。
父元素使用overflow属性： 为父元素添加overflow: auto或overflow: hidden属性。此方法可以使父元素自动计算其高度，包括浮动元素。适用于不需要显示滚动条的布局。
.container {
overflow: auto;
}
使用伪元素::after： 为父元素添加::after伪元素，并设置clear: both。这种方法不需要额外的HTML元素。适用于现代浏览器和简洁的HTML结构。
.container::after {
content: “”;
display: table;
clear: both;
}
使用Flexbox布局： 将父元素的display属性设置为flex。这会使所有子元素成为弹性项，并且不再需要清除浮动。适用于现代浏览器和需要使用弹性布局的场景。
.container {
display: flex;
}
使用Grid布局： 将父元素的display属性设置为grid。这会使所有子元素成为网格项，并且不再需要清除浮动。适用于现代浏览器和需要使用网格布局的场景。
.container {
display: grid;
}
在实际项目中，选择哪种清除浮动的技术取决于项目的具体需求、浏览器兼容性和布局类型。现代项目通常更倾向于使用Flexbox或Grid布局来解决浮动问题。
响应式布局是一种使网站能够自动适应不同屏幕尺寸和设备类型的设计方法。以下是一些常见的响应式布局技术：
srcset、sizes属性和<picture>元素，可以让浏览器根据设备像素比（DPR）和屏幕尺寸选择合适的图片资源。这样可以在不同设备上加载适当大小的图片，提高性能并保持视觉效果。在实际项目中，通常会综合运用以上技术来实现响应式布局。这些技术可以使网站在不同设备和屏幕尺寸下保持良好的用户体验和视觉效果。
三栏布局是指一个网页由三个栏目组成的布局，分别是左栏、右栏和中间栏。下面是三种实现三栏布局的方法：
圣杯布局是一种使用浮动和负边距实现的三栏布局。中间栏先放在html结构中，使用负边距将左右栏移动到中间栏的两侧，再使用相对定位将左右栏拉回原来的位置。这种布局可以使得中间栏优先渲染，兼顾SEO和用户体验。
双飞翼布局也是一种使用浮动和负边距实现的三栏布局。与圣杯布局不同的是，左右栏使用margin负值撑开中间栏的宽度。这种布局与圣杯布局相比，代码更简单易懂。
Flex布局是CSS3引入的一种新的布局方式，通过flex容器和flex项目的属性设置，可以轻松实现三栏布局。设置左右栏的宽度为固定值，中间栏的宽度使用flex-grow属性自动填充。这种布局适用于移动端和PC端，具有响应式的特点。
Less和Sass这两个常见的CSS预处理器。它们的优势是可以使用变量、嵌套规则和函数等功能，可以更简单更高效地编写CSS代码。缺点是需要进行额外的预处理工作，增加了开发成本。
解决CSS样式在不同浏览器中的兼容性问题可以使用一些通用的方法，如使用CSS Reset，避免使用CSS Hack和浏览器前缀，使用标准的组件库，尽量使用标准的CSS属性和属性值等。
在外层容器内创建一个正方形元素，并设置padding-bottom为100%。这里的关键是padding-bottom以父元素的宽度为基准计算，因此当设置为100%时，它将等于父元素的宽度，从而保证正方形的宽高相等。
<div class="square-container">
<div class="square"></div>
</div>
.square {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-bottom: 100%; /* 确保正方形的高度等于宽度 */
background-color: #f00; /* 设置背景颜色以便观察效果 */
}
margin塌陷 和 margin合并 都是 CSS 中描述 margin 行为的术语。它们分别指 margin 在不同场景下的特殊表现。
解决方案：
针对 margin 塌陷和合并的现象，有以下几种解决方案：
overflow 属性为 auto 或 hidden）可以防止父子元素间的 margin 合并。::before 或 ::after），并为其添加 display: inline-block; 属性来防止兄弟元素间的 margin 塌陷。了解 margin 塌陷和合并现象以及如何解决这些问题可以帮助你更好地控制布局和元素间距。
使用 CSS 创建一个三角形的常见方法是利用边框（border）属性。具体操作如下：
div），这样它的内容区域将不占据任何空间。以下是一个创建向上的三角形的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
在这个示例中，我们创建了一个名为 .triangle 的 div 元素。我们将其宽度和高度设置为 0，然后为其添加了左、右和底边框。左右边框设置为透明，底边框设置为红色。这将创建一个向上的红色三角形。
要在屏幕上绘制一条 0.5px 的线，可以使用 CSS 的伪元素 ::before 或 ::after，并设置它们的尺寸和缩放（scale）。以下是一个绘制 0.5px 水平线的示例：
.half-pixel-line {
position: relative;
display: inline-block;
width: 100%;
height: 1px;
}
.half-pixel-line::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background-color: black;
transform-origin: left top;
transform: scaleY(0.5);
}
视差滚动效果（Parallax Scrolling）是一种视觉设计技巧，通过在页面滚动时以不同速度移动前景和背景元素，从而产生深度感和动态效果。这种效果可以使网页看起来更有趣、更具吸引力。
视差滚动效果的原理在于，当用户滚动页面时，页面上的不同元素（例如前景、背景、文字等）以不同的速度移动。这些速度差使得靠近观察者的元素（前景）看起来移动得更快，而远离观察者的元素（背景）看起来移动得更慢。这种相对运动产生了一种错觉，使用户感觉到页面的不同部分之间有深度关系，从而增强了视觉体验。
要实现视差滚动效果，可以使用以下方法之一：
background-attachment 属性设置为 fixed。这种方法简单易实现，但仅适用于背景图像，并且在某些浏览器或设备上可能存在兼容性问题。需要注意的是，过多或不合适的视差滚动效果可能会导致页面性能下降、用户体验受损，因此在实现视差滚动效果时要保持适度。