牛客前端八股文

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双伪元素。

  1. 清除浮动的特点:

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

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

1.!important、 2.行内样式>(嵌入样式、外链样式)、 3.id选择器(#id{}) >(类选择器(.class{})、伪类选择器( :hover{})、属性选择器(ahref="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为单位的元素大小

相关推荐
独孤九剑打醒他10 小时前
【原创开源】【概念设计】源 - 栅 - 漏 - 栅 - 源 横向双栅 MOS,低压交流多值逻辑芯片探索
前端·其他·架构·开源·硬件工程
mantou13211 小时前
我给 AI Agent 做了个「油猴」:让 Claude Code / Codex 直接用你已登录的浏览器
前端·javascript·后端
默_笙11 小时前
🍕 一个主编、三个工种、两本手册:搭一支 AI 调研队
前端·javascript
纸片人11 小时前
Blender 建模 + Three.js 展示:和 AI 一起做一个光储充超充站数字孪生大屏
前端
智能直播11 小时前
网络RTMP拉流不卡顿、声音不同步?一文讲透缓冲区、时间戳与MEDAI V2实战调优
前端
第七页独白11 小时前
汽车零件厂如何通过 QMS 真正落地 IATF 16949——QMS软件系统:品质检验-内审稽核-8d客诉管理:全星质量管理软件系统
java·前端·数据库
纸片人11 小时前
只用 three.js + OpenStreetMap,手搓一个「成都城市 3D」数据大屏
前端
星若生辉11 小时前
Hugo 静态站点搭建|从本地调试到上线部署实操指南
前端
Interview Aid11211 小时前
OpenAI SWE 面试流程
面试·职场和发展
沐浴露z11 小时前
Agent 响应延迟过高?从工具治理角度提供两条思路
前端·网络