前端面试题-(浏览器内核,CSS选择器优先级,盒子模型,CSS硬件加速,CSS扩展)

前端面试题-(浏览器内核,CSS选择器优先级,盒子模型,CSS硬件加速,CSS扩展)

    • 常见的浏览器内核
    • CSS选择器优先级
    • 盒子模型
    • CSS硬件加速
    • CSS扩展

常见的浏览器内核

内核描述
Trident(IE内核)主要用在window系统中的IE浏览器中,由微软研发并投入使用
Gecko(Firefox内核)主要用于Firefox浏览器中,特点是代码完全公开,开发程度高
Webkit(Safari内核)苹果产品中的safari浏览器使用的就是webkit内核,其特点是不受ie,firefox等内核的约束,比较安全。
Chromium(谷歌浏览器)基于WebKit的,chrome由Chromium开发而来。这个内核是国内众多浏览器所使用的内核,比如哦360,猎豹,腾讯
Blink由谷歌和Opera SoftWare 开发的浏览器渲染引擎,其前身是webkit的分支。Blink相对于webKit有更高的渲染引擎,并提供了许多改进和新功能

CSS选择器优先级

浏览器通过优先级来判断哪些属性值与一个元素最为相关,从而在该元素身上应用这些属性值。优先级是基于不同种类的选择器组成的匹配规则
优先级就是分配给指定css声明的一个权重,它匹配的选择器重每一张选择器类型的数值决定。
而当优先级与多个css声明重任意一个声明的优先级相等的时候。css中最后的那个声明将会被应用到元素上

选择器格式优先级权重
ID选择器#id100
类选择器/伪类选择器.xxx :xx10
属性选择器E[attr=“value”]10
标签选择器div1
通配符选择器*0

当在一个样式中声明使用一个!important规则时,此声明将覆盖任何其他声明。和权重没有关系。
样式的来源不同时,优先级顺序为 内联>内部>外部>浏览器用户自定义样式>浏览器默认样式

盒子模型

W3C标准盒子模型:宽+左右内边距+左右边框 +左右外边距 (宽度等于 高度一样)
怪异盒模型:宽+左右外边距(宽度等于 高度一样)
box-sizing: 属性设置
1.content-box:标准盒子模型
2.border-box 怪异盒子模型
他俩的区别就是一个往外撑一个往里挤的区别吧

CSS硬件加速

浏览器在处理下面的css的时候会使用GPU渲染
1.transform (当3D变换的样式出现时会使用GPU加速)
2.opacity
3.filter
4.will-change
层爆炸,由于某些原因导致大量不在预期内的合成层,虽然有浏览器的层压缩机制,但是也有跟多无法进行压缩的情况。这就肯定会出现层爆炸的现象。很多不需要提升为合成层的元素因为某些不当操作成为了合成层。解决层爆炸的问题,最佳方案是打破overlap的条件,也就是说让其他元素不要和合成层元素重叠。简单直接的方式:使用3D硬件加速提升动画性能时候,最后给元素增加一个z-index属性,人为干扰合成层的顺序,可以有效的减少创建不必要的合成层,提升渲染性能。(移动端优化效果显著)

CSS扩展

一· 左右两边固定宽度(左边固定右边自适应布局)中间自适应布局实现
圣杯布局:指两边盒子宽度固定,中间盒子自适应,其中,中间栏放到文档流前面,保证先进行渲染。(会变形)
在这里插入图片描述

双飞翼布局:为了中间div内容不被遮挡,直接在中间div内部创建子div用于放置内容,在该子div里用margin-left和margin-right为左右两栏div留出位置(放大浏览器不会变形)

在这里插入图片描述
宽度计算:中间宽等于width:cacl(100% - 两边宽度的和)
弹性盒子布局:两边宽度固定 父盒子设置弹性盒子不允许换行 中间盒子flex:1 (建议)

二,9宫格实现方式
1.通过弹性盒子实现(推荐)
在这里插入图片描述
2.通过grid布局
在这里插入图片描述
3.通过table实现(不推荐 不累述)
4.通过float实现(不推荐 不累述)

