HTML CSS八股 - 教程
一.常见的块级元素和行内元素，及区别
块级元素：
div h1-h6 p ul ol li form blockquote还有header footer main section等HTML5语义化标签
特点：1.独占一行 2.可设置宽高 3.默认宽度为父元素的100%
行内元素：
<span> <a> <strong> <em> <img> <input> <label> <br>
特点：1.同行显示 2.宽高无效（默认由内容撑开）
二.defer和async的区别
在HTML中，defer和async都是用于控制外部脚本(<script src="...">)加载和执行行为的属性，主要解决脚本加载与HTML解析之间的阻塞问题。
defer(延迟)
1.加载与执行：脚本下载过程中，HTML解析继续进行（不阻塞）；但脚本会等待整个HTML解析完成后（触发DOMContentLoaded事件前）才执行
2.顺序问题：多个带defer的脚本，严格按照他们在HTML中出现顺序执行
3.使用场景：依赖其他脚本的脚本如库文件之后的业务代码），或需要操作 DOM 的脚本（确保执行时 DOM 已完整）。
<script src="library.js" defer></script>
<script src="app.js" defer></script>
<!-- 一定先执行library.js，再执行app.js（即使app.js下载更快） -->
async(异步)
1.加载与执行：脚本下载过程中，HTML解析继续进行（不阻塞）；一旦脚本下载完成，立即暂停 HTML 解析，执行脚本，执行完毕后再恢复解析。
2.顺序问题：多个带async的脚本，执行顺序与它们在 HTML 中的位置无关，仅取决于下载速度（先下载完的先执行）。
3.使用场景：独立的第三方脚本（如统计分析、广告代码），不依赖其他脚本，也不被其他脚本依赖。
<script src="script1.js" async></script>
<script src="script2.js" async></script>
<!-- 可能先执行script2.js（如果它下载更快） -->
默认情况
不写async/defer的话，脚本下载时会阻塞HTML解析，多个脚本按顺序下载并执行（前一个脚本执行完才会下载下一个），这种方式会导致页面加载变慢，尤其是脚本体积大或网络慢时，因此建议优先使用async/defer
三.CSS选择器的优先级
!important > 内联样式（style属性）> id选择器 > 类选择器 > 标签选择器 > 通配符（*） 以及继承的样式
四.解释BFC
BFC（Block Formatting Context，块级格式化上下文）是 CSS 中一个重要的渲染概念，它决定了元素如何对其内容进行布局，以及与其他元素之间的关系和相互作用。
BFC 的特性
隔离性：BFC 内部的元素布局不会影响外部元素，反之亦然
垂直方向排列：BFC 内部的块级元素会在垂直方向上一个接一个地排列
边距折叠：BFC 内部的相邻块级元素之间的垂直边距会发生折叠，但不同 BFC 之间的元素边距不会折叠
包含浮动：BFC 会包含其内部的浮动元素（可以用来清除浮动）
区域限制：BFC 的区域不会与浮动元素重叠
如何创建 BFC
满足以下条件之一的元素会创建一个 BFC：
根元素（
<html>）浮动元素（
float值不为none）绝对定位元素（
position为absolute或fixed）行内块元素（
display: inline-block）表格单元格（
display: table-cell）表格标题（
display: table-caption）匿名表格单元格元素（
display: table、table-row等）overflow值不为visible的块元素（hidden、auto、scroll）display: flow-root（专门创建 BFC 的属性值，无副作用）contain: layout、content或paint的元素弹性元素（
display: flex或inline-flex的直接子元素）网格元素（
display: grid或inline-grid的直接子元素）
BFC 的应用场景
解决浮动导致的父元素高度塌陷问题
防止相邻元素的垂直边距折叠
避免元素被浮动元素覆盖
创建自适应两栏布局
例如，当父元素包含浮动子元素时，父元素高度会塌陷，这时可以给父元素添加overflow: hidden（创建 BFC）来包含浮动元素，从而解决高度塌陷问题。
五.CSS的单位和响应式布局
单位
1.绝对单位（固定大小，不随环境改变）
px（像素）：最常用的单位，对应屏幕上的物理像素点pt（点）：主要用于印刷，1pt = 1/72 英寸cm/mm（厘米 / 毫米）：物理单位，多用于打印样式in（英寸）：1in = 2.54cm
2.相对单位（根据上下文动态变化）
em：相对于父元素的字体大小（font-size）例：父元素
font-size: 16px，子元素2em= 32px
rem：相对于根元素（<html>）的字体大小例：
html { font-size: 16px }，元素2rem= 32px
%：相对于父元素对应属性的百分比宽度百分比相对父元素宽度，高度百分比相对父元素高度
vw/vh：视口宽度 / 高度的 1%1vw= 视口宽度的 1%，1vh= 视口高度的 1%
vmin/vmax：视口最小 / 最大尺寸的 1%竖屏时
vmin=vw，横屏时vmin=vh
ch：相对于数字 "0" 的宽度ex：相对于小写字母 "x" 的高度
响应式布局
响应式布局的核心是使页面在不同设备（手机、平板、桌面）上都能良好显示
必须在head设置视口元标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1.媒体查询（@media）
根据不同屏幕尺寸应用不同样式，是响应式布局的基础
/* 移动设备优先：默认样式为移动版 */
.container {width: 100%;padding: 10px;
}
/* 平板设备（≥768px） */
@media (min-width: 768px) {.container {width: 90%;max-width: 800px;margin: 0 auto;}
}
/* 桌面设备（≥1200px） */
@media (min-width: 1200px) {.container {max-width: 1140px;padding: 20px;}
}2.流式布局（Fluid Layout）
使用相对单位（%、vw等）代替固定单位，使元素随屏幕尺寸自动调整
/* 图片自适应 */
img {max-width: 100%;height: auto; /* 保持宽高比 */
}
/* 流式网格 */
.col {float: left;width: 50%; /* 两列布局，随屏幕宽度变化 */padding: 0 15px;
}3.弹性布局（Flexbox）
通过display: flex实现灵活的响应式布局
.row {display: flex;flex-wrap: wrap; /* 屏幕较小时自动换行 */
}
.col {flex: 1; /* 平均分配宽度 */min-width: 250px; /* 最小宽度，避免过窄 */
}4.网格布局（Grid）
二维网格系统，适合复杂的响应式布局
.container {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));/* 自动适应列数，每列最小250px */gap: 20px;
}5.响应式图片
使用srcset和sizes属性根据屏幕尺寸加载不同图片
六.position属性和意义
1.position:static(默认值)
元素遵循正常的文档流，按照 HTML 结构顺序排列
不能使用top、right、bottom、left和z-index属性调整位置
2.position:relative(相对定位)
元素相对于其在正常文档流中的原始位置进行偏移
仍保留在文档流中，原始位置会被占据（不会脱离文档流）
通过top/right/bottom/left设置偏移量（相对于自身原始位置）
可使用z-index调整层级
3.position:absolute(绝对定位)
元素相对于最近的已定位祖先元素（非static）进行定位
完全脱离文档流，原始位置不再保留（后面元素会填补其位置）
若没有已定位的祖先，会相对于根元素（<html>）或视口定位
通过top/right/bottom/left设置偏移量
可使用z-index调整层级
应用场景：弹窗、悬浮元素、精确控制元素位置
4.position:fixed(固定定位)
元素相对于浏览器视口（viewport）进行定位
完全脱离文档流，不随页面滚动而移动
通过top/right/bottom/left设置相对于视口的位置
可使用z-index调整层级
5.position:sticky(粘性定位)
结合了relative和fixed的特性，在滚动时 "粘" 在指定位置
正常情况下遵循文档流（类似relative）
当滚动到指定阈值时，会固定在视口（类似fixed）
必须设置top/right/bottom/left中的至少一个才会生效
七.display的属性
display:block
display:inline
display:inline-block
display:none
display:flex
display:grid（网格布局）
display:table/table-cell(表格相关)
display:contents
display:flow-root
display:list-item
display:run-in
八.flex布局的相关属性
display:flex
主轴方向flex-direction:row/row-reverse/column/column-reverse
是否换行flex-wrap:nowrap/wrap/wrap-reverse
复合属性：flex-flow
主轴对齐方式：justify-content:。。。
侧轴对齐方式：align-items:。。。
多行对齐方式：align-content:。。。
flex-grow（放大比例）
flex-shrink（缩小比例）
flex-basis（基准尺寸）
flex（复合属性）
align-self（单独对齐）
order（排列顺序）
九.如何实现两栏布局，三栏布局
两栏布局
1.flex布局
2.浮动+BFC布局
3.grid布局
三栏布局
1.flex布局
2.grid布局
3.圣杯布局（传统方案）
4.双飞翼布局（优化圣杯布局）