面试题HTML+CSS+网络+浏览器篇

文章目录

  • Css预处理sass less是什么？为什么使用他们
  • 怎么转换 less 为 css？
  • 重绘和回流是什么
  • http 是什么？有什么特点
  • HTTP 协议和 HTTPS 区别
  • 什么是 CSRF 攻击
  • HTML5 新增的内容有哪些
  • Css3 新增的特性
  • flex VS grid
  • 清除浮动的方式有哪些？
  • 定位的属性值有何区别
  • 子元素如何在父元素中居中
  • 元素垂直居中
  • 如何让 chrome 浏览器显示小于 12px 的文字
  • Css 选择器有哪些?那些属性可以继承?优先级如何计算？Css3 新增的伪类有哪些?
      • 常见 CSS 选择器：
      • 属性继承性：
      • 优先级计算：
      • 关系选择器
  • 网页中有大量图片加载很慢 你有什么办法进行优化？
  • 浏览器的标准模式和怪异模式区别？
  • 弹性盒子布局属性有那些请简述?
  • 怎么实现标签的禁用
  • Px，rem，em 的区别
  • 三栏布局方式两边固定中间自适应
  • 什么是HTML
  • 什么是XML，与HTML的区别
  • 双边距重叠问题（外边距折叠）
  • css 动画如何实现
  • CSS文本溢出的处理
  • 怎么画一条0.5px的边

Css预处理sass less是什么？为什么使用他们

  • CSS 的预处理器
  • 让css像编程语言
  • 变量，继承，嵌套，混合

怎么转换 less 为 css？

在webpack，vue cli， babel构建工具里面配置

重绘和回流是什么

重绘（Repaint）和回流（Reflow）是浏览器渲染页面时的两个关键概念，它们涉及到页面元素的布局和样式的改变。

  1. 重绘（Repaint）：

    • 重绘是指当元素样式的改变不影响其布局时，浏览器将根据新样式重新绘制元素，但不会改变元素的大小和位置。重绘的过程是比较快速的，因为它不涉及对元素布局的重新计算。
    • 例如，改变元素的颜色、背景色等。

  2. 回流（Reflow）：

    • 回流是指当元素的尺寸、结构或某些布局属性发生改变，导致浏览器重新计算元素的大小和位置的过程。回流是一种相对较为昂贵的操作，因为它涉及到整个页面的布局更新。
    • 例如，改变元素的宽度、高度、边距、添加或删除元素等。

在实际开发中，应当尽量减少回流和重绘的次数，以提高页面性能。
优化的策略包括：

  1. 使用样式操作代替布局操作：
    • 尽量使用更轻量的样式操作代替布局操作，例如使用 transform 替代改变元素的位置和大小。【transform 属性不会触发回流】
  // 直接改变布局属性，触发回流// box.style.width = '200px';// box.style.height = '200px';// box.style.top = '50px';// box.style.left = '50px';// 使用 transform 属性，不触发回流box.style.transform = 'translate(50px, 50px) scale(2)';
  1. 合并多次操作：
    • 如果需要进行多次样式或布局操作，可以将它们合并在一起，然后一次性进行，减少回流和重绘的次数。
  2. 避免频繁访问布局相关属性：
    • 尽量避免频繁访问会触发回流的布局相关属性，比如 offsetTop、offsetLeft、offsetWidth、offsetHeight。

http 是什么？有什么特点

http 叫做超文本传输协议，是互联网应用最广泛的一种网络协议
特点：基于请求-响应的模式 无状态保存（每次请求都是独立的） 无连接（发完请求就断开，发完响应就断开）

HTTP 协议和 HTTPS 区别

HTTP明文传输
HTTPS更安全（s-security），使用使用 SSL（Secure Socket Layer）或其继任者 TLS（Transport Layer Security）协议对数据进行加密

什么是 CSRF 攻击

  • “吃生日饭”
  • CSRF（Cross-Site Request Forgery，跨站请求伪造）
  • 攻击者获取用户在目标网站上的会话（例如cookie），然后构造一些恶意的请求，目标网站接收到请求后，认为是合法的用户请求
  • 解决：同源策略