三,子元素上下左右垂直居中
1.弹性盒子 父盒子设置弹性,子盒子justifiy-content 和align-item属性设置center.
2.margin 实现
3.padding实现
4.子绝父相实现

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

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

相关文章

BTC交易模式 - UXTO - 工具整理

UXTO 相关工具分析 https://mempool.space/signet/ 测试网浏览器https://bitcoin.org/zh_CN/choose-your-wallet BTC钱包 正文链接:BTC交易模式 - UXTO

分布式锁实现(mysql,以及redis)以及分布式的概念(续)redsync包使用

道生一,一生二,二生三,三生万物 这张尽量结合上一章进行使用:上一章 这章主要是讲如何通过redis实现分布式锁的 redis实现 这里我用redis去实现: 技术:golang,redis,数据结构 …

使用Python的pygame库实现自动追踪目标的Snake游戏

和上一期不同的目标追踪入门不同的是,这期是自动追踪科学游戏,话不多说,321上链接 一、项目背景 Snake游戏是一款经典的游戏,玩家需要控制一条蛇在屏幕上移动,吃掉食物并避免撞到自己的身体或墙壁。传统的Snake游戏通常…

校园跑腿小程序源码系统+代取快递+食堂超市代买+跑腿 带完整的安装代码包以及搭建教程

随着移动互联网的普及,人们越来越依赖于手机应用来解决日常生活中的各种问题。特别是在校园内,由于快递点距离宿舍较远、食堂排队人数过多等情况,学生对于便捷、高效的服务需求愈发强烈。在此背景下,校园跑腿小程序源码系统应运而…

JAVA 学习 面试(九)Lambda表达式与泛型

Lambda表达式 // 使用 Lambda 表达式计算两个数的和 MathOperation addition (a, b) -> a b; // 调用 Lambda 表达式 int result addition.operation(5, 3); // MathOperation 是一个函数式接口,它包含一个抽象方法 operation,Lambda 表达式 (a, …

this.$copyText;vue-clipboard2作用;vue-clipboard2剪切板

