牛客前端八股文

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{})、属性选择器(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为单位的元素大小

相关推荐
小菜鸟博士14 分钟前
手撕Vision Transformer -- Day1 -- 基础原理
人工智能·深度学习·学习·算法·面试
yashunan33 分钟前
Web_php_unserialize
android·前端·php
m0_zj41 分钟前
17.[前端开发]Day17-形变-动画-vertical-align
前端·css·chrome·html·html5
Edward-tan1 小时前
【玩转全栈】--创建一个自己的vue项目
前端·javascript·vue.js
青年夏日科技工作者2 小时前
虚幻浏览器插件 UE与JS通信
前端·javascript·html
雷神乐乐2 小时前
创建前端项目的方法
前端·javascript·vue.js
prince_zxill2 小时前
JavaScript面向对象编程:Prototype与Class的对比详解
前端·javascript·ecmascript·原型模式
D.eL3 小时前
Vue 2 项目中 Mock.js 的完整集成与使用教程
前端·javascript·vue.js
brzhang3 小时前
墙裂推荐一个在 Apple Silicon 上创建和管理虚拟机的轻量级开源工具:lume
前端·后端
Along丶WG4 小时前
解决国内服务器 npm install 卡住的问题
前端·npm·node.js