HTML5 新增的内容有哪些

  1. 语义化元素：

    • <article>：定义页面中独立的内容，如一篇文章或新闻报道。
    • <section>：定义文档中的节或区段。
    • <nav>：定义导航链接的部分。
    • <header>：定义文档或节的页眉。
    • <footer>：定义文档或节的页脚。
    • <aside>：定义页面内容之外的内容，如侧边栏或广告。

  2. 多媒体元素：

    • <audio>：用于嵌入音频文件。
    • <video>：用于嵌入视频文件。
    • <source>：定义多媒体元素的媒体资源。

  3. 新表单控件：

    • <input> 的新类型，如 date、email、url、color 等，使得表单更易于填写和验证。
    • <datalist>：用于定义 <input> 元素的预定义选项列表。

  4. Canvas 绘图：

    • <canvas> 元素允许通过 JavaScript 脚本进行图形的绘制。

  5. 本地存储：

    • localStorage 和 sessionStorage 提供了在客户端存储数据的能力，以便在页面刷新后数据仍然可用。

  6. 离线应用：

    • 使用 Application Cache，可以让网页在离线时仍然可访问。

  7. Web Workers：

    • 允许在后台运行的 JavaScript 线程，提高了多核系统上的性能。

Css3 新增的特性

在这里插入图片描述

  1. 选择器的增强：

    • 新的通用选择器（*）。
    • 属性选择器的增强，如 :nth-child、:nth-of-type(选择同类型元素中的第 n 个元素) 等。
    • 类型选择器的增强，如 :not(选择不匹配指定选择器的元素)。

      #home:not(p)选择home元素中不是p的元素

  2. 盒模型：

    • box-sizing 属性，用于控制盒模型的计算方式，包括 content-box 和 border-box。

    区别：
    默认content-box， 宽度=内容，也就是默认的W3C盒模型计算方法
    border-box，宽度=内容+padding+边框，IE盒模型计算方法
    border-box 计算更方便，更直观，而无需考虑内边距和边框的额外计算

  3. 多列布局：

    • column-count、column-gap 等属性，用于创建多列布局。

  4. 背景和边框：

    • border-radius：用于创建圆角边框。
    • box-shadow：用于添加元素的投影效果。
    • background-size：控制背景图片的尺寸。

  5. 颜色和渐变：

    • 支持 RGBA 和 HSLA 颜色表示法。
    • linear-gradient() 和 radial-gradient() 等渐变效果。

  6. 字体：

    • @font-face 规则，允许使用自定义字体。
    • font-size-adjust 属性，用于调整不同字体间的垂直对齐。

  7. 文本效果：

    • text-shadow：为文本添加阴影效果。
    • text-overflow：控制溢出文本的显示方式。

  8. 变换和过渡：

    • transform 属性，允许对元素进行旋转、缩放、平移等变换。
    • transition 属性，实现元素状态变化的平滑过渡效果。

  9. 动画：

    • @keyframes 规则，用于定义动画序列。
    • animation 属性，用于指定动画的名称、持续时间等参数。

  10. Flexbox 布局：

    • 引入 Flexbox 模型，使得创建灵活的、响应式的布局更为容易。

  11. Grid 布局：

    • 引入 Grid 布局，提供了更强大的二维布局系统。

  12. 过滤效果：

    • filter 属性，用于应用图像过滤效果，如模糊、饱和度调整等。

  13. 响应式设计：

    • @media 查询，允许根据设备特性和屏幕尺寸应用不同的样式。

flex VS grid

Flexbox：
主要关注 一维布局，通过 flex-direction 属性控制主轴的方向（行或列，默认是行-x轴）
justify-content-x轴，align-items-y轴
Grid：
关注 二维布局，可以同时定义行和列，通过 grid-template-rows 和 grid-template-columns 定义网格的行和列。

清除浮动的方式有哪些？

在这里插入图片描述

浮动元素脱离文档流，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，这时就需要一些技巧来清除浮动。

解决方法

  1. 给父元素添加overflow:hidden。

    原理：父元素会变成BFC，BFC（块级格式化上下文，Block Formatting Context），BFC 是一个独立的渲染区域，具有一套渲染规则。 BFC 不会让浮动元素溢出到它的外部。

  2. 在浮动元素后添加一个元素a，在a上添加属性clear:both或left。
    或者使用一个伪元素：
