0
点赞
收藏
分享

微信扫一扫

音视频如何快速转二维码?在线生成音视频活码的教程

窗外路过了谁 03-16 08:30 阅读 4

HTML5、CSS3面试题(三)-CSDN博客

简述弹性盒子 flex 布局及 rem 布局?(必会)

rem 是 CSS3 新增的一个相对单位,相对于根节点(html)字体大小的值,r 就是 root

html{font-size:10px} 则 2rem=20px

通过它就可以做到只修改根元素的大小,就能成比例地调整所有的字体大小,只依赖 html

字体的大小

适配方案步骤:

1、首先动态计算 html 的 font-size

2、将所有的 px 换算成 rem(计算过程请看下面代码和注释(注意:rem 的换算是根

据设计图稿的像素计算的,下面的计算只是动态计算 html 的 font-size 大小)

important 的作用?(必会)

!important,作用是提高指定样式规则的应用优先权(优先级)。语法格式

{ cssRule !important },即写在定义的最后面,例如:box{color:red !important;}。

在 CSS 中,通过对某一样式声明! important ,可以更改默认的 CSS 样式优先级规则, 使

该条样式属性声明具有最高优先级

浏览器识别

ie7 及 ie7+,firefox,chrome 等浏览器下,已经可以识别 !important 属性, 但是 IE

6.0IE6 及更早浏览器下仍然不能完全识别。important 的样式属性和覆盖它的样式属性单

独使用时(不在一个{}里),IE 6.0 认为! important 优先级较高,否则当含! important 的样

式属性被同一个{}里的样式覆盖时,IE 6.0 认为! important 较低

如何解决 margin“塌陷”?(必会)

外边距塌陷共有两种情况:

第一种情况:两个同级元素,垂直排列,上面的盒子给 margin-bottom 下面的盒子给

margin-top,那么他们两个的间距会重叠,以大的那个计算。解决这种情况

的方法为:两个外边距不同时出现

第二种情况:两个父子元素,内部的盒子给 margin-top,其父级也会受到影响,同时产生

上边距,父子元素会进行粘连,决绝这种情况的方法为:父级添加一个 css 属性,overflow:

hidden,禁止超出

外边距重叠就是 margin-collapse

解决方案:

1、为父盒子设置 border,为外层添加 border 后父子盒子就不是真正意义上的贴合(可

以设置成透明:border:1px solid transparent);

2、为父盒子添加 overflow:hidden;

3、为父盒子设定 padding 值;

4、为父盒子添加 position:fixed;

5、为父盒子添加 display:table;

6、利用伪元素给父元素的前面添加一个空元素

什么是外边距重叠?重叠的结果是什么?

外边距重叠

外边距重叠指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距

的高度等于两个发生合并的外边距的高度中的高度如果都是正边界,边界宽度是相邻边界

宽度中最大的值。如果出现负边界,则在最大的正边界中减去绝对值最大的负边界。如果

没有正边界,则从零中减去绝对值最大的负边界。只有外边距才可以是负值,内边距不允

许为负值

在 CSS 中,相邻的两个盒子的外边距可以结合成一个单独的外边距,这种合并外边距的方

式被称为折叠,并且因而所结合成的外边距称为折叠外边距

重叠情况

1、两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值

2、两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值

3、两个外边距一正一负时,折叠结果是两者的相加的和

4、外边距不重叠的情况

水平 margin 永远不会重合

设置了 overflow 属性(visible 除外)的元素和它的子元素之间的 margin 不会重叠

设置了绝对定位(position:absolute)的盒模型,垂直 margin 不会被重叠,和子元素之 间

也不重叠

设置了 display:inline-block 的元素,垂直 margin 不会重叠,和子元素之间也不重叠

根元素(如 html)与 body 的 margin 不会重叠

5、防止外边距重叠的方法

元素绝对定位 postion:absolute;一般用在内层元素

内层元素 加 float:left;或 display:inline-block;

外层元素用 padding 增加边距

外层元素设置 overflow:hidden;

内层元素透明边框 border:1px solid transparent;

HTML5 的 input 增加哪些 type?(必会)

在 HTML5 中,为 input 元素新增了以下一些 type 属性值,用来丰富文本框的类型。

color:用于指定颜色的控件 dao

date:用于输入日期的控件(年,月,日,不包括时间)

datetime:基于 UTC 时区的日期时间输入控件(时,分,秒及几分之一秒)

datetime-local:用于输入日期时间控件,不包含时区

email:用于编辑 e-mail 的字段

month:用于输入年月的控件,不带时区

number: 用于输入浮点数的控件

range:用于输入不精确值控件

search:用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除

tel:用于输入电话号码的控件

time:用于输入不含时区的时间控件

url:用于编辑 URL 的字段

week:用于输入一个由星期-年组成的日期,日期不包括时区

30、雪碧图 ( 精灵图 )?(必会)

雪碧

是把网站上用到的一些图片整合到一张单独的图片中,从而减少你的网站的 HTTP 请求数

量,该图片使用 css background 和 background-position 属性渲染,这也就意味着你的

签变得更复杂了,图片是在 css 中定义,并非在<img>标签中

优点:

1、减少网页的 http 请求,从而加快了网页加载速度,提高用户体验

2、减少图片的体积,因为每个图片都有一个头部信息,把多个图片放到一个图片里,就会

共用同一个头信息,从而减少了字节数

3、解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需

要对每一个小元素进行命名

4、更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就

可以改变

缺点:

1、在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂

2、CSS Sprites 在开发的时候,要通过 photoshop 或其他工具测量计算每一个背景单元

的精确位置

3、在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片

4、精灵图不能随意改变大小和颜色。改变大小会失真模糊,降低用户体验,CSS3 新属性

可以改变精灵图颜色,但是比较麻烦,并且新属性有兼容问题,现在一般用字体图标

代替精灵图

less 和 Scss 的配置使用以及特点?(必会)

less

安装依赖

1 npm install less less-loader --save

或者

2 cnpm install less less-loader --save

修改配置

在 vue 项目中 build/webpack.base.conf.js:

moduls 对象的 rules 数组中最后添加

{

test: /\.less$/,

loader: "style-loader!css-loader!less-loader"

}

引入

在每个想要使用 less 的 vue 文件中

style 加上 lang=“less”

1 <style lang="less" scoped>

2 </style>

SCSS 即是 SASS 的新语法,是 Sassy CSS 的简写,是 CSS3 语法的超集,也就是说所有有

效的 CSS3 样式也同样适合于 SASS

SASS 是 CSS3 的一个扩展,增加了规则嵌套、变量、混合、选择器继承等等。通过使用命

令行的工具或 WEB 框架插件把它转换成标准的、格式良好的 CSS 代码

SCSS 是 SASS 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 SASS 的强大功能。

唯一不同的是,SCSS 需要使用分号和花括号而不是换行和缩进

SCSS 对空白符号不敏感

安装步骤:

npm install node-sass --save-dev

//安装 node-sass

npm install sass-loader --save-dev

//安装 sass-loader

npm install style-loader --save-dev

//安装 style-loader

出现以下问题可能是版本错误

Modele build failed: TypeError: this.getResolve is not a function at Object.loader...

处理方法

将 "sass-loader": "^8.0.0",更换成了 "sass-loader": "^7.3.1"

package.json 中查找替换

npm install

npm run dev

特性:

一、(节点)可嵌套性

这个是基础,用的太多太多了,必须掌握

二、变量

变量以$开头(通常网站会有基础变量,譬如基础字体,基础色调等,可以将他们赋值给一

个变量,以后调用变量就好了,很类似 js 里的变量)

三、 Mixins(混合@mixin):可重用性高,可以注入任何东西

注意点:

1、可以相互调用,但是不能拿自己调用自己,形成递归

2、通过@include 引用

四、@extend:允许一个选择器继承另一个选择器

五、 @function:函数功能,用户使用@function 可以去编写自己的函数(常用)

使用语法: 使用 @function+函数名称,每个函数都需要有返回值的内容

六、引用父元素&:在编译时,&将被替换成父选择符(常用)

七、计算功能(会用 但是不多吧)

八、组合连接: #{} : 变量连接字符串(目前用到的是这个)

九、循环语句:(很少用到)

十、if 语句:(很少用到)

::before 和::after 中双冒号和单冒号有什么区别、作用?

(必会)

区别

在 CSS 中伪类一直用 : 表示,如 :hover, :active 等

伪元素在 CSS1 中已存在,当时语法是用 : 表示,如 :before 和 :after

后来在 CSS3 中修订,伪元素用 :: 表示,如 ::before 和 ::after,以此区分伪元素和伪类

由于低版本 IE 对双冒号不兼容,开发者为了兼容性各浏览器,继续使使用 :after 这种老语

法表示伪元素

单冒号(:)用于 CSS3 的伪类

双冒号(::)用于 CSS3 的伪元素

想让插入的内容出现在其它内容前,使用::before,否者,使用::after;

在代码顺序上,::after 生成的内容也比::before 生成的内容靠后

如果按堆栈视角,::after 生成的内容会在::before 生成的内容之上

作用:

::before 和::after 的主要作用是在元素内容前后加上指定内容

伪类与伪元素都是用于向选择器加特殊效果

伪类与伪元素的本质区别就是是否抽象创造了新元素

伪类只要不是互斥可以叠加使用

伪元素在一个选择器中只能出现一次,并且只能出现在末尾

伪类与伪元素优先级分别与类、标签优先级相同

CSS3 新增伪类,以及伪元素?(必会)

CSS3 新增伪类

p:first-of-type 选择属于其父元素的首个<p>元素的每个<p>元素

p:last-of-type 选择属于其父元素的最后<p>元素的每个<p>元素

p:nth-child(n) 选择属于其父元素的第 n 个子元素的每个<p>元素

p:nth-last-child(n) 选择属于其父元素的倒数第 n 个子元素的每个<p>元素

p:nth-of-type(n) 选择属于其父元素第 n 个<p>元素的每个<p>元素

p:nth-last-of-type(n)

选择属于其父元素倒数第 n 个<p>元素的每个<p>元素

p:last-child 选择属于其父元素最后一个子元素的每个<p>元素

p:target

选择当前活动的<p>元素

:not(p) 选择非<p>元素的每个元素

:enabled 控制表单控件的可用状态

:disabled

控制表单控件的禁用状态

:checked

单选框或复选框被选中

伪元素

::first-letter 将样式添加到文本的首字母

::first-line 将样式添加到文本的首行

::before 在某元素之前插入某些内容

::after

在某元素之后插入某些内容

mg 的 alt 与 title 的异同,还有实现图片懒加载的原理

(必会)

异同

alt 是图片加载失败时,显示在网页上的替代文字; title 是鼠标放上面时显示的文字,title

是对图片的描述与进一步说明;

这些都是表面上的区别,alt 是 img 必要的属性,而 title 不是

对于网站 seo 优化来说,title 与 alt 还有最重要的一点: 搜索引擎对图片意思的判断,主

要靠 alt 属性。所以在图片 alt 属性中以简要文字说明,同时包含关键词,也是页面优化的

一部分。条件允许的话,可以在 title 属性里,进一步对图片说明

由于过多的图片会严重影响网页的加载速度,并且移动网络下的流量消耗巨大,所以

说延迟加载几乎是标配了

原理

图片懒加载的原理很简单,就是我们先设置图片的 data-set 属性(当然也可以是其他任意的,

只要不会发送 http 请求就行了,作用就是为了存取值)值为其图片路径,由于不是 src,所

以不会发送 http 请求。 然后我们计算出页面 scrollTop 的高度和浏览器的高度之和, 如果

图片举例页面顶端的坐标 Y(相对于整个页面,而不是浏览器窗口)小于前两者之和,就

说明图片就要显示出来了(合适的时机,当然也可以是

其他情况),这时候我们再将

data-set 属性替换为 src 属性即可

什么是媒体查询?(必会)

媒体查询

就是响应式布局。通过不同的媒介类型和条件定义样式表规则。媒介查询让 CSS 可以更精

确作用于不同的媒介类型和同一媒介的不同条件

语法结构及用法:@media 设备名 only (选取条件) not (选取条件) and(设备选取

条件),设备二{sRules}

媒体查询是向不同设备提供不同样式的一种不错方式,它为每种类型的用户提供了最佳的

体验。作为 CSS3 规范的一部分,媒体查询扩展了 media 属性(控制您的样式应用方式)

的角色。媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:

横向或纵向)为其设定 CSS 样式,媒体查询中可用于检测的媒体特性有 width 、 height

和 color (等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设

备定制显示效果

BFC 是什么?(高薪常问)

定义

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,

只有 Block-level box 参与,它规定了内部的 Block-level Box 如何布局,并且与这个区

域外部毫不相干

布局规则

1、内部的 Box 会在垂直方向,一个接一个地放置

2、Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin

会发生重叠

3、每个元素的 margin box 的左边, 与包含块 border box 的左边相接触(对于从左往

右的格式化,否则相反)。即使存在浮动也是如此

4、BFC 的区域不会与 float box 重叠

5、BFC 就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反

之也如此

6、计算 BFC 的高度时,浮动元素也参与计算

哪些元素会生成 BFC:

1、根元素

2、float 属性不为 none

3、position 为 absolute 或 fixed

4、display 为 inline-block, table-cell, table-caption, flex, inline-flex

5、overflow 不为 visible

举报

相关推荐

0 条评论