牛客前端八股文

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为单位的元素大小

相关推荐
胡萝卜术2 小时前
从API调用到手写LRU:力扣146「LRU缓存」的哈希表+双向链表终极进化之路
前端·javascript·面试
科技道人2 小时前
记录 默认置灰/禁用 app ‘Search Engine Selector‘ 的disable按钮
开发语言·前端·javascript
天疆说2 小时前
Zotero Connector 在 Edge 里找不到桌面 Zotero(Linux / Zotero 9.0.6 / Edge 150)
linux·前端·edge
ffqws_2 小时前
Redis 分布式锁:基于 Redisson 的实现与面试高频问答
redis·分布式·面试
李伟_Li慢慢4 小时前
02-从硬件说起WebGL
前端·three.js
kyriewen5 小时前
看了微软几万人用AI编程的数据——效率涨24%的代价没人提
前端·ai编程·claude
2601_963771375 小时前
How to Scale Your WordPress Store Traffic in 2026
前端·php·plugin
亿元程序员5 小时前
老板说我的3D箭头游戏用来做试玩太普通了,没人想玩,让我变点花样...
前端
李伟_Li慢慢5 小时前
01-threejs架构原理-课程简介
前端·three.js
_瑞7 小时前
深入理解 iOS 渲染原理
前端·ios