HTML+CSS 面试题

HTML+CSS

HTML5的新特性、语义化

语义化指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化），便于开发者阅读，维护和写出更优雅的代码的同时，让浏览器的爬虫和辅助技术更好的解析。通过使用恰当语义的HTML标签，可以有效提高可访问性、可检索性、国际化和互用性。

优点：

1. 在没有 CSS 样式的情况下页面的排版结构也很清晰，便于阅读。
2. 可以让页面代码结构更清晰，提高互用性，减少网页间的差异性，帮助其他开发者了解网页的结构，方便后期开发和维护。
3. 还可以提高可访问性，帮助辅助技术更好地阅读和转译网页，利于无障碍阅读。
4. 它们还可以提高国际化，让各国开发者更容易弄懂网页的结构。

新特性：

• 语义化标签：<header>、<footer>、<nav>、<aside>、<article>和<section>
• 本地存储：localStorage和sessionStorage
• 兼容特性：让网页在不同的浏览器中都能正常显示。
• 2D/3D：让网页具有更丰富的视觉效果。
• 动画/过渡：让网页元素之间的变化更加平滑自然。
• 性能与集成：提高网页的运行速度和稳定性。
• 多媒体标签：<audio>、<video>
• CSS3 特性：可以让网页样式更加丰富多彩。
• 新的表单控件：required、placeholder、autofocus、autocomplete、multiple
• input类型：color、date、email、month、number、search、tel、time、url、week

CSS3

层叠样式表（Cascading Style Sheets，缩写为 CSS）是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。CSS3 是 CSS（层叠样式表）技术的升级版本，CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。

新特性：

• 选择器：新的属性选择器、伪类选择器和伪元素选择器，增强了页面元素的选择范围和对特定元素样式的控制。
• 盒模型：引入了新的盒模型，使得我们可以通过box-sizing属性来定义元素的盒模型是"content-box"（默认值）还是"border-box"，深度影响了元素的计算宽度和高度值。
• 版式：新的版式属性包括：多列版式、Flexbox、Grid等，增加了网页版式的灵活性和复杂性。
• 背景图像：使用 background-size 属性，CSS3 允许我们调整背景图片的大小并让其适应我们的容器。
• 过渡和动画：CSS3支持 创建平滑过渡 和 流畅动画 完成CSS的转换效果。
• 渐变：我们可以使用CSS3 gradient属性为元素添加渐变背景。渐变背景可以是线性的或径向（环形）的。
• 字体：新增加字体嵌入@font-face、属性font-stretch、text-shadow等。
• 阴影：强大的 CSS3 模糊阴影效果，我们可以使用box-shadow属性模拟出漂亮的阴影效果，而不需要深入解决重影粒度问题。
• 圆角：CSS3 border-radius 属性是圆角属性，可以使我们轻松地实现不同圆角半径的定制化效果。
• 弹性盒子模型：弹性盒子模型又叫Flexible Box布局模型，可用于彻底改变 Web 页面的布局方式。

常用选择器：

1. ID选择器： #id
2. 类别选择器： .class
3. 元素选择器： element
4. 伪类选择器： :link,:visited,:hover,:active,:focus
5. 属性选择器： [attribute]
6. 后代选择器： A B
7. 子元素选择器：A > B
8. 兄弟选择器：A + B, A ~ B
9. 通用选择器： *

优先级顺序：

• !important >
• 内联样式 >
• ID选择器 >
• 类选择器/属性选择器/伪类选择器 >
• 元素选择器/伪元素选择器 >
• 关系选择器/通用选择器
  !important > 内联样式 > ID选择器 > 类别选择器、属性选择器、伪类选择器 > 元素选择器 > 通配符 > 继承

// 1. 使用ID选择器:
#main-nav {
  background-color: blue;
}

// 2. 元素选择器：
div{
  width:100%;
  height:100%;
}

// 3. 使用类别选择器:
.button {
  background-color: red;
}

// 4. 使用属性选择器:
a[href^="https://"] {
  color: green;
}

// 5. 使用伪类选择器:
a:hover {
  color: yellow;
}

// 6. 使用后代选择器:
.main-nav ul {
  padding: 0;
}

// 7. 使用子元素选择器:
.main-nav > ul {
  list-style-type: none;
}

// 8. 使用兄弟选择器:
h1 + p {
  font-size: 16px;
}

// 9. 使用通用选择器:
* {
  box-sizing: border-box;
}

CSS盒子模型和box-sizing属性

CSS盒子模型（Box Model）是网页布局的基础，可以将页面上所有元素看作一个个矩形的盒子。这些盒子由四个部分组成：内容区（content）、内边距（padding）、边框（border）、外边距（margin）。CSS盒子模型分为标准盒子模型和怪异盒子模型，这两个概念与盒子模型的计算方式有关。

