css+html面试题1、css盒子居中方法 ✔ 1. margin: auto（块级元素水平居中） ✔ 2. text

1、css盒子居中方法

✔ 1. margin: auto（块级元素水平居中）

✔ 2. text-align center + display inline-block（父子配合）

.parent {
   text-align: center;
 }
 .box {
   display: inline-block;
 }

✔ 3. absolute + transform（经典水平垂直居中）

  .parent {
    position: relative;
  }
 .box {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }

✔ 4. flex 居中

.parent {
    display: flex;
    justify-content: center;  /* 水平 */
    align-items: center;       /* 垂直 */
 }

✔ 5. grid 居中

.parent {
  display: grid;
  place-items: center;
}

2、块级元素和行内元素

块级元素	独占一行，可包含块级和行内元素	`<div>`, `<p>`, `<h1>` ~ `<h6>`, `<section>`, `<article>`

行内元素	只占自身大小，不换行，不能包含块级元素	`<span>`, `<a>`, `<strong>`, `<i>`, `<img>`, `<input>`

行内块元素	既不换行，又可设置宽高	`<img>`, `<button>`, `<input>`, `<select>`

想让某个行内元素换行，或者想让块级元素不占满整行，可以尝试用 display: inline-block; 或 display: flex; 进行调整！

如果问把div放进span中，这种写法不合法，浏览器会把div从span中拆出去，变成并列关系

3、什么是高度塌陷，怎么解决

高度塌陷（又称：父元素塌陷、外边距合并）指的是：

当父元素的高度仅由浮动子元素或绝对定位的子元素决定时，父元素的高度可能会变为 0，导致背景、边框等无法正常显示。
当相邻块级元素的 margin 发生重叠时，也可能导致高度异常。

解决父元素塌陷：

✔ 1. 父级变为BFC

父元素overflow:hidden或者overflow:auto
父元素display: flow-root;更语义化

✔ 2. 清除浮动

clearfix 伪元素,使用 ::after 伪元素清除浮动

<div class="box clearfix">
  <div class="child"></div>
</div>
<style>
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
</style>

新增子元素添加属性clear: both

<div class="box">
  <div class="child"></div>
  <div style="clear: both"></div>
</div>

解决边距重合：

✔ 1.给父元素设置display: flex 或 display: grid

✔ 2.给父元素设置padding-top或者border-top

4、html5是什么，与html的区别

HTML（超文本标记语言）和HTML5都是用于创建网页结构和内容的标记语言，但HTML5是在HTML的基础上进行了扩展和升级。下面是HTML和HTML5之间的一些主要区别：

1、HTML5 引入了语义化标签，提高代码可读性

2、多媒体支持：

🔹 HTML 需要使用 Flash 插件播放音频、视频。

🔹 HTML5 原生支持 <audio> 和 <video>，提高兼容性，减少插件依赖：

<video controls>
    <source src="video.mp4" type="video/mp4">
</video>

<audio controls>
    <source src="audio.mp3" type="audio/mp3">
</audio>

3、表单增强

🔹 HTML 表单类型少，<input> 主要支持 text、password、checkbox 等。

🔹 HTML5 增加了 新的表单类型和属性，提高用户体验，例如type值可以为email、date(选择日期)、tel、number、range(滑动条)、color(选择颜色)

4、更多的api，例如：Canvas、本地存储（localStorage、sessionStorage）、WebSocket、Drag（拖放功能）、History（控制浏览器历史记录）等

5、更好的本地存储

🔹 HTML 仅支持 cookie 存储数据，容量小（4KB），影响页面性能。

🔹 HTML5 新增 localStorage 和 sessionStorage，存储更高效：

6、 HTML5 与 CSS3 深度结合，支持动画、渐变、阴影、响应式设计

5、盒模型

内容区域（Content）：内容区域指的是元素所包含的实际内容，如文本、图像等。其大小由元素的内容决定。
填充区域（Padding）：填充区域是内容区域与边框之间的空白区域。它可用于控制元素内容与边框之间的距离。
边框区域（Border）：边框区域是位于填充区域外部的边框线，用于包围元素的内容和填充。可以设置边框的样式、宽度和颜色。
外边距区域（Margin）：外边距区域是边框区域与周围元素之间的空白区域。它用于控制元素与其他元素之间的距离，增加元素的间距。

6、css引入的方式有哪些，link和@import的区别是什么

✔ CSS 引入方式：link、style、inline、@import

✔ link 是 HTML 标签，页面加载时并行加载，性能好、兼容好

✔ @import 是 CSS 语法，等 CSS 解析完才加载，性能差、兼容差，不推荐用

7、CSS3新特性

✔ 选择器方面：伪类（:nth-child、:not、属性选择器 []）、属性选择器更强

//给所有 div 设置红色，但 **排除 class=active 的 div**
div:not(.active) {
  color: red;
}

//含 disabled 属性的 input
input[disabled] {
    opacity: 0.5;
}
//type=text 的 input 才生效
input[type="text"] {
    border: 1px solid red;
}

✔ 视觉效果：圆角、阴影、渐变、动画、过渡、变形（transform）

✔ 布局方面：flex、grid、媒体查询响应式

