CSS篇
CSS盒模型
content，padding，border，margin
盒模型类型
标准盒模型：margin+ border+padding +content
IE盒模型: margin + content 使用box-sizing:border-box
控制盒模型模式:box-sizing：content-box
CSS选择器的优先级：
继承性，层叠性，优先级：写CSS写样式时，给同一个元素添加多个样式，谁的权重高就显示谁的样式
标签选择器，
！important > 行内样式style =“” > id > 类class > 标签label > 全局选择器*
隐藏元素的方法：
display:none，元素在页面上消失，不占据空间
opacity:0，设置了元素的透明度，透明度为0，占据空间位置
visibility:hidden 让元素消失，占据空间位置
px和rem的区别是什么
px是像素，绝对单位长度
rem相对单位长度，相对于html根节点的font-size的值改变
1rem = 16px;
重绘和重排的区别？
重排：布局引擎会根据所有样式计算盒模型在页面上的位置和大小。
重绘：对样式进行修改，没有修改位置，大小，浏览器根据盒模型的特性进行绘制
浏览器的渲染机制
html生成dom树，css生成样式树，dom树和样式树结合渲染（绘制）进行display显示
DOM修改大小位置后就会重排，例如增加div，影响了布局
对DOM的样式增加了属性，没有增加新的dom，不用计算元素的几何属性，就会进行重绘，比如只对颜色进行了修改，就只会重绘而不会重排。
让元素垂直水平居中的的方式
定位+margin width 和 height 写为父元素的一半，margin：auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Positioning and Margin Auto Centering Example</title>
<style>
/* 父元素样式 */
.parent {
/* 设置父元素的尺寸 */
width: 100%; /* 可以根据需要设置具体宽度 */
height: 500px; /* 示例高度 */
/* 设置背景颜色以便观察 */
background-color: #f0f0f0;
/* 设置定位属性 */
position: relative; /* 可以是relative或absolute等，取决于具体布局需求 */
}
/* 子元素样式 */
.child {
/* 子元素的宽度和高度设置为父元素的一半，这里仅为示例 */
width: 50%; /* 父元素宽度的一半 */
height: 250px; /* 父元素高度的一半，仅为示例 */
/* 设置背景颜色以便观察 */
background-color: red;
/* 设置定位属性 */
position: absolute;
/* 设置外边距为自动，实现居中 */
margin: auto;
/* 设置子元素的定位位置 */
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<!-- 父元素 -->
<div class="parent">
<!-- 子元素 -->
<div class="child"></div>
</div>
</body>
</html>
定位+transform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform Translate Example</title>
<style>
/* 设置body的样式，让整个页面没有默认的外边距和内边距 */
body {
margin: 0;
padding: 0;
/* 设置body的高度为100vh，即视口高度的100%，这样可以方便我们观察居中效果 */
height: 100vh;
/* 设置背景颜色为浅灰色，以便更好地看到居中的方块 */
background-color: #f0f0f0;
/* 设置body为相对定位，这样它的子元素可以基于它进行绝对定位 */
position: relative;
}
/* 设置方块的样式 */
.box {
/* 设置方块的宽度和高度 */
width: 100px;
height: 100px;
/* 设置方块的背景颜色为红色 */
background-color: red;
/* 设置方块为绝对定位 */
position: absolute;
/* 将方块的左上角定位到距离body顶部50%、左侧50%的位置 */
top: 50%;
left: 50%;
/* 通过transform属性将方块向左平移自身宽度的一半，向上平移自身高度的一半，实现居中 */
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<!-- 创建一个方块元素 -->
<div class="box"></div>
</body>
</html>
flex布局实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Centering Example</title>
<style>
/* 设置body的样式，让整个页面没有默认的外边距和内边距 */
body {
margin: 0;
padding: 0;
/* 设置body的高度为100vh，即视口高度的100%，这样可以方便我们观察居中效果 */
height: 100vh;
/* 设置背景颜色为浅灰色，以便更好地看到居中的方块 */
background-color: #f0f0f0;
/* 使用flex布局 */
display: flex;
/* 使子元素在交叉轴（垂直方向）上居中 */
align-items: center;
/* 使子元素在主轴（水平方向）上居中 */
justify-content: center;
}
/* 设置方块的样式 */
.box {
/* 设置方块的宽度和高度 */
width: 100px;
height: 100px;
/* 设置方块的背景颜色为红色 */
background-color: rgba(71, 11, 210, 0.82);
}
</style>
</head>
<body>
<!-- 创建一个方块元素 -->
<div class="box"></div>
</body>
</html>
grid布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout Centering Example</title>
<style>
/* 父元素样式 */
.container {
/* 设置容器的高度，这里设置为视口高度的100%，以便观察居中效果 */
height: 100vh;
/* 设置背景颜色以便观察 */
background-color: #f0f0f0;
/* 使用grid布局 */
display: grid;
/* 设置网格的行和列，这里使用fr单位表示分数，1fr表示占据可用空间的1份 */
grid-template-rows: 1fr;
grid-template-columns: 1fr;
/* 使子元素在网格中居中 */
place-items: center;
}
/* 子元素样式 */
.item {
/* 设置子元素的宽度和高度 */
width: 200px;
height: 200px;
/* 设置背景颜色以便观察 */
background-color: red;
}
</style>
</head>
<body>
<!-- 网格容器 -->
<div class="container">
<!-- 网格项 -->
<div class="item"></div>
</div>
</body>
</html>
table布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Layout Centering Example</title>
<style>
/* 表格样式 */
.table-layout {
/* 设置表格的宽度和高度，这里设置为100%和视口高度的100%，以便观察居中效果 */
width: 100%;
height: 100vh;
/* 设置表格的布局方式为表格布局 */
display: table;
/* 设置背景颜色以便观察 */
background-color: #f0f0f0;
}
/* 表格行样式 */
.table-row {
/* 设置表格行的布局方式为表格行 */
display: table-row;
}
/* 表格单元格样式 */
.table-cell {
/* 设置表格单元格的布局方式为表格单元格 */
display: table-cell;
/* 使内容在单元格中垂直居中 */
vertical-align: middle;
/* 使内容在单元格中水平居中 */
text-align: center;
}
/* 子元素样式 */
.centered-item {
/* 设置子元素的宽度和高度 */
width: 200px;
height: 200px;
/* 设置背景颜色以便观察 */
background-color: red;
/* 使子元素在单元格中居中显示 */
display: inline-block;
}
</style>
</head>
<body>
<!-- 表格布局容器 -->
<div class="table-layout">
<!-- 表格行 -->
<div class="table-row">
<!-- 表格单元格 -->
<div class="table-cell">
<!-- 需要居中的元素 -->
<div class="centered-item"></div>
</div>
</div>
</div>
</body>
</html>使用表格布局的弊端
资源消耗与下载延迟
表格元素相较于其他HTML标签，往往占用更多的字节数。这会导致页面下载时间延长，进而增加服务器的流量负担。例如，一个复杂的表格布局可能包含大量的
<table>、<tr>、<td>等标签以及相关的属性和嵌套结构，这些冗余的代码在传输过程中会占用更多的带宽，降低页面加载速度，影响用户体验。
渲染效率低下
表格会干扰浏览器渲染引擎的正常渲染流程，从而延缓页面的生成速度。浏览器在解析和渲染表格时，需要花费更多的时间来计算表格的布局和尺寸，特别是对于包含大量数据和复杂结构的表格，这种延迟会更加明显，让用户等待时间变长，影响页面的交互性和响应性。
灵活性不足
一旦表格的设计确定，后期通过CSS对其进行修改和调整的难度较大。表格布局的结构相对固定，其行、列和单元格之间的关系较为复杂，很难像使用Flexbox或Grid布局那样，通过简单的CSS属性修改就能实现布局的灵活变化。例如，若要改变表格中某个单元格的位置或尺寸，可能需要重新调整整个表格的结构，这在维护和更新页面时会带来诸多不便。
搜索引擎优化（SEO）受限
表格布局不利于搜索引擎抓取页面信息，可能会对网站的排名产生负面影响。搜索引擎通常更倾向于抓取结构清晰、语义明确的HTML内容。而表格布局往往包含大量的非语义化标签和复杂的嵌套结构，这会干扰搜索引擎对页面内容的理解和索引。例如，搜索引擎可能难以准确识别表格中哪些内容是重要的标题、哪些是关键的数据等，从而降低页面在搜索结果中的相关性和排名。
推荐使用flex或grid布局，简单高效
css属性哪些可以继承？
CSS特性：继承性，层叠性，优先级
line-height,font,visibility:hidden,list-style可以被继承
在CSS中，padding（内边距）属性是不会被继承的。同样，盒模型的其他组成部分，如margin（外边距）、border（边框）和width/height（宽度/高度）等属性也不会被继承。这些属性都是应用于元素自身的，不会自动传递给子元素。
举例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Inheritance Example with Visibility</title>
<style>
/* 父元素样式 */
.parent {
line-height: 2; /* 设置行高 */
font: 16px Arial, sans-serif; /* 设置字体大小和字体系列 */
visibility: visible; /* 设置可见 */
list-style: square inside; /* 设置列表样式 */
border-spacing: 10px; /* 对于表格，设置边框间距 */
/* 为了更好地展示，给父元素添加一些背景颜色和内边距 */
background-color: #f0f0f0;
padding: 20px;
}
/* 子元素样式 */
.child {
/* 子元素会继承父元素的行高和字体样式 */
/* 这里可以添加一些自己的样式 */
color: blue; /* 设置文本颜色 */
}
/* 表格样式 */
table {
border-collapse: separate; /* 与border-spacing配合使用 */
border-spacing: 10px; /* 设置表格边框间距 */
}
/* 列表样式 */
ul {
/* 列表样式会继承，但这里可以覆盖 */
list-style: disc outside; /* 修改列表样式 */
}
</style>
</head>
<body>
<div class="parent">
这是父元素文本。<br>
<span class="child">这是子元素文本，会继承父元素的行高和字体。</span>
<ul>
<li>列表项1，会继承父元素的列表样式，但这里被覆盖了。</li>
<li>列表项2。</li>
</ul>
<!-- 表格边框间距设置在<table>标签上 -->
<table>
<tr>
<td>表格单元格1</td>
<td>表格单元格2</td>
</tr>
</table>
</div>
</body>
</html>什么是继承性？
父元素设置一些样式，子元素可以拿来使用，被动的生效