在CSS3中，通过box-sizing属性可以控制盒子模型的计算方式。CSS3中的 box-sizing 属性有三个值：content-box，border-box和inherit。

1. content-box：默认值，模型的宽度和高度只包括内容，不包括边框和内边距。（标准盒子模型）
2. border-box：模型的宽度和高度包括内容、内边距和边框，但不包括外边距。（怪异盒子模型）
3. inherit：继承父元素的 box-sizing 值。

总结来说，box-sizing属性用于控制盒子模型的计算方式，更改CSS盒子模型的大小计算方式，使得需要计算的尺寸更加精确和方便。

标准盒子模型：

标准盒子模型是CSS2.1规范定义的，也被称为W3C盒子模型。在标准盒子模型下，一个元素的尺寸由其content（内容）的宽度、内边距padding、边框border和外边距margin四个部分组成。其中content的大小可以通过width和height属性进行设置，padding、border和margin的大小可以通过相应的属性进行设置。

标准盒子模型的计算公式如下：

总宽度 = width + padding-left + padding-right + border-left-width + border-right-width + margin-left + margin-right
总高度 = height + padding-top + padding-bottom + border-top-width + border-bottom-width + margin-top + margin-bottom

示例：

// HTML 代码为:
<div class="box">盒子模型</div>

// CSS 代码为:
.box {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid #000;
  margin: 0 auto;
}

怪异盒子模型

怪异盒子模型也被称为IE盒子模型，是IE5~IE6浏览器采用的盒子模型，由于该模型与标准盒子模型不同，因此被称为怪异盒子模型。

标准盒子模型的计算公式如下：
总宽度 = width + margin-left + margin-right
总高度 = height + margin-top + margin-bottom

也就是说，在怪异盒子模型中，内边距和边框的大小并没有算入元素的总尺寸。（既 width 已经包含了 padding 和 border 值）

示例：

// HTML 代码为:
<div class="box">测试盒子模型</div>

// CSS 代码为:
.box {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid #000;
  margin: 0 auto;
  box-sizing: border-box; /* 显示使用IE怪异盒子模型 */
}

解释：当设置一个元素的box-sizing属性为 border-box 时，即可使用怪异盒子模型进行盒子尺寸的计算，而采用其他值（如 content-box）则会使用标准盒子模型进行盒子尺寸的计算。

其实在默认的 content-box 模式下，盒子模型就是标准的盒子模型，元素的宽度和高度仅包含内容，不包括内边距（padding）、边框（border）和外边距（margin）。而使用设置为 border-box 的 box-sizing 属性时，元素的宽度和高度包括了内边距、边框和内容，但不包括外边距。

具体而言，在 content-box 模式下，当我们设置宽度为200px时，它并不包括 padding、border 和 margin 的尺寸，因此该元素的实际宽度可能会比我们期望的要大一些。而在 border-box 模式下，设置的宽度200px已经包含了 padding 和 border 的尺寸，因此该元素的实际宽度也就比较准确了。

总之，box-sizing 属性可以更好地控制元素的尺寸计算方式，让开发者更加方便地实现页面布局效果。在实际开发中，应根据实际需求和页面特点灵活选择使用哪种盒子模型计算方式。

BFC和IFC

BFC和IFC是CSS布局中的概念，他们分别代表“块级格式化上下文”和“内联格式化上下文”。

区别：

BFC是块级格式化上下文，它是一个独立的布局环境，其中块级盒子垂直排列。在BFC中，盒子的垂直边距会发生折叠，浮动元素也会参与高度计算。
IFC是行内格式化上下文，它是一种水平的格式化上下文，其中行内级盒子从左到右水平排列，直到一行被填满，然后换行。在IFC中，盒子的垂直对齐方式由vertical-align属性决定。行高由包含该行内级盒子中最高的盒子决定。

BFC（块级格式化上下文）

BFC（Block Formatting Context），即块级格式化上下文。指的是一个独立的块级渲染区域（布局环境），它具有一定的隔离特性，内部元素的定位、清除浮动、高度塌陷等计算方式与外部元素保持独立。

BFC的原理布局规则：

• 内部的Box会在垂直方向一个接着一个地放置。
• Box垂直方向上的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠。
• 每个盒子的左外边框紧挨着包含块的左边框，即使浮动元素也是如此。
• BFC的区域不会与float box重叠。
• 元素的类型和display属性，决定了这个Box的类型。不同类型的Box会参与不同的Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。
• 计算BFC的高度时，浮动子元素也参与计算。

扩展：Box是CSS布局的对象和基本单位，一个页面是由很多个Box组成的。元素的类型和display属性决定了这个Box的类型。

BFC的生成规则有如下几条：