8、src 与href的区别

src和href是两个用于引用外部资源的属性

✔ 1、src属性多用于<img>、<script>、<iframe>等元素

src属性是用于指定外部资源的地址，如图像、脚本、框架等。
src属性会将资源作为页面的一部分加载，并且它会阻止解析完整的HTML文档，直到资源加载完成。
当浏览器解析到带有src属性的元素时，会发起对该资源的加载请求。

✔ 2、href属性（用于<a>、<link>等元素）

href属性是用于指定链接的地址，如超链接、样式表等。
href属性定义的资源与当前页面之间是独立的，不会影响页面解析。
当浏览器解析到带有href属性的元素时，不会立即发起请求，而是在需要时才发起请求，例如点击超链接或者解析到时。

9、BFC是什么以及他的作用

块级格式化上下文是浏览器渲染布局中的一种独立的区域/环境，该区域内的元素布局不会影响外部，外部也不会影响内部。

作用:

1、解决浮动元素高度塌陷：

问题：当一个 div 内部全部是浮动元素时，该 div 的高度会塌陷（高度变为 0）。

解决：让 div 形成 BFC，从而包裹住浮动的子元素。BFC 内部的子元素（浮动的 div）不会影响 container，所以 container 能够正确计算高度。

<style>
.container {
  overflow: hidden; /* 触发 BFC */
}

</style>
<div class="container">
  <div class="float-box" style="float: left; width: 100px; height: 100px; background: red;"></div>
</div>

2、阻止元素被浮动元素覆盖：

问题：如果一个普通 div 紧随一个浮动元素，会发生 内容重叠，导致页面错乱。

解决：让 div 形成 BFC，避免受浮动影响。BFC 区域不会被浮动元素影响，所以 text 能正常显示。

<div class="float-box" style="float: left; width: 100px; height: 100px; background: red;"></div>
<div class="text">我是文本，我不会被浮动元素覆盖</div>


<style>
.text {
  overflow: hidden; /* 触发 BFC */
}
</style>

3、防止外边距折叠

问题：两个相邻 div 的 margin 会 重叠（合并） ，导致间距小于预期。

解决：让 div 形成 BFC，阻止 margin 合并。BFC 使 .box2 成为独立的布局区域，不与 .box1 共享 margin。

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

<style>
.box1, .box2 {
  margin: 20px;
}
.box2 {
  overflow: hidden; /* 触发 BFC */
}
</style>

4、实现两列自适应布局

问题：想要 左侧固定宽度，右侧自适应，但 float: left + margin-left 方案可能不够稳定。

解决：让右侧 div 形成 BFC，从而避免被左侧浮动元素影响。BFC 的 right 不会被 left 影响，因此能正确自适应。

<style>
.left {
  float: left;
  width: 200px;
  height: 100px;
  background: red;
}
.right {
  overflow: hidden; /* 触发 BFC */
  background: blue;
}
</style>


<div class="left">左侧固定宽度</div>
<div class="right">右侧自适应</div>

触发BFC的方式：

overflow: hidden; ✅ 最常用
display: flex;
position: absolute;
float: left;
✔ display: flow-root（新标准，最推荐👌）

10、如何实现浏览器的响应式布局

1、使用meta viewport适配移动端

🔹 width=device-width：设置网页宽度等于设备屏幕宽度。
🔹 initial-scale=1：初始缩放比例 1:1，防止手机端缩小网页。

<meta name="viewport" content="width=device-width, initial-scale=1">

2、使用css的媒体查询@media适配不同屏幕，根据屏幕大小，动态调整布局和样式

/* 适配小屏幕（手机） */
@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

/* 适配中等屏幕（平板） */
@media screen and (min-width: 601px) and (max-width: 1024px) {
    body {
        background-color: lightgreen;
    }
}

/* 适配大屏幕（PC） */
@media screen and (min-width: 1025px) {
    body {
        background-color: lightcoral;
    }
}

3、使用rem、vw、vh代替px，让字体/元素自适应，与媒体查询一起使用在不同屏幕修改根元素大小

rem：基于根元素的字体大小，字体在不同屏幕上自适应缩放。
vw（视口宽度）和 vh（视口高度）：适配全屏布局。

html {
    font-size: 16px; /* 基础字体大小 */
}

p {
    font-size: 1.2rem; /* 1.2倍基础字体 */
}

.box {
    width: 50vw; /* 视口宽度的 50% */
    height: 30vh; /* 视口高度的 30% */
}

4、使用弹性盒flexbox弹性布局

flex-wrap: wrap; 让元素在小屏幕自动换行。
flex: 1; 让元素根据屏幕宽度自适应缩放。

.container {
    display: flex;
    flex-wrap: wrap; /* 自动换行 */
    justify-content: space-between; /* 两端对齐 */
}

.item {
    flex: 1; /* 自适应宽度 */
    min-width: 200px; /* 防止过小 */
    background-color: #f4f4f4;
    margin: 10px;
    padding: 20px;
    text-align: center;
}

5、使用网格布局

6、使用bootstrap(网格系统)或者tailwind css框架

7、对于图片可以加上max-width:100%;防止图片在小屏幕溢出