HTML和CSS的面试题

HTML

1.对HTML语义化的理解

语义化：根据内容的结构，选择合适的标签（用正确的标签做正确的事情）

常见的语义化标签：header、nav、section、main、article、aside、footer

优点：适合搜索引擎，有利于seo；增强了可读性，使结构更加清晰

2.DOCTYPE(⽂档类型) 的作⽤

作用：告诉浏览器以什么样的文档类型来解析文档。
浏览器渲染页面的两种模式：（可通过document.compatMode获取）

1. 标准模式：浏览器W3C标准解析页面
2. 怪异模式：页面以一种比较宽松的向后兼容的方式显示。

3. src和 href的区别？

共同点：都是用来引用外部资源
区别：
1. src：表示对资源的引用，它指向的内容会嵌入到当前标签的所在位置。指向的资源会下载并应用到文档内；当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕
2. href：表示超文本引用，指向一些网络资源，建立当前元素/文本的链接关系。当浏览器识别到该文件，会并行下载资源，不会停止对当前文档的处理（a、link标签中）

4.HMLT5新增了哪些特性？

1. 语义化标签：header、nav、section、main、article、aside、footer
2. 媒体标签：audio、video
3. 表单：Email、url、number、search、color、data、week、month、datatime、time等
4. 画布canvas：、地理定位Geolocation
5. 本地存储：localStorage 、sessionStorage
6. 拖拽：draggable
7. WebSocket：HTML5的WebSocket API可以在浏览器和服务器之间实现双向通信，可以用于实时数据传输、游戏等应用中。

5. iframe有哪些优缺点？

iframe元素会创建包含另一个文档的内联框架
优点：
1. 用来加载速度较慢的内容
2. 可以使脚本并行下载
3. 可以实现跨子域通信
缺点：
1. iframe会阻塞主页面的onload事件
2. 无法被一些搜索引擎识别
3. 会产生很多页面，不容易管理

6.head标签有什么作用？其中的标签有哪些不可少？

head标签用于定义文档的头部，描述文档的各种属性和信息。
可在head标签中的标签有：
base、title、link、meta、script、style等

7. 渐进增强和优雅降级之间的区别？

渐进增强：主要针对低版本的浏览器进行页面重构，保证基本功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能。
优雅降级：一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。

css

1.介绍下css的盒子模型？

css的盒子模型分为：W3C标准盒子模型、IE盒子模型
区别：

1. W3C标准盒子模型包括：margin、border、padding、content
2. IE盒子模型包括：margin、content(border、padding、content)
   盒子模型转行：使用box-sizing
   box-sizing:content-box;//标准盒子模型
   box-sizing:border-box;//IE盒子模型

2.CSS选择符有哪些？哪些属性可以继承？

CSS选择符有很多种，包括：

1. 元素选择器：如p、h1、div等
2. 类选择器：以.开头，如.class1
3. ID选择器：以#开头，如#id1
4. 后代选择器：用空格隔开，如div p
5. 子元素选择器：用>隔开，如div>p
6. 属性选择器：以[属性名]、[属性名=属性值]、[属性名*=属性值]等形式表示
7. 伪类选择器：如:hover、:active、:first-child、:nth-child等

而可以继承的属性包括：

1. 字体系列属性（font、font-family、font-size、font-style、font-variant、font-weight）
2. 文本系列属性（text-align、text-decoration、text-indent、text-transform、line-height、letter-spacing、white-space、word-spacing）
3. 颜色系列属性（color、background-color、border-color、outline-color）
4. 列表系列属性（list-style、list-style-type、list-style-position）
5. 表格布局属性（border-collapse、border-spacing、caption-side、empty-cells）
6. 其他一些属性，如cursor、visibility、direction。

3.CSS优先级如何计算？

!important 声明的权重最高。
内联样式（直接在HTML标记中使用 style 属性定义的样式）的权重为 1000。
ID选择器的权重为 100，但是不推荐使用。
类选择器、属性选择器和伪类选择器的权重均为 10。
元素选择器和伪元素选择器的权重均为 1。
如果有多个CSS规则的优先级相同，则最后声明的规则优先于先前声明的规则。

4. 用CSS画一个三角形

用边框border画

1. 设置div的宽高为0px
2. 设置div的全部边框的颜色为透明：border：100px solid transparent;
3. 设置边框其中一个为非透明：border-bottom-color: green;

5.一个盒子不给宽高使用CSS实现水平垂直居中有多少种方式

1. 使用flex布局

.container {
display: flex;
justify-content: center;
align-items: center;
}

2. 使用定位

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

3. 使用grid布局

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

6. display的值和他们的作用？

display的值和作用如下：

1. block：将元素显示为块级元素，可以设置宽度、高度，它会独占一行，不与其他元素共享行。

2. inline：将元素显示为行内元素，不能设置宽度和高度，不会独占一行，与该行其它行内元素在同一行上。