.clearfix::after {content: "";display: table;clear: both;
}

定位的属性值有何区别

Position 有5个属性值：

  • Relative 相对定位:

    • 不脱离文档流。
    • 相对于自身定位。

  • Absolute 绝对定位:

    • 脱离文档流。
    • 相对于最近的已定位的祖先元素进行定位，不考虑 static 定位的祖先元素。

  • Fixed 固定定位:

    • 脱离文档流。
    • 相对于浏览器窗口定位。

  • Static 默认值:

    • 元素出现在正常的流中。

  • Sticky 粘性定位:

    • 滚动到某个设定阈值后表现为固定定位。

.element {
position: sticky;
top: 50px;
}

子元素如何在父元素中居中

  1. 子元素设置 margin：auto，并且子元素不能设置浮动
  2. 父元素设置弹性盒子，display：flex； justfy-content：center ；align-item：center；

元素垂直居中

  1. .子元素设置为行内块，再加 vertical-align：middle
  2. 弹性盒，父元素 display：flex，子元素 align-self：center

如何让 chrome 浏览器显示小于 12px 的文字

谷歌浏览器默认情况下字体最小只能设置到12px，小于12px的设置会无效化。
解决办法：
通过缩放来实现，transform:scale(0.8)，把它变为原来的0.几倍，即可实现设置小字体的效果。

Css 选择器有哪些?那些属性可以继承?优先级如何计算？Css3 新增的伪类有哪些?

常见 CSS 选择器：

  1. 元素选择器（Element Selector）

  2. 类选择器（Class Selector）

  3. ID 选择器（ID Selector）

  4. 通配符选择器（Universal Selector）: 即*

  5. 群组选择器（Grouping Selector）:

    h1, h2, h3 {/* styles */
}

  6. 属性选择器（Attribute Selector）:

    input[type="text"] {/* styles */
}

  7. 伪类选择器（Pseudo-class Selector）:

    a:hover {/* styles */
}

  8. 伪元素选择器（Pseudo-element Selector）:

    p::first-line {/* styles */
}

属性继承性：

一些常见的可继承的属性包括：字体的一些属性（颜色，字体，行高，大小粗细

优先级计算：

  1. !important： 优先级最高。color: red !important;
  2. 行内样式：
  3. ID 选择器
  4. 类选择器、属性选择器和伪类选择器
  5. 元素选择器和伪元素选择器
  6. 通配符和关系选择器（组合器）

Css3 新增的伪类：与child有关的都是

关系选择器

div p {后代}
ul > li {直接子元素}
h2 + p {相邻兄弟 }
h2 ~ p {同级兄弟元素}

网页中有大量图片加载很慢 你有什么办法进行优化？

  1. 压缩，JPEG
  2. 懒加载
  3. CDN
  4. *利用图片精灵（CSS Sprites）:
    将多个小图标或图片合并成一张图片，通过 CSS 的背景定位来显示需要的部分。减少请求次数，提高加载速度。

浏览器的标准模式和怪异模式区别？

标准模式使用W3C盒模型
怪异模式使用IE盒模型

弹性盒子布局属性有那些请简述?

Flex-direction：弹性容器中子元素排列方式（主轴排列方式）
Flex-wrap：设置弹性盒子的子元素超出父容器时是否换行
Flex-flow：是 flex-direction 和 flex-wrap 简写形式
flex-flow: <flex-direction> <flex-wrap>;
Align-item：设置弹性盒子元素在侧轴上的对齐方式
Align-content：设置行对齐

.flex-container {display: flex;flex-wrap: wrap; /* 允许多行 */align-content: center; /* 多行居中对齐 */
}

Justify-content：设置弹性盒子元素在主轴上的对齐方式

怎么实现标签的禁用

添加 disabled 属性
<input type="text" disabled>

Px，rem，em 的区别

em是1个相对单位

px 是绝对单位，不受父元素影响。
rem （root）是相对于根元素字体大小的单位
em 是相对于父元素字体大小的单位

三栏布局方式两边固定中间自适应

  1. 使用ui库
  2. flexbox：给左右元素设置宽度即可。
  3. grid
