牛客前端八股文

1.说说HTML语义化?

得分点:语义化标签、利于页面内容结构化、利于无CSS页面可读、利于SEO、利于代码可读

1,标签语义化是指在开发时尽可能使用有语义的标签,比如header,footer,h,p,少使用无语义如div。

2,标签语义化的好处有三点,首先对开发者来说,能够提高代码可读性,利于前期开发以及后期维护;对于用户来说,在样式表没有加载出来时,整个页面结构依旧清晰,给用户一个不错的体验感;对搜索引擎来说,利于爬虫读取有用的信息,提升网页排名。

3,目前语义化并没有得到广泛应用,如京东,淘宝官网依旧采用大量无语义标签。原因是语义化带来的好处不足以其耗费人力物力去重写网站。

2.说说盒模型?

得分点 标准盒模型、怪异盒模型、`box-sizing:border-box`、盒模型大小

1,CSS盒模型本质是一个盒子,包含 padding、border、margin、content。盒模型分为两类,W3C标准盒模型和IE怪异盒模型,一般我们的盒子默认是标准盒模型。

2,两者区别是标准盒模型的实际宽高会把padding和border计算在内,而怪异盒模型不会。

3,形成怪异盒模型的条件是box-sizing:border-box;形成标准盒模型的条件box-sizing:content-box。

3.说一下浮动?

得分点 脱离文档流、盒子塌陷、 影响其他元素排版、伪元素 、`overflow:hidden` 、标签插入法

1. 浮动的作用:设置浮动的图片,可以实现文字环绕图片,设置了浮动的块级元素可以排列在同一行,设置了浮动的行内元素可以设置宽高,同时可以按照浮动设置的方向对齐排列盒子。

2. 浮动特点: 脱离文档流,盒子塌陷,影响其他元素排版

3. 解决塌陷:
(1)额外标签法(隔墙法):在最后一个浮动标签后添加一个标签,给其设置clear:both,如果清除了浮动父元素自动检测盒子最高的高度,然后与其同高。

(2)父元素添加overflow属性,overflow: hidden。

(3)父级添加after伪元素(推荐做法)。

(4)父级添加before和after双伪元素。 

4. 清除浮动的特点:

4. 样式优先级的规则是什么?

得分点 `!important`、行内样式、嵌入样式、外链样式、id选择器、类选择器、标签选择器、复合选择器、通配符、继承样式

