一阶段面试题

2024-04-04 23:56:12

一阶段面试题

1. img中的alt和title的区别

alt: 图片未加载时候的提示文字，title是鼠标划过提示文字

2. rem/em/vw的区别

设置rem的的单位元素，大小都参考根元素(html)的字体大小

1vw是指当前视口宽度的1%

3. BFC 是什么

BFC称为块级格式化上下文，是页面中独立渲染的区域

触发条件：

(1)根元素(html)

(2)float属性不为none

(3)position为absolute或fixed

(4)display为inline-block, table-cell, table-caption, flex, inline-flex

(5)overflow不为visible

特性：

(1)、BFC的区域不会与浮动元素重叠。()
(2)、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。(解决magin上边距塌陷的问题)
(3)、计算BFC的高度时，浮动元素也参与计算(解决高度塌陷问题)

4. @media all (min-width:640px) and (max-width:1024px){ body{min-height:768px} }的含义

媒体查询，当前分辨率在640-1024之间， body的最小高度为768

5. 你做的页面在哪些浏览器测试过，内核是啥

谷歌：webkit(新版后变成了 blink) 2. 火狐：Gecko 3. ie：Trident 4. 欧鹏新版本后是blink

6. 网站文件和资源优化的方法

结构和样式分离 2. 优化重复代码

7. content值里面的意思

width = device-width：视口宽度和设备宽度设置为一致
initial-scale：初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

8. css实现元素水平垂直居中