3. inline-block：将元素显示为行内块级元素，可以设置宽度、高度，独占一行，但像行内元素一样在同一行上。

4. none：将元素隐藏，不占据页面空间，相当于元素不存在。

5. flex：将元素设置为弹性盒子（Flexbox），可以通过设置容器和元素的属性来灵活控制元素的排列以及对齐方式。

6. grid：将元素设置为网格布局（Grid），可以通过设置容器和元素的属性来形成一种二维布局的方式，适用于复杂的布局结构。

7. 对于BFC (块级格式化上下文) 规范的理解

块级格式化上下文（BFC）：用于定义在HTML中有哪些元素放在哪个位置以及如何显示。它是一个独立的渲染区域，其中的元素按照一定的规则来排布和渲染。简单的来说就是：一个独立的布局环境，容器里面的元素不会影响外面的。

触发：设置float浮动、设置overflow:auto\scroll\hidden、设置position:absolute\fixed

8.清除浮动有哪些方式？

1. 给浮动元素父级设置高度
2. 在浮动元素后面添加空标签，设置空标签clear：both
3. 给父元素设置overflow：hidden
4. 给父级元素添加伪类：:before或者:after

.parent:after{
    content:"";
    display:block;
    clear:both;
}

9. position有几种属性？分别根据什么定位？

fixed：固定定位，相对于浏览器窗口进行定位，脱离文档流
relative：相对定位，相对于自身定位，不脱离文档流
absolute：绝对定位，相对于第一个relative的父元素定位，脱离文档流
static：默认没有定位
relative 如果有 left、right、top、bottom ===> left、top
absolute 如果有left、right、top、bottom ===>left、right、top、bottom

10.重排和重绘有什么区别？

重排：元素的大小、位置的改变，导致布局的变化
重绘：元素的颜色之类的样式变化，不会影响到布局变化
重绘不一定重排，重排一定重绘

11.css性能优化的方式有哪些？

1. 文件合并与压缩：将多个css文件合并压缩成一个文件，减少HTTP请求次数和文件大小
2. 精简 CSS 代码：删除不需要的代码，减小文件大小
3. 减少使用全局样式：全局样式会影响到整个页面，优先使用局部样式。
4. 去掉无用样式：删除不需要的样式，减小文件大小。
5. 使用字体图标：字体图标比图片更轻量级，减少文件大小和 HTTP 请求次数。

12.px、em、rem的区别？

px：固定像素，设置了无法因为适应页面大小而改变
em：相对于父元素设置字体大小，一般都以body的font-size为基准
rem：相对于根元素html设置大小

13.rgba 和 opacity有什么不同？

共同性：都可以实现透明效果
1. opacity：取值：0–1，0表示完全透明，1表示不透明
2. rgba： R表示红色，G表示绿色，B表示蓝色，取值可以是整数或者百分数；A表示透明度取值0–1之间
不同：
opacity 作用于元素，以及元素内部的所有内容的透明度
rgba 作用于元素的颜色或者背景颜色（后代元素不会继承透明度）

14.display:none与visibility：hidden的区别？

透明都可以隐藏元素
display:none，不会在页面中占位置
visibility:hidden；视觉上看不见，实际上还在页面中占位置

flex布局

设置在父容器上的属性？

在flex布局中，可以在父容器上设置以下属性：

1. display: flex;：设置容器为flex布局。

2. flex-direction: row/column/row-reverse/column-reverse；设置主轴方向，row表示水平方向，column表示垂直方向。

3. flex-wrap: nowrap/warp/wrap-reverse;：控制flex容器中flex子项在主轴方向上是否换行。

4. flex-flow:[row nowrap]//flex-direction和flex-wrap的复合

5. justify-content: flex-start/flex-end/center/space-between/space-around；设置主轴上的对齐方式。

6. align-items: flex-start/flex-end/center/baseline/stretch；设置交叉轴上的对齐方式。

7. align-content: flex-start/flex-end/center/space-between/space-around/stretch；设置多行flex子项在交叉轴上的对齐方式。

子项目上设置的属性

1. flex-grow: 子项目的放大比例
   默认为0；类似于权重，当容器空间有剩余时，flex-grow属性会让有该属性的项目根据其值进行放大。该值越大，该项目就越能够拉伸。

2. flex-shrink: 子项目的缩小比例
   默认为1；如果空间不足，该项目将缩小。如果为0，则空间不足该项目也不缩小。

3. flex: flex-grow, flex-shrink 和 flex-basis 的缩写形式
   默认为0 1 auto

4. flex-basis: 子项目的基准大小
   定义在分配多余空间之前，项目占据的主轴空间。可以设为跟width或height属性一样的值，则项目将占据固定空间。

5. align-self: 子项目的垂直对齐方式
   允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

6. order: 子项目的排列顺序
   数值越小，排列越靠前，默认为0