• 根元素即为一个BFC。
• 浮动元素（float不为none）。
• 绝对定位元素（position为absolute或fixed）。
• display值为inline-block、table-caption、flex、inline-flex、grid、inline-grid的元素。
• overflow值不为visible的块元素。

示例：

// HTML 代码为:
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

// CSS 代码为：
.container {
  border: 1px solid black;
  overflow: hidden;
}

.box {
  width: 100px;
  height: 100px;
  margin: 10px;
  float: left;
  background-color: lightblue;
}

解释：在这个示例中，我们创建了一个BFC来包裹两个浮动元素，通过设置 overflow:hidden，让它会触发BFC，在BFC中，BFC自适应高度，浮动元素也会参与高度计算，因此解决了浮动元素引发的高度塌陷问题。

应用场景：

• 解决浮动元素引发的高度塌陷问题。
• 防止垂直外边距重叠。
• 创建自适应两栏布局。
• 实现多列文本布局。

扩展：如果页面布局造成了浮动塌陷，除了使用清除浮动（Clearfix）技术强制容器在浮动元素之后换行，还可以为容器设置一个触发BFC的样式，就是上面那个例子中为 container 设置了 overflow: hidde 的样式。

IFC（内联格式化上下文）

IFC指的是一个内联元素渲染区域，它是一种水平的格式化上下文，具有一定的隔离特性，同一个IFC内部的元素在渲染时互相影响，但与外部元素不产生任何影响。在IFC中，盒子从左到右水平排列，直到一行被填满，然后换行。行内级盒子的垂直对齐方式由 vertical-align 属性决定。行高由包含该行内级盒子中最高的盒子决定。

IFC中的布局规则包括：

• 行内级盒子从左到右水平排列。
• 盒子的垂直对齐方式由vertical-align属性决定。
• 行高由包含该行内级盒子中最高的盒子决定。
• 当一行被填满时，盒子会换行。

IFC的生成规则有如下几条：

• 根元素即为一个IFC。
• inline-block元素。
• 表格单元格（table-cell）。
• display值为inline-flex、inline-grid的元素。
• img元素、input元素、textarea元素。

示例：

// HTML 代码为:
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

// CSS 代码为:
.container {
  border: 1px solid black;
  width: 300px;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: lightblue;
}

解释：这里没有用flex布局，有兴趣的可以自己试一试噢！在这个例子中，我们有一个包含三个盒子的容器。盒子被设置为display: inline-block，这使它们成为行内块级元素。由于容器的宽度只有300像素，所以第三个盒子会换行。

应用场景：

• 内联元素的居中对齐。
• 解决内联元素导致的空隙问题。
• 禁止文本被浮动元素覆盖。
• 实现多行文本的两端对齐布局。

总而言之，BFC和IFC在CSS布局中扮演了至关重要的角色，可以解决很多常见的布局问题，对于理解CSS的渲染流程、排版规则有很大帮助。

页面布局

• 静态布局：常见于pc端，是给页面设定固定的宽高且居中布局，web网站开发的单位一般用px。
• 浮动布局：浮动布局是调用浮动属性来使得元素向左或者向右移动从而共享一行，直到碰到包含框或者另一个浮动框。浮动元素是脱离文档流的，不占据页面空间，但不脱离文本流，且浮动会将行内元素和行内块元素转化为块元素。
• 定位布局：定位布局是给元素设置 position 属性从而控制元素显示在不规则的位置，偏向于单个元素定位操作。
• 栅格布局：栅格布局也被称为网格布局，它是一种新兴的布局方式，常用的有瀑布流等。它的布局很简单，就是把一个区域划分为一个个的格子排列好，再把需要的元素填充进去。
• table布局：table 布局是在父元素使用 display:table; 子元素使用 display:table-row或 display:table-cell; 子元素会默认自动平均划分父元素的空间。
• 弹性（flex）布局：flexible 模型又被称为 flexbox，它不像栅格布局可以同时处理行跟列，只能处理单行或者当列，是一维的布局模型。
• 圣杯布局：圣杯布局跟双飞翼的布局区别在于中间是否有包括两边的区域，圣杯布局是没有的，两边或者一边非主要部分填充父元素的 padding；而双飞翼布局是有的，但多了一层 dom 节点，非主要部分用的是 center 部分的 margin 空间。
• 自适应布局：总结的来说就是创建多个静态布局，每个布局对应一个屏幕的分辨率范围，每个静态布局页面的元素大小不会因为窗口的改变而变化，除非从一个静态布局变到另外一个布局，不然在同一设备下还是固定的布局。常用的方式有使用 CSS 的 @media 媒体查询，也有高成本的 JS 进行设计开发，或者使用第三方开源框架 bootstrap，这个能够很好的支持多个浏览器。
• 流式布局：流式布局也叫百分比布局（也有叫非固定像素布局），是页面中的元素根据屏幕分辨率自动进行适配调整，页面元素大小会发生变化，但是整体布局不会发生变化，始终都是满屏显示。它使用的是百分比定义宽，但高一般会被固定住，这种布局在早期是为了适应不同尺寸的PC屏幕，但现在在移动端比较常见。
• 响应式布局：响应式通过检测视口分辨率判断是pc端、平板还是手机，针对不同的客户端在客户端做处理，来展示不同的布局和内容从而达到令人满意的效果，屏幕大小的变化会导致元素的位置和大小都改变，可以说是流式布局和自适应布局的结合体，一套界面布局即可适应所有不同的尺寸和终端，可想而知设计考虑的比自适应复杂的多。

