CSS
CSS 盒模型
W3C 标准盒模型：
width/height = content。IE 盒模型：
width/height = content + padding + border。通过修改元素的
box-sizing属性来改变元素的盒模型。
CSS 选择符
- id 选择器（#myid）
- 类选择器（.myclassname）
- 标签选择器（div, h1 ~ h6, p）
- 后代选择器（h1 p）
- 相邻后代选择器（子）选择器（ul > li）
- 兄弟选择器（li ~ a）
- 相邻兄弟选择器（li + a）
- 属性选择器（a[rel="external"]）
- 伪类选择器（a:hover，li:nth-child）
- 伪元素选择器（a::before，a::after）
- 通配符选择器（*）
CSS 属性继承
以下属性会默认从父元素继承：
- 字体相关：
font-size、font-family、font-weight等 - 文本相关：
color、text-align、direction等 - 列表样式：
list-style及其子属性 - 表格属性：
border-collapse、empty-cells等 - 光标样式：
cursor - 可见性：
visibility
大多数盒模型、定位、背景等属性不会自动继承。可使用 inherit 强制让它们继承父元素的同名属性值。
示例：
p {
background-color: inherit; /* 让 <p> 继承父元素的背景色 */
}CSS 优先级算法
- 标签内选择符
x 0 0 0（1000） - ID 选择符
0 x 0 0（100） - class 选择符/属性选择符/伪类选择符
0 0 x 0（10） - 元素和伪元素选择符
0 0 0 x（1）
CSS3 新增的伪类整理
结构伪类（基于元素位置）：
:nth-child(n)：选中父元素下的第n个子元素。:nth-last-child(n)：从后数，选中父元素下的第n个子元素。:first-child：选中父元素下的第一个子元素。:last-child：选中父元素下的最后一个子元素。:only-child：如果elem是父元素下唯一的子元素，则选中它。
类型伪类（基于元素类型）：
:nth-of-type(n)：选中父元素下第n个elem类型元素。:first-of-type：选中父元素下第一个elem类型元素。:last-of-type：选中父元素下最后一个elem类型元素。:only-of-type：选中父元素下唯一的elem类型元素。
内容与状态伪类：
:empty：选中不包含任何子元素或内容的元素。:target：匹配当前 URL 片段（#id）指向的目标元素。:not(selector)：选中不匹配selector的所有元素。
表单相关伪类：
:enabled：选中可用的表单控件。:disabled：选中被禁用的表单控件。:checked：选中已勾选的单选框或复选框。
display 取值及作用
常见值：
none：隐藏元素，并从文档流中移除，不占据空间。block：块级元素，独占一行，可设置宽高，默认宽度撑满父元素。inline：行内元素，内容决定宽度，不可设置宽高，不换行显示。inline-block：类似inline，但可以设置宽高，仍然同行显示。list-item：像块级元素一样显示，并带有列表标记。table：元素表现得像<table>，其子元素需符合表格结构，如tr、td。
其他值（特殊布局）：
flex/inline-flex：启用弹性布局，子元素可根据规则动态排列。grid/inline-grid：启用网格布局，允许子元素按行列分布。contents：移除自身，但保留子元素在文档流中的位置。inherit：从父元素继承display值。
CSS3 新特性
- 新增 CSS 选择器：例如，
:not(.input)选中所有没有input类的元素。 - 圆角（
border-radius）：border-radius: 50%：实现圆形或圆角效果，可用于盒模型的元素，特别是图像和按钮等。 - 多列布局（Multi-column layout）：使用
column-count、column-gap等属性，可以轻松实现文本或内容的多列排版。 - 阴影和反射：
box-shadow为元素添加阴影效果、text-shadow为文字添加阴影效果、reflect为元素创建反射效果。 - 文字装饰（
text-decoration）：对文字进行装饰，支持下划线、删除线等样式。 - 线性渐变（
gradient）：使用linear-gradient实现颜色渐变效果，不需要图像文件。 - 变换（
transform）：可用于旋转、缩放、倾斜、平移元素。 - 动画（
@keyframes和animation）：通过@keyframes定义动画，并结合animation属性为元素添加动态效果。 - 多背景：一个元素可以使用多个背景图像。
CSS3 弹性布局 (Flexbox)
Flexbox（弹性布局）是 CSS3 引入的一种布局模型，用来在容器内为子元素提供最大的灵活性，能够实现复杂的布局，减少使用浮动、定位等传统布局方法的需要。
1. 容器和项目
- 容器（Flex Container）：设置为
display: flex或display: inline-flex的元素，称为“弹性容器”。容器的子元素称为“弹性项目”。 - 项目（Flex Items）：容器的子元素，默认沿主轴排列。
2. 容器上的属性
flex-direction：定义主轴的方向，决定项目的排列方式。
可选值：row（默认）：沿水平方向，从左到右排列。row-reverse：沿水平方向，从右到左排列。column：沿垂直方向，从上到下排列。column-reverse：沿垂直方向，从下到上排列。
flex-wrap：定义如果项目溢出容器时是否换行。
可选值：nowrap（默认）：所有项目排列在一条轴线上，不换行。wrap：项目换行，第一行项目从左到右，第二行从左到右依此类推。wrap-reverse：项目换行，第二行从右到左排列。
flex-flow：flex-direction和flex-wrap的简写。默认值为row nowrap。
示例：css.container { flex-flow: column wrap; }justify-content：定义项目在主轴上的对齐方式。
可选值：flex-start（默认）：项目靠主轴起始位置对齐。flex-end：项目靠主轴结束位置对齐。center：项目居中对齐。space-between：项目之间均匀分布，第一个项目位于起始位置，最后一个项目位于结束位置。space-around：项目之间均匀分布，项目两侧的空隙相等。
align-items：定义项目在交叉轴上的对齐方式。
可选值：stretch（默认）：项目拉伸以填满交叉轴。flex-start：项目靠交叉轴起始位置对齐。flex-end：项目靠交叉轴结束位置对齐。center：项目在交叉轴上居中对齐。baseline：项目基线对齐。
align-content：定义多行项目的对齐方式。只有当容器中有多行项目时，才会生效。
可选值：flex-start、flex-end、center、space-between、space-around、stretch。
3. 项目上的属性
order：定义项目的排列顺序，默认为0。数值越小，项目排列越靠前。
示例：css.item { order: 1; /* 设置顺序 */ }flex-grow：定义项目的放大比例，默认为0（即如果有剩余空间，项目不会放大）。
示例：css.item { flex-grow: 2; /* 放大比例为2 */ }flex-shrink：定义项目的缩小比例，默认为1（即如果空间不足，项目会缩小）。
示例：css.item { flex-shrink: 1; /* 缩小比例为1 */ }flex-basis：定义在分配多余空间之前，项目占据的主轴空间。默认为auto。
示例：css.item { flex-basis: 200px; /* 设置项目的初始宽度 */ }flex：flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto。
示例：css.item { flex: 1; /* flex-grow: 1; flex-shrink: 1; flex-basis: 0; */ }align-self：允许单个项目在交叉轴上的对齐方式与其他项目不同。可覆盖align-items属性。
可选值：auto（默认）：继承容器的align-items属性。flex-start、flex-end、center、baseline、stretch。
CSS3 网格布局（Grid Layout）
CSS Grid Layout（网格布局）是 CSS3 引入的另一种强大布局系统，允许在二维（水平和垂直）空间中控制元素的排列，能够比传统的布局方法（如 Flexbox）提供更多的控制和灵活性。
1. 网格容器和网格项
- 网格容器（Grid Container）：通过设置
display: grid或display: inline-grid来定义一个网格容器。 - 网格项（Grid Items）：网格容器内的直接子元素，自动成为网格项。
2. 网格容器的主要属性
这些属性设置在网格容器上，控制整个网格的布局。
display: grid：启用网格布局。css.container { display: grid; }grid-template-columns：定义网格容器的列宽。
该属性接受多个值（列的宽度），用空格分隔。
示例：css.container { grid-template-columns: 100px 200px 300px; /* 三列，分别为100px、200px、300px */ grid-template-columns: repeat(3, 1fr); /* 三列，每列占等分 */ }grid-template-rows：定义网格容器的行高。
示例：css.container { grid-template-rows: 100px 200px; }grid-template-areas：通过命名网格区域来定义布局结构，通常与grid-template-columns和grid-template-rows配合使用。
示例：css.container { grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-template-areas: "header header" "main sidebar" "footer footer"; }grid-gap/gap：定义网格项之间的间距，可以设置grid-row-gap和grid-column-gap分别控制行和列的间距。
示例：css.container { gap: 10px; /* 行和列之间的间距 */ }grid-auto-rows：定义自动生成行的高度。
示例：css.container { grid-auto-rows: 100px; }grid-auto-columns：定义自动生成列的宽度。
示例：css.container { grid-auto-columns: 200px; }
3. 网格项的主要属性
这些属性用于控制网格项（即容器的子元素）在网格中的行为。
grid-column-start/grid-column-end：定义网格项在列方向上的起始位置和结束位置。
示例：css.item { grid-column-start: 1; grid-column-end: 3; }grid-row-start/grid-row-end：定义网格项在行方向上的起始位置和结束位置。
示例：css.item { grid-row-start: 1; grid-row-end: 2; }grid-column：grid-column-start和grid-column-end的简写形式。
示例：css.item { grid-column: 1 / 3; /* 从第1列开始，到第3列结束 */ }grid-row：grid-row-start和grid-row-end的简写形式。
示例：css.item { grid-row: 1 / 2; /* 从第1行开始，到第2行结束 */ }grid-area：将grid-column-start、grid-column-end、grid-row-start和grid-row-end的值合并为一个简写属性。
示例：css.item { grid-area: 1 / 1 / 2 / 3; /* 从第1行第1列开始，到第2行第3列结束 */ }
4. 自适应布局
通过使用 fr 单位，网格可以实现灵活的自适应布局，fr 代表网格容器剩余空间的分配。
fr单位：一个比例单位，用于分配可用空间。
示例：css上述代码表示容器有三列，第一列和第三列各占总宽度的 1/4，第二列占 2/4。.container { grid-template-columns: 1fr 2fr 1fr; }
BFC
BFC（Block Formatting Context，块级格式化上下文）用来描述一个元素在页面布局中如何生成和处理其内部元素的布局。形成 BFC 后，元素内部的布局不会影响外部的布局，外部的布局也不会影响到 BFC 内部的元素。
BFC 的作用
- 隔离性：BFC 中的元素布局不受外部元素影响，反之亦然。这意味着 BFC 内部的浮动、定位等样式不会渗透到外部。
- 清除浮动：BFC 的一个典型应用是清除浮动，避免浮动元素影响到其他元素的布局。
- 防止元素重叠：BFC 的区域会防止元素间出现重叠，尤其是在使用了负的
margin时。
创建 BFC 的条件
根元素或包含根元素的元素：
HTML 文档的根元素（<html>）默认形成一个 BFC。浮动元素：
如果一个元素的float属性不为none，如float: left或float: right，则该元素会形成一个 BFC。
示例：css.box { float: left; }绝对定位元素：
使用position: absolute或position: fixed的元素会创建一个新的 BFC。
示例：css.box { position: absolute; top: 10px; left: 20px; }display属性为某些值的元素：
当元素的display属性设置为以下值之一时，也会创建一个 BFC：
display: inline-blockdisplay: flexdisplay: inline-flexdisplay: table-celldisplay: table-caption
示例：css.box { display: flex; }
overflow属性不为visible：
如果元素的overflow属性设置为hidden、auto或scroll，则该元素会形成一个 BFC。
示例：css.box { overflow: auto; }
IFC
IFC（Inline Formatting Context，行级格式化上下文） 用于控制行内元素的排列方式。与 BFC（块级格式化上下文）不同，IFC 主要用于处理 水平方向上的布局。
IFC 的特点
- 行内盒子水平排列：在 IFC 内部，行内元素会沿 水平方向 依次排列，直到当前行无法容纳更多的内容时，会自动换行。
- 行高由最高的内联盒子决定：IFC 的高度由内部 最高的行内盒子 决定，而不会受
height属性的直接影响。 - 不影响外部布局：IFC 内部的布局不会影响到外部的块级盒子（block-level elements），类似于 BFC 的隔离特性。
创建 IFC 的条件
display: inline（默认值，如span、a、b、strong等）display: inline-blockdisplay: inline-table
元素水平和垂直居中
Flexbox 布局
父容器使用 Flexbox 布局实现子元素的水平和垂直居中。
css.container { display: flex; justify-content: center; /* 实现水平居中 */ align-items: center; /* 实现垂直居中 */ }结合 Flexbox 和
margin: auto;属性实现水平和垂直居中。css.container { display: flex; } .child { margin: auto; /* 同时实现水平和垂直居中 */ }
Grid 布局
父容器使用 Grid 布局实现子元素的水平和垂直居中。
.container {
display: grid;
place-items: center; /* 同时实现水平和垂直居中 */
}Table 属性
使用 Table 属性实现水平和垂直居中。
.container {
width: 100px;
height: 100px;
display: table-cell;
vertical-align: middle; /* 实现垂直居中 */
text-align: center; /* 实现水平居中 */
}
.child {
width: 20px;
height: 20px;
display: inline-block;
}子绝父相
子绝父相表示：子元素设置绝对定位，父容器设置相对定位。
不知道子元素和父容器的高度
使用 position 和 transform 属性可以同时实现水平和垂直居中。
.container {
position: relative;
}
.child {
position: absolute;
top: 50%; /* 实现垂直居中 */
left: 50%; /* 实现水平居中 */
transform: translate(-50%, -50%);
}知道子元素和父容器的高度
使用 position 和 margin 属性同时实现水平和垂直居中。
.container {
position: relative;
height: 100vh;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto; /* 同时实现水平和垂直居中 */
}line-height
如果子元素是单行文本，可以使用 line-height 来实现垂直居中，这个方法适用于只包含单行文本的元素。
.container {
height: 100px;
text-align: center; /* 实现水平居中 */
line-height: 100px; /* 实现垂直居中 */
}清除浮动
浮动（Float）的特点
- 浮动元素可以左右移动，直到遇到另一个浮动元素或其包含块的边界。
- 浮动元素会 脱离普通文档流，不再影响块级元素的正常布局，但仍然会影响 行内元素 的排列。
- 当一个 父元素包含浮动子元素时，如果父元素没有显式的高度，就可能会发生 高度塌陷（即父元素的高度被浮动元素忽略）。
由于浮动元素脱离文档流，可能会导致以下布局问题：
- 高度塌陷问题
- 影响后续元素布局
清除浮动的方法：
使用
clear属性：clear属性用于 阻止元素旁边出现浮动元素，从而让元素正常显示。css.clearfix { clear: both; }让父元素形成 BFC
使用伪元素（推荐）
::after：使用::after伪元素可以在 父元素内部 创建一个不可见的块级元素，清除浮动。css.clearfix::after { content: ""; display: table; clear: both; }
CSS 性能优化
CSS 性能优化是一个综合的过程，需要结合具体项目的特点和需求来制定相应的优化策略。
合并和压缩文件
- 将多个 CSS 文件合并为一个，减少 HTTP 请求次数。
- 使用压缩工具（例如 UglifyCSS、cssnano 等）来压缩 CSS 文件，减小文件大小。
使用字体图标或 SVG
- 替代大量小图像的图标使用字体图标或 SVG 图像，以减少 HTTP 请求。
精简选择器
- 避免使用过于复杂的选择器，因为它们可能导致性能下降，简单的选择器通常更有效。
避免使用 !important
- 避免使用
!important规则，以防止样式覆盖的混乱。
- 避免使用
减少使用嵌套
- 减少嵌套层级，因为深层次的嵌套可能会增加渲染时间。
优化图片
- 使用 CSS Sprites 来减少多个小图标的请求（合并图片）。
- 使用合适大小的图片，不要使用比实际需要更大的图像。
启用浏览器缓存
- 设置适当的缓存头，以确保浏览器能够缓存 CSS 文件，减少后续加载时的请求。
使用缩写
- 使用缩写属性，例如
margin、padding等，以减小 CSS 文件大小。
- 使用缩写属性，例如
使用 CSS 动画和过渡
- 尽量使用 CSS 动画和过渡，而不是 JavaScript 动画，以利用浏览器的硬件加速功能。
异步加载 CSS
- 将不同页面或组件的 CSS 文件拆分为不同的文件，并根据需要异步加载，以避免不必要的资源加载。
使用字体子集
- 如果使用自定义字体，考虑仅包含实际需要的字符，以减小字体文件大小。
减少重绘和回流
- 避免频繁的样式更改，以减少页面的重绘和回流。
使用 Flexbox 和 Grid
- 使用 Flexbox 和 Grid 布局代替传统的布局方法，它们通常更有效。
优化移动端样式
- 使用媒体查询和适应性布局，确保网站在移动设备上有良好的性能和用户体验。
常见的元素隐藏方式
使用
display: none;隐藏元素，渲染树不会包含该渲染对象，该元素不会在页面中占据位置，也不会响应绑定的监听事件。使用
visibility: hidden;隐藏元素，元素在页面中仍占据空间，不会响应绑定的监听事件。使用
opacity: 0;将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
通过
z-index负值，来使其他元素遮盖住该元素，以此来实现隐藏。通过
clip/clip-path元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。通过
transform: scale(0, 0);来将元素缩放为 0，以此来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。