HTML CSS八股

一.常见的块级元素和行内元素，及区别

块级元素：

div h1-h6 p ul ol li form blockquote还有header footer main section等HTML5语义化标签

特点：1.独占一行 2.可设置宽高 3.默认宽度为父元素的100%

行内元素：

特点：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>

async(异步)

1.加载与执行：脚本下载过程中，HTML解析继续进行（不阻塞）；一旦脚本下载完成，立即暂停 HTML 解析，执行脚本，执行完毕后再恢复解析。

2.顺序问题：多个带async的脚本，执行顺序与它们在 HTML 中的位置无关，仅取决于下载速度（先下载完的先执行）。

3.使用场景：独立的第三方脚本（如统计分析、广告代码），不依赖其他脚本，也不被其他脚本依赖。

<script src="script1.js" async></script>

<script src="script2.js" async></script>

默认情况

不写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）

根据不同屏幕尺寸应用不同样式，是响应式布局的基础

javascript 复制代码

/* 移动设备优先：默认样式为移动版 */
.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等）代替固定单位，使元素随屏幕尺寸自动调整

javascript 复制代码

/* 图片自适应 */
img {
  max-width: 100%;
  height: auto; /* 保持宽高比 */
}

/* 流式网格 */
.col {
  float: left;
  width: 50%; /* 两列布局，随屏幕宽度变化 */
  padding: 0 15px;
}

3.弹性布局（Flexbox）

通过display: flex实现灵活的响应式布局

javascript 复制代码

.row {
  display: flex;
  flex-wrap: wrap; /* 屏幕较小时自动换行 */
}

.col {
  flex: 1; /* 平均分配宽度 */
  min-width: 250px; /* 最小宽度，避免过窄 */
}

4.网格布局（Grid）

二维网格系统，适合复杂的响应式布局

javascript 复制代码

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  /* 自动适应列数，每列最小250px */
  gap: 20px;
}

5.响应式图片

使用srcset和sizes属性根据屏幕尺寸加载不同图片

javascript 复制代码

<img 
  src="small.jpg" 
  srcset="medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 768px) 100vw, (max-width: 1199px) 50vw, 33vw"
  alt="响应式图片"
>

六.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.双飞翼布局（优化圣杯布局）

一.常见的块级元素和行内元素，及区别

块级元素：

行内元素：

二.defer和async的区别

defer(延迟)

async(异步)

默认情况

三.CSS选择器的优先级

四.解释BFC

BFC 的特性

如何创建 BFC

BFC 的应用场景

五.CSS的单位和响应式布局

单位

响应式布局

1.媒体查询（@media）

2.流式布局（Fluid Layout）

3.弹性布局（Flexbox）

4.网格布局（Grid）

5.响应式图片

六.position属性和意义

1.position:static(默认值)

2.position:relative(相对定位)

3.position:absolute(绝对定位)

4.position:fixed(固定定位)

5.position:sticky(粘性定位)

七.display的属性

八.flex布局的相关属性

flex-grow（放大比例）

flex-shrink（缩小比例）

flex-basis（基准尺寸）

flex（复合属性）

align-self（单独对齐）

order（排列顺序）

九.如何实现两栏布局，三栏布局

两栏布局

三栏布局

十.实现水平垂直居中的方法

Flexbox 布局

Grid 布局

绝对定位 + transform：子绝父相

绝对定位 + margin 负值

表格布局

使用 margin: auto（绝对定位）

文本内容居中

`flex-grow`（放大比例）

`flex-shrink`（缩小比例）

`flex-basis`（基准尺寸）

`flex`（复合属性）

`align-self`（单独对齐）

`order`（排列顺序）