其他

伪类和伪元素

伪类和伪元素都是CSS选择器，它们用来选择文档树以外的元素，或者选择文档树中无法用简单选择器表示的状态。但它们之间有一些重要的区别。

伪类用来选择元素的特殊状态。例如，:hover伪类用来选择鼠标悬停在其上的元素，:focus伪类用来选择获得焦点的元素。伪类通常用于添加一些特殊的样式，以反映元素的状态。

伪元素用来创建一些不在文档树中的元素，并为其添加样式。例如，::before伪元素用来在一个元素之前插入内容，::after伪元素用来在一个元素之后插入内容。伪元素通常用于添加装饰性内容。

总之，伪类和伪元素的主要区别在于它们的作用对象不同。伪类作用于已经存在的元素，而伪元素创建新的元素。

长度单位px、em和rem

px、em和rem都是CSS中的长度单位，但它们之间有一些重要的区别。

px（像素）是一个绝对长度单位，它表示屏幕上的一个物理像素。由于不同设备的屏幕分辨率不同，所以1px在不同设备上可能表示不同的物理尺寸。

em是一个相对长度单位，它相对于当前元素的字体大小。例如，如果一个元素的字体大小为16px，那么1em就等于16px。em单位常用于设置元素的字体大小、边距和填充等属性。

rem（root em）也是一个相对长度单位，它相对于根元素（元素）的字体大小。例如，如果根元素的字体大小为16px，那么1rem就等于16px。rem单位常用于实现响应式布局。

总之，px、em和rem的主要区别在于它们的参考系不同。px是绝对长度单位，而em和rem是相对长度单位。

position属性

• static：默认值。元素按照正常文档流进行定位。
• relative：元素按照正常文档流进行定位，但可以通过top、right、bottom和left属性相对于其正常位置进行偏移。
• absolute：元素脱离正常文档流，相对于最近的非static定位祖先元素进行定位。如果没有非static定位的祖先元素，则相对于初始包含块进行定位。
• fixed：元素脱离正常文档流，相对于浏览器窗口进行定位。
• sticky：元素在正常文档流中，但可以根据用户的滚动固定在指定位置。

让一个元素水平垂直居中

常见方法:

1. 使用flex布局：可以在父元素上设置 display: flex;，并且使用 align-items: center; 和 justify-content: center; 来实现水平垂直居中。
2. 使用绝对定位和负边距：可以在父元素上设置 position: relative;，然后在子元素上设置 position: absolute;，并且使用 top: 50%;、left: 50%; 和负边距（例如 margin-top: -10px; margin-left: -10px;）来实现水平垂直居中。
3. 使用绝对定位和transform：可以在父元素上设置 position: relative;，然后在子元素上设置 position: absolute;，并且使用 top: 50%;、left: 50%; 和 transform: translate(-50%, -50%); 来实现水平垂直居中。
4. 使用表格布局：可以在父元素上设置 display: table-cell; vertical-align: middle; text-align:center; 来实现水平垂直居中。
5. 使用网格布局：可以在父元素上设置 display: grid;，并且使用 place-items: center; 来实现水平垂直居中。
6. 使用行内块元素和文本对齐：可以在父元素上设置 text-align: center; 和 line-height: 200px;（其中200px是父元素的高度），然后在子元素上设置 display: inline-block; vertical-align: middle; 来实现水平垂直居中。

隐藏页面中某个元素

常见方法：

1. 使用 display: none; ：这会将元素从页面布局中完全移除，就像它从未存在过一样。
2. 使用 visibility: hidden; ：这会将元素隐藏，但它仍然占据页面布局中的空间。
3. 使用 opacity: 0; ：这会将元素的透明度设置为0，使其完全透明，但它仍然占据页面布局中的空间，并且仍然可以与用户交互（例如，可以点击）。
4. 使用 position: absolute;  和 left: -9999px; ：这会将元素移出屏幕外，使其不可见。