1.!important、 2.行内样式>(嵌入样式、外链样式)、 3.id选择器(#id{}) >(类选择器(.class{})、伪类选择器( :hover{})、属性选择器(a[href="segmentfault.com"]{}))>(后代选择器(.father .child{})、伪元素选择器( ::before{}))>(子选择器(.father > .child{})、相邻选择器( .bro1 + .bro2{}))>通配符选择器(*{})、 4.继承样式、 5.浏览器默认样式 

5. 说一说CSS尺寸设置的单位?

得分点 px、rem、em、vw、vh

(1)css一共有五个长度单位,分别是px,em,rem,vw,vh

(2)除了px是绝对单位,其他都是相对单位。

(3)em相对于自身大小(但在font-size中相对于父元素字体大小)

(4)rem相对于根元素的字体大小

(5)vw相对于可视化窗口的宽(1vw就是1%可视化窗口宽度)

(6)vh相对于可视化窗口的高(1vh就是1%可视化窗口高度)

(7)一般采用rem+媒体查询或者rem+vw来实现响应式布局。原理是当窗口大小发生变化时,通过媒体查询或者vw改变根元素的字体大小,从而改变以rem为单位的元素大小
 

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

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

相关文章

嵌入式系统在物联网中的应用与发展趋势

嵌入式系统在物联网中的应用与发展趋势 应用领域 智能家居 嵌入式系统在物联网中的应用领域之一是智能家居。通过嵌入式系统,智能家居可以实现远程控制、自动化管理和智能化交互,包括智能灯光控制、智能家电控制、智能安防系统等。 智能交通 另一个…

深圳市萨科微半导体有限公司

深圳市萨科微(www.slkoric.com)半导体有限公司一直研究新材料新工艺,不断推出新产品,驱动公司不断发展。最近萨科微slkor推出SL40T120FL系列IGBT单管,和CMOS运算放大器SLA333等产品,为新能源汽车、太阳能光…

密码学——离散对数

引言 离散对数 Discrete logarithm 是一种基于同余和原根的对数运算。如 l o g b a logb^a logb

汽车资讯|汽车资讯网站|基于Springboot的汽车资讯网站设计与实现(源码+数据库+文档)

汽车资讯网站目录 目录 基于Springboot的汽车资讯网站设计与实现 一、前言 二、系统功能设计 三、系统实现 1、管理员模块的实现 (1)用户信息管理 (2)汽车品牌管理 (3)经销商信息管理 &#xff08…

大语言模型推理加速技术:模型压缩篇

原文:大语言模型推理加速技术:模型压缩篇 - 知乎 目录 简介 量化(Quantization) LLM.int8() GPTQ SmoothQuant AWQ 精简Attention 共享Attention参数 Multi-Query Attention Grouped-Query Attention 稀疏Attention Sliding Window Attenti…

Win10的Office中没有Mathtype

最近将Win10的Office更新到2021版本后,打开word后发现工具栏的Mathtype没有了,但是其他选项卡还在,上网搜索之后,发现原因在于Office 2021的Mathtype选项卡打开路径文件没有更新……。 所以我们需要将mathtype对应文件复制到新的…

怎样用眼精星将护照识别成结构化数据,并批量导出为Excel?

随着科技的不断发展,我们的生活和工作变得越来越便利。其中,眼精星票证识别系统作为一种高效的信息提取工具,在许多领域都得到了广泛应用。将护照信息快速准确地提取并整理成excel格式,对于许多行业来说都是非常有用的。那么&…

回归预测 | Matlab实现PSO-BiLSTM-Attention粒子群算法优化双向长短期记忆神经网络融合注意力机制多变量回归预测

回归预测 | Matlab实现PSO-BiLSTM-Attention粒子群算法优化双向长短期记忆神经网络融合注意力机制多变量回归预测 目录 回归预测 | Matlab实现PSO-BiLSTM-Attention粒子群算法优化双向长短期记忆神经网络融合注意力机制多变量回归预测预测效果基本描述程序设计参考资料 预测效果…

2024年sCrypt编程马拉松即将开幕

BSV区块链的建设者们,你们在哪?2024年sCrypt编程马拉松即将拉开帷幕! 2024年3月16日至17日,我们将在旧金山市举办一场以比特币智能合约(即 sCrypt)和比特币通证(如Ordinals)相结合为…

kali安装ARL灯塔(docker)

1、root身份进入容器 ┌──(root㉿Kali)-[~/桌面] └─# su root ┌──(root㉿Kali)-[~/桌面] └─# docker 2、先更新再克隆 ┌──(root㉿Kali)-[~/桌面] └─# apt-get update …

十一、计算机视觉-膨胀操作

文章目录 前言一、什么是膨胀二、膨胀操作的实现1.引入库 三、膨胀的原理 前言 上节我们学习了腐蚀操作,本节我们讲一下膨胀操作,膨胀和腐蚀实际上是相反的操作。上节我们把云峰这2个字周围没用的像素去掉了,但是云峰这2个字也变细了&#x…

【Flutter/Android】新建项目,打开android 目录,报错红色以及开启 MultiDex 配置

1 报错红色问题。 单独打开 Flutter 项目下的 android 项目即可。 也就是说,你要一部分原生代码开发,你就需要自己把 android 项目单独出去做(其实就相当于android 项目引用 Flutter的dart部分)。也就是说,在 Flutter…

C语言代码 在屏幕上输出9*9乘法口诀表

在屏幕上输出9*9乘法口诀表。 代码示例&#xff1a; #include <stdio.h>int main() {int i 0;for (i 1; i < 9; i)//打印所有行的循环{int j 0;for (j 1; j < i; j)//打印每一行中所有列的循环{printf("%d*%d%-2d ", i, j, i * j);//%-2d的意思是两…

C++面试 -操作系统-架构能力:系统网络性能评估与优化

系统网络性能评估与优化是指对计算机系统中的网络部分进行评估分析&#xff0c;并采取一系列措施来提升网络性能的能力。在面试中&#xff0c;涉及这一主题的问题可能会围绕以下几个方面展开。 网络性能评估 基于网络延迟、带宽、吞吐量等指标对网络性能进行评估。使用工具&a…

WPF 附加属性+控件模板,完成自定义控件。建议观看HandyControl源码

文章目录 相关连接前言需要实现的效果附加属性添加附加属性&#xff0c;以Test修改FontSize为例依赖属性使用触发器使用直接操控 结论 控件模板&#xff0c;在HandyControl的基础上面进行修改参考HandyControl的源码控件模板原型控件模板 控件模板触发器完整样式简单使用 结论 …

PROTEL

PROTEL是什么 Protel软件是由Altium公司&#xff08;原为Protel Technology公司&#xff09;开发的一款电子设计自动化&#xff08;EDA&#xff09;软件&#xff0c;主要用于电子电路设计和印制电路板&#xff08;PCB&#xff09;制作。 学习Protel 99 SE的大致过程 原理图文…

将仓库A中的部分提交迁移到仓库B中

结论&#xff1a; 使用git format-patchgit am即可实现 使用场景&#xff1a; 例如仓库A这里有5个提交记录&#xff0c;commitid1, commitid2, commitid3, commitid4&#xff0c;commitid5 仓库B想用仓库A中提交的代码&#xff0c;手动改比较慢&#xff0c;当改动较多的时候…

【linux进程信号(一)】信号的概念以及产生信号的方式

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:Linux从入门到精通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学更多操作系统知识   &#x1f51d;&#x1f51d; 进程信号 1. 前言2. 信号的基…

java数据结构与算法刷题-----LeetCode501. 二叉搜索树中的众数

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 解题思路 二叉搜索树&#xff0c;是有序的&#xff0c;而其中序遍历正好是…

keil的首次尝试,芯片为stm32F103C6T6

已经试了一下&#xff0c;吐槽这个软件的使用好麻烦啊 安装 然后先去安装对应的pack 这个鬼玩意里找对应的芯片&#xff0c;或者去官网上下载 我是在这里搜到芯片&#xff0c;再去官网下载一个驱动 https://www.keil.arm.com/packs/stm32f1xx_dfp-keil/boards/ 会有一个安装…