.container {display: grid;grid-template-columns: 200px 1fr 200px; /* 左右两列固定宽度，中间列自适应 */grid-gap: 10px; /* 可选，设置列之间的间隔 */
}

fr 是 CSS Grid 布局中的一个单位，表示"fraction"（分数）
在 grid-template-columns 或 grid-template-rows 中，可以使用 fr 单位来指定一个分数，用于分割剩余的可用空间。例如，1fr 表示分割可用空间的一个等份，2fr 表示分割可用空间的两等份，以此类推。

什么是HTML

  • HTML（HyperText Markup Language）是一种标记语言，用于创建和设计网页的结构。
  • HTML 使用标记（tag）来包围文本，这些标记告诉浏览器如何显示文本或者处理文本的结构。
  • 每个 HTML 标记都有特定的含义，用于表示文本的不同部分、链接、图像、表格等。

什么是XML，与HTML的区别

  • XML（eXtensible Markup Language）是一种用于描述数据的标记语言
  • HTML 的设计目标是展示内容，有专门的元素和属性，便于浏览器解析
  • XML 的设计目标是传输和存储数据，它目标是把数据转为计算机能理解的格式化语言，没有预定义
  • XML 允许用户定义自己的标签和数据结构，因此它更灵活，适用于各种数据交换和存储的场景。
  • XML用处：配置文件、小数据库、数据传输
    在这里插入图片描述
  • 现在用json更多，因为json更容易被js操作

双边距重叠问题（外边距折叠）

多个相邻（兄弟或者父子关系）普通流的块元素垂直方向 marigin 会重
叠折叠的结果为：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。两
个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。 两个外
边距一正一负时，折叠结果是两者的相加的和。

css 动画如何实现

定义关键帧

@keyframes exampleAnimation {0% {/* 初始状态 */transform: translateX(0);}50% {/* 中间状态 */transform: translateX(100px);}100% {/* 最终状态 */transform: translateX(200px);}
}

应用动画：

.element-to-animate {animation: exampleAnimation 3s ease-in-out infinite;
}

3s 是动画的持续时间，ease-in-out 是动画的缓动函数，infinite 表示动画将无限循环。

CSS文本溢出的处理

.example {white-space: nowrap; /* 防止文本换行 */overflow: hidden; /* 隐藏溢出的文本 */text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
}

怎么画一条0.5px的边

一条边存在：渐变
在这里插入图片描述

一条边存在：定位+伪元素+缩放
在这里插入图片描述

四个边都存在的情况：
定义两倍大小的伪元素，然后再以两倍缩放
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/509515.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

1、EmlogCms代码审计

1、EmlogCms代码审计

一、SQL注入 1、后台标签删除处存在1处sql注入 漏洞条件 ● 漏洞url: http://emlog6.0.com/admin/tag.php?actiondell_all_tag ● 漏洞参数&#xff1a;tag[xx] ● 是否存在限制&#xff1a;无 ● 是否还有其他条件&#xff1a;actiondell_all_tag,token复现 POST /admin…
阅读更多...
从零开始搭建web组态

从零开始搭建web组态

成果展示&#xff1a;by组态[web组态插件] 一、技术选择 目前只有两种选择&#xff0c;canvas和svg Canvas: 是一个基于像素的渲染引擎&#xff0c;使用JavaScript API在画布上绘制图像&#xff0c;它的优点包括&#xff1a; Canvas渲染速度快&#xff0c;适合处理大量图像和…
阅读更多...
是真的免费！企业 AI 学习指南：Azure 2024 年学习生成式 AI 的顶级免费资源

是真的免费！企业 AI 学习指南：Azure 2024 年学习生成式 AI 的顶级免费资源

微软的Azure AI学习专家为了帮助企业员工快速上手AI工具&#xff0c;特别准备了一些课程&#xff0c;事先说明&#xff0c;微软出品&#xff0c;完全免费&#xff0c;非割韭菜课程&#xff01; 课程浅显易懂&#xff0c;而且每节课后都会有小结、知识测试&#xff0c;帮助复习知…
阅读更多...
Linux配置网卡功能

Linux配置网卡功能