1.元素{posiiton:absolute;left:50%;top:50%;margin-left:-当前盒子的宽度的一半;marign-top:-当前元素高度的一半}
元素
2.{posiiton:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
元素
3.{posiiton:absolute;left:0;top:0;bottom:0;right:0;margin:auto}
4.父元素{display:flex;justifiy-content:center;align-items:center}

9.盒子阴影和文本阴影

盒子阴影 box-shadow:水平偏移垂直偏移模糊程度阴影颜色;

文本阴影 text-shadow:水平偏移垂直偏移模糊程度阴影颜色;

10. 浮动的应用及清除浮动

块级元素需要横向排列需要用到浮动

清除浮动的方法 ① 父元素overflow:hidden②浮动元素后添加div且设置clear:both；③父元素::after{content:"";clear:both;display:block;height:o;overflow:hidden;visibility:hidden}

11. src和href的区别

src是图片引入路径对应的属性，href是a标签的跳转路径，或者是link的引入css外部样式表对应的属性

12. css选择器的种类

id选择器 class选择器后代选择器群组选择器伪类选择器标签选择器等

13.margin的重叠

给上面的盒子添加下边距，给下面的盒子添加了上边距，边距会产生重叠，以最大值显示,左右会相加

14.display:none与visibility:hidden的区别是什么

两个都是隐藏元素，前者隐藏之后不占位

14. link和@import引入外部样式表的区别

(1)老祖宗的区别link是html提供的方式 @import是css提供的方式，所以只能引入css文件,link还可以引入网页标题旁边的图标
(2)加载顺序，@import引入的css,先加载结构，后加载样式，link引入的css,结构和样式同时加载
(3)浏览器的支持性，link得到所有的浏览器的支持，@import ie6以上才支持
(4)js可以更改通过link引入的样式，但是不能更改@import引入的样式

15. !Doctype 的作用？严格模式与混杂模式的区别？

用于告知浏览器该以何种模式来渲染文档

严格模式下：页面排版及 JS 解析是以该浏览器支持的最高标准来执行

混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容

16. css继承的属性有哪些

文本字体类：letter-spacing、line-height、color、font-family、font-size、font-style、font-weight、text-decoration、text-transform text-indent text-align

列表类： list-style、list-style-type、list-style-position、list-style-image

17. b标签和strong标签,i标签和em标签的区别？

都可以加粗，strong表强调，都可以倾斜，em表强调

18. 请写出至少你知道的HTML5标签

article audio canvas figcaption figure footer header hgroup mark nav section time video

19.语义化的理解

1.html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；

2.在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。

3.搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。

4.使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

20. Html和xhtml有什么区别

XHTML元素必须正确的被嵌套，元素必须关闭，标签必须小写，必须有根元素

21. 移动端布局的常用方法

百分比布局 2.响应式布局 3.rem+vw布局 4.flex布局 5.混合布局

22. 内联块元素之间形成的空白间隙的原因及解决方法

代码之间的回车所导致解决 1. 浮动 2. 设置父元素的字体大小为0 3. 代码写同一行

23. 介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

标准盒模型 box-sizing:content-box;
盒模型的总宽=width+padding左右+border的左右+margin左右
怪异盒模型(ie盒模型) box-sizing:border-box/ie5以下如果缺失文档声明也会触发怪异盒模型
盒模型的总宽=width+margin的左右

24. 渐进增强和优雅降级之间的不同吗?

渐进增强针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

25. 网页制作会用到的图片格式有哪些

gif 支持动画，只有全透明和不透明两种模式，只有 256 种颜色

jpg 采用有损压缩算法，体积较小，不支持透明，不支持动画

png 采用有损压缩算法，体积也相对较小，支持透明背景，不支持动画

svg 一般会保存颜色及形状相对简单的图片，可任意放大图形显示，边缘异常清晰

BMP 无损压缩格式，画质最好，文件太大，不利于网络传输

26. rgba()和 opacity 的透明效果有什么不同

rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）

27. 为什么要初始化样式？(重置样式表)

由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异但是初始化 CSS 会对搜索引擎优化造成小影响

28. 如何让 chrome 浏览器显示小于 12px 的文字

webkit-transform:scale(0.833); 0.833 是缩放比例

29. 网页中如何需要加载大量图片会很慢，应该如何优化

(1)图片懒加载，在页面中看不到的底部区域添加一个滚动条事件判断图片位置距离浏览器顶端的距离与页面的距离，如果前者小于后者,优先加载

(2)·如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载

(3)·如果图片为css 图片，可以使用CSSsprite(精灵图)，SVGsprite(精灵图)，lconfont(字体图标)(精灵图，小图标…)

(4)如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验

（5）如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验

30. 弹性盒的布局属性有哪些

父元素：

diaplay:flex 形成弹性盒

主轴方向 flex-direction: row 主轴从左向右默认值/row-revese 主轴从右向左 /column 主轴从上到下 /column-reverse 主轴从下到上

主轴方向排列方式 justify-content:flex-start 主轴起点默认值 /flex-end 主轴终点 /center 居中 /space-between 两端对齐/space-around 中间的留白是两边的 2 倍 /space-evenly 平均分配留白

交叉轴排列方式 align-items :stretch 拉伸默认值去掉子元素的高度 /宽度/flex-start 交叉轴的起点 / flex-end 交叉轴的终点/center 居中

换行 flex-wrap:nowrap 不换行,默认值，会将子元素压缩 /wrap 换行/ wrap-reverse 反向换行

多行之间的排列方式 align-content :stretch 拉伸默认值需要去掉子元素的高/flex-start 主轴起点依次排列/flex-end 主轴终点依次排列 /center 居中 /space-between 两端对齐 /space-around 中间的两端的 2 倍 /space-evenly 平均分配

子元素：

重写子项对应的交叉轴的对齐方式 align-self :stretch 拉伸默认值去掉子元素的高度/flex-start 交叉轴的起点 /flex-end 交叉轴的终点 /center 居中 /

放大 flex-grow:0 不放大 / 数值填充剩余的空间

压缩 flex-shrink:1 压缩 /0 不压缩

实现导航的滚动效果

a. 子项的宽度超出了父容器的宽度

b. 设置子项不压缩 flex-shrink:0;

c. 父元素设置溢出显示滚动条 overflow-x:auto;

子项的宽度 flex-basis:数值+px 类似于宽度

复合写法 flex:子项放大子项压缩子项宽

排序 order 数值值越大越向后，可以设置负数

31.常见的兼容性一阶段内容中记几个

在 ie 浏览器中，a 标签套图片，图片周围会自带边框 ie10 及以下

1. 解决：去掉边框 img{border:none}

图片自带底部 3px 的留白

   1. vertical-align: bottom/middle/top 给图片添加 
   2. display:block; 给图片添加
   3.  font-size:0; 给父元素添加

表单元素对齐不一致比如按钮和input 按钮按照怪异盒接卸 text按照标准盒子解析
```
  	1. 设置怪异盒模型 
  	2. 设置浮动
```
透明度 opacity 在 ie 浏览器中不支持 0-1

opacity 的值照常设置，适应正常的浏览器

单独设置 ie 中透明属性：filter:alpha(opacity=value);取值范围 value:

1-100(整数)1 完全透明 100 不透明

5. 双倍浮向（双倍边距）（只有IE6出现）两个块级元素浮动且添加左边距的时候，正常浏览器如果左边距是20px，在ie6会解析程40px

解决：给float的元素添加一个display：inline

32.常见的浏览器内核有哪些

ie 浏览器：Trident

火狐：Gecko 代码开源

苹果 & 谷歌旧版本: Webkit

谷歌 & 欧鹏: Blink

33..css 实现边框三角形

div {

width: 0;height: 0;

border: 20px solid transparent; border-top: 20px solid pink;

}

码农公寓