HTML+CSS 面试题_css面试题-CSDN博客

本文链接：https://blog.csdn.net/qq_48960335/article/details/118438461

HTML

1. H5 的十大新特性

语义化标签

就是看到标签就知道这是什么意思，比如头部就是 header，导航栏就是 nav

有利于SEO, 搜索引擎优化
方便其他设备的解析（屏幕阅读器，移动设备），以有意义的方式来渲染网页
方便团队开发和维护，增加代码可读性

增强型表单

新增表单类型
(1). 邮箱验证

    <input type="email"></input>

(2). 数值输入

    <input type="number" min="5" max="15"></input>

(3). 文件导入

     <input type="file"></input>

(4). 图片按钮

    <input type="image"></input>

(5). 颜色选择

    <input type="color"></input>

(6). 日期表示

    <input type="date"></input>

(7). 搜索框

    <input type="search"></input>

(8). 手机号码输入框

    <input type="tel"></input>

(9). 网址输入框

    <input type="url"></input>

新增表单的新属性
(1). placeholder

这个属性是文本的占位符，相当于一种提示信息，显示在输入域，描述期待user输入的值。

(2). required

这个属性的值为Bool，默认为true，意思是在输入域不能为空

(3). autofocus

auto是自动的意思，focus是聚焦的意思，这个属性描述的就是自动聚焦到需要填写的textarea。

(4). autocomplete

这个属性有两个值，一个是on，另一个是off。默认是on，与email相反，email默认是off。功能是提示写过的信息。

(5). minlength 和 maxlength

这个属性限定输入的最少字数和最多字数，以字符个数计数。

音频和视频
Canvas绘图
SVG绘图
地理定位
拖放API
WebWorker
WebStorage
WebSocket

2. 谈谈本地存储 cookie sessionStorage 和 localStorage

相同作用

本地存储保存数据，都存储在浏览器端(客户端)

三者区别

存储大小

cookie 数据大小不能超过 4Kb，而 webStorage(sessionStorage 和 localStorage) 一般为 5MB 或更大
webStorage 是 H5的新增特性
生命周期

cookie: 默认跟随浏览器关闭而销毁，但可以自己设置过期时间
sessionStorage: 关闭页面或浏览器时销毁
localStorage: 一直保存，不会自动销毁，除非手动销毁
数据与服务器之间的交互

cookie: 发送请求的时候会被请求头携带到服务器端，所以如果使用cookie保存过多数据会带来性能问题
webStorage: 只保存浏览器端，不参与服务器通信
作用域

sessionStorage: 只能在当前页面有效
cookie 和 localStorage: 不同页面也会存在

3. 输入网址(url)到页面渲染的过程

DNS 解析：将域名解析成 IP 地址
TCP 建立连接: TCP 三次握手
发送 HTTP 请求
服务器处理请求并返回结果
浏览器解析然后渲染页面

4. 浏览器的缓存机制-强制缓存和协商缓存区别

强制缓存：不会向服务器发送请求，直接从缓存中读取资源
协商缓存：会向服务器发送请求，服务器会根据这个请求的请求头的一些参数来判断，
如果资源未被修改，服务器返回304状态码，浏览器从缓存中读取资源
如果资源更改了，返回200，返回最新的资源

CSS

1. 讲讲重排和重绘

重排(回流)

当dom的变化影响了元素的几何信息(元素的位置和尺寸大小)，浏览器需要重新计算元素的几何信息，将元素渲染到正确的位置，简单来说就是重新排列元素，这就是重排, 也叫作回流。
每个页面至少进行一次回流，就是在页面第一次加载的时候

触发重排的操作

元素位置改变
改变窗口大小
改变字体大小
添加/删除 dom元素
计算 offsetWidth 和 offsetHeight
margin border 的改变

重绘

当元素的外观发生改变，但没有影响到页面的布局，重新把元素外观绘制出来的过程叫做重绘

触发重绘的操作

设置 color background border-radius box-shadow ······· 这些只改变外观的属性

重排一定会发生重绘，重绘不一定触发重排

2. display 的常用值？说明他们的作用?

block: 转换为块状元素
inline: 转换为行内元素
none: 设置元素不可见
inline-block: 本身像行内元素一样显示，但其内容像块级元素一样显示
flex: 弹性布局

3. 为什么要清除浮动？清除浮动的方法？

为什么要清除浮动

浮动元素脱离了文档流，如果父级元素是由内容撑开，此时父级高度为0，就会造成高度塌陷问题。使布局出现混乱，所以就需要清除浮动。

清除浮动的方法

通过触发 BFC，给父级元素添加overflow：hidden属性
在父元素中，结尾处加个空标签，并设置clear：both属性
给父级元素定义 height

4. BFC是什么？

BFC是“块级格式化上下文”,通俗的讲 BFC 就是一个隔离的容器，里面的子元素不会影响到外面的元素
创建 BFC： overflow：hidden
可以解决 margin 塌陷，可以清除浮动

5. CSS3 有哪些新特性?

新增各种 css 选择器
圆角 border-radius
文字特效 text-shadow
背景渐变线性渐变径向渐变
过渡
transform
动画

6. 实现css盒子居中的方式?

实现css盒子水平垂直的方式

7. 说一说flex布局，以及它的属性

justify-content: 项目在主轴上的对齐方式
align-items: 项目在交叉轴上的对齐方式

搞懂 flex 弹性布局，看这一篇就够了

8. 对盒模型的了解

分为两种盒模型：W3C标准盒模型和 IE盒模型
盒模型的组成：内容(content)、填充(padding)、边距(margin)、边框(border)

标准盒模型：元素的 width 和 height 只包含 content，不包含 border 和 padding

IE盒模型：元素的width 和 height 包含了 content + padding + border

通过属性 box-sizing 设置盒模型，默认为 content-box(标准盒模型),还有一个值为 border-box(IE盒模型)

9. css的优先级

!important > 行内样式 > id选择器 > class类选择器 > 标签和伪元素> 通配选择器

10. css中常用的单位有哪些？

px(像素)
- px是绝对单位，一个像素代表一个点。如100px*100px的正方形，则是由宽度100个点，长度100个点组成的平面
em
- em是相对单位，它的参考对象是它父级的字号，如父级字号是16px，如果设置元素的字号大小为2em的话，元素的字号大小则为32px
rem
- rem由页面的根元素html的字号决定，浏览器一般默认的字号为16px，如设置元素的字号大小为1rem，则元素的字号大小为16px, 使用rem的好处是：当我们改变了浏览器的字号设置时，页面的字号也会随之发生变化
vh
- 浏览器视觉窗口的高度，分为100份，每份为1vh，如我们设置元素高度为20vh，则元素的高度为视觉窗口高度的20%
vw
- 浏览器视觉窗口的宽度，分为100份，每份为1vw，如我们设置元素宽度为100vh，则元素的宽度为视觉窗口宽度的100%

vh和vw在开发全屏时非常方便

11. 文字溢出时显示点点点(…)

单行

.box{
    overflow: hidden;   // 溢出隐藏
    text-overflow: ellipsis;  // 文本溢出时发生的事，ellipsis表示用省略号代替溢出的文本
    white-space: nowrap;  // // 规定段落中的文本不进行换行
}

多行

.box {
    overflow: hidden;            // 溢出隐藏
    text-overflow: ellipsis;     // 溢出用省略号显示
    display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
    -webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列式：从上到下垂直排列
    -webkit-line-clamp:3;        // 显示的行数
}