提示:工具下载链接在文章最后 目录 一.network功能介绍二.配置network功能2.1 network_ip配置检查 2.2 network_br配置2.2.1 配置的网桥原先不存在检查2.2.2 配置的网桥已存在-修改网桥IP检查2.2.3 配置的网桥已存在-只添加网卡到网桥里检查 2.3 network_bond配置检查 2.4 netw…
阅读更多...
虹科新品|Baby-LIN第三代系列产品全面升级，重塑车辆测试新体验

虹科新品|Baby-LIN第三代系列产品全面升级，重塑车辆测试新体验

导读&#xff1a;虹科Baby-LIN系列产品&#xff08;LIN和CAN总线模拟器&#xff09;是在测试和生产领域控制车辆部件(ECU)的成熟解决方案。虹科Baby-LIN系统能够可靠地连接到各类自动化和测量设备&#xff0c;为汽车零部件&#xff08;如电机执行器、车灯、门板、方向盘等&…
阅读更多...
OpenGL 实现色温、色调、亮度、对比度、饱和度、高光

OpenGL 实现色温、色调、亮度、对比度、饱和度、高光

1.简介 色温&#xff1a;简单理解是色彩的温度&#xff0c;越低越冷如蓝色&#xff0c;约高越暖如红色。 亮度&#xff1a;增加就是给图片所有色彩加白色&#xff0c;减少加黑色。注意是只加黑白两种颜色&#xff0c;不然容易跟纯度弄混。 对比度&#xff1a;增加就是让白的…
阅读更多...
海思hi3519dv500,hi3516dv500移植yolov8-模型处理

海思hi3519dv500,hi3516dv500移植yolov8-模型处理

上一节yolov8的训练已经完成了，现在要开始做模型的转换了，这里和yolov7方式相似，但是有一些差异，尤其是yolov7的不带NMS部分的输出顺序和yolov8的输出顺序与格式是有差异的。 首先还是要自己手动加入rpn_op,这里包含了filter,sort,nms部分。 我们一个一个看，首先filter.py…
阅读更多...
物联卡禁止个人使用是有原因的，技术层面给大家深度分析一下

物联卡禁止个人使用是有原因的，技术层面给大家深度分析一下

运营商禁止物联卡个人使用是硬性规定&#xff0c;但是现在很有很多不法商贩在倒卖物联卡给个人&#xff0c;套路是很多的&#xff0c;小编之前的文章里有几篇深度介绍&#xff0c;大家可以搜索看一下&#xff0c;今天就从技术层面来给大家详细分析一下为什么物联卡不适合个人使…
阅读更多...
JVM 基础知识学习笔记

JVM 基础知识学习笔记

JVM 基础知识学习笔记 1. JVM 介绍 什么是 JVM ? JVM 本质上是一个运行在计算机上的程序&#xff0c;它的职责是运行 Java 字节码文件。 JVM 的功能是什么 ? 解释和运行: 对字节码文件中的指令&#xff0c;实时的解释成机器码&#xff0c;让计算机执行。内存管理: 自动为…
阅读更多...
教师资格证考试准考证无法打印

教师资格证考试准考证无法打印

教师准考证无法打印&#xff1f; 在打印准考证的时候&#xff0c;发现点击”下载准考证“时毫无反应&#xff0c;后来在网上找到了一个有效的解决方法&#xff0c;现在记录一下。 在准考证显示页面&#xff0c;鼠标右键单击&#xff0c;找到”检查“ 在弹出来的框里选择”控制…
阅读更多...
卷积神经网络(CNN)原理与实现

卷积神经网络(CNN)原理与实现

卷积神经网络(CNN) 卷积神经网络原理卷积神经网络的数学推导卷积层反向传播算法数学推导卷积层实现代码 卷积神经网络(CNN) 卷积神经网络原理 卷积神经网络是一种用于图像、语音、自然语言等数据的深度学习模型&#xff0c;其核心思想是使用卷积操作提取输入数据的特征&…
阅读更多...
Linux - 安装 maven(详细教程)

Linux - 安装 maven(详细教程)

目录 一、下载二、安装三、配置环境变量四、镜像资源配置 一、下载 官网&#xff1a;https://maven.apache.org/download.cgi 打开 maven 的官网下载页面&#xff0c;点击 bin.tar.gz 文件链接 即可下载最新版本的 maven 如果想要下载旧版本的 meven&#xff0c;则点击 Maven…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023