1.安装 npm install --save vue-clipboard2 2.在main.js中引用 import Vue from vue import VueClipBoard from vue-clipboard2 Vue.use(VueClipBoard) 3.代码中使用 <button click"Copy">复制</button> Copy() { this.$copyText(this.value).then…

蓝桥杯备赛 week 3 —— 高精度(C/C++,零基础,配图)

目录 &#x1f308;前言&#xff1a; &#x1f4c1; 高精度的概念 &#x1f4c1; 高精度加法和其模板 &#x1f4c1; 高精度减法和其模板 &#x1f4c1; 高精度乘法和其模板 &#x1f4c1; 高精度除法和其模板 &#x1f4c1; 总结 &#x1f308;前言&#xff1a; 这篇文…

css Media媒体查询常用属性

使用@media规则声明媒体查询,主要用于控制在不同的设备上显示不同的效果 媒体类型: screen 适用于电脑屏幕、平板电脑、智能手机等 print 适用于打印预览 特性 width 可视区域的宽度 orientation 视窗的旋转方向(横屏landscape,默认竖屏模式)。 运算符: and 并且 , 或…

Linux/Academy

Enumeration nmap 首先扫描目标端口对外开放情况 nmap -p- 10.10.10.215 -T4 发现对外开放了22,80,33060三个端口&#xff0c;端口详细信息如下 结果显示80端口运行着http&#xff0c;且给出了域名academy.htb&#xff0c;现将ip与域名写到/et/hosts中&#xff0c;然后从ht…

Mysql 文件导入与导出

i/o 一、导出(mysqldump)<一>、导出sql文件<二>、导出csv文件 二、导入(load)三、常见报错The Mysql server is running with the --secure-file-priv option so it cannot execute this statement 一、导出(mysqldump) <一>、导出sql文件 1、整库 mysqld…

【12.PWM输出】蓝桥杯嵌入式一周拿奖速成系列

系列文章目录 蓝桥杯嵌入式系列文章目录(更多此系列文章可见) PWM输出 系列文章目录一、STM32CUBEMX配置二、项目代码1.main.c --> PWMOutputProcess 总结 一、STM32CUBEMX配置 STM32CUBEMX PA6 ->TIM16_CH1; PA7-> TIM17_CH1 预分频设置为79,自动重装载设置999PWM输…

PyQtGraph 之PlotCurveItem 详解

PyQtGraph 之PlotCurveItem 详解 PlotCurveItem 是 PyQtGraph 中用于显示曲线的图形项。以下是 PlotCurveItem 的主要参数和属性&#xff1a; 创建 PlotCurveItem 对象 import pyqtgraph as pg# 创建一个 PlotCurveItem curve pg.PlotCurveItem()常用的参数和属性 setData(…

资源管理核心考点梳理

个人总结&#xff0c;仅供参考&#xff0c;欢迎加好友一起讨论 PMP - 资源管理核心考点梳理 资源管理包括人力资源和实物资源管理。学习的重点是人力资源的管理&#xff0c;这一章是考试的重点章节&#xff0c;在新考纲中&#xff0c;“人”这一模块在题目种的比例是42%。 01 …

在uvm中,以svi结尾和sv结尾文件的区别

在UVM&#xff08;Universal Verification Methodology&#xff09;中&#xff0c;.sv和.svi文件扩展名通常是SystemVerilog文件的标准扩展名。它们都用来标识SystemVerilog源代码文件。然而&#xff0c;不同项目或团队可能会采用不同的命名约定来区分不同类型的SystemVerilog文…

14.块参照的旋转(BlockReference)

愿你出走半生,归来仍是少年&#xff01; 环境&#xff1a;.NET FrameWork4.5、ObjectArx 2016 64bit、Entity Framework 6. 在排水管网数据的编图时&#xff0c;时常会遇见针对雨水箅等进行旋转。由于数据存储在数据库内&#xff0c;通过CAD自带的旋转功能只能变更图面而无法…

YOLOv8改进 | Conv篇 | 利用轻量化PartialConv提出一种全新的结构CSPPC (参数量下降约100W)

一、本文介绍 本文给大家带来的改进机制是由我独家研制的,我结合了DualConv的思想并根据PartialConv提出了一种全新的结构CSPPC用来替换网络中的C2f,将其替换我们网络中的C2f参数量后直接下降约百万,计算量GFLOPs降低至6.0GFLOPs同时,其中的PartialConv作为一种具有高速推…

SVG 矩形 – SVG Rectangle (3)

简介 rect 元素用于创建 SVG 矩形和矩形图形的变体。有六个属性决定矩形在屏幕上的形状和位置 x, y – 矩形左上角的 x, y 坐标width、height – 矩形的宽度和高度rx、ry – 矩形角的 x 和 y 半径 如果没有设置 x 和 y 属性&#xff0c;则矩形的左上角放置在点 (0,0) 处。 如…

Python 中的多进程(01/2):简介

一、说明 本文简要而简明地介绍了 Python 编程语言中的多处理&#xff08;多进程&#xff09;。解释多处理的基本信息&#xff0c;如什么是多处理&#xff1f;为什么用多处理&#xff1f;在python中怎么办等。 二、什么是多处理&#xff1f; 多处理是指系统同时支持多个处理器的…

C语言第八弹---一维数组

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 一维数组 1、数组的概念 2、⼀维数组的创建和初始化 2.1、数组创建 2.2、数组的初始化 2.3、数组的类型 3、⼀维数组的使用 3.1、数组下标 3.2、数组元素…

Vscode配置python代码开发

文章目录 1. 配置python运行环境2. 常用插件说明3. Vscode配置文件说明3.1 setting.json配置说明3.2 launch.json配置说明 4. 远程开发5. 其他配置 1. 配置python运行环境 安装python插件&#xff1a;点击VSCode左侧边栏中的扩展图标&#xff08;或按 CtrlShiftX&#xff09;&a…