无法加载

Web前端面试题一

FavoriteLoading收藏

 

1、什么是CSS浮动

浮动:float:left、right、none

作用:想要从上往下排列的元素变成从左到右或从右到左排列。

如果子元素有浮动,那么父元素一定要设置高度;浮动之后脱离文档流,不占据原来的位置;子元素浮动,如果子元素的宽度的和大于父元素的宽度,那么子元素就会往下去排列;

2、绝对定位和相对定位怎么理解 

绝对定位:absolute

参照物:相对于浏览器额可视窗口或者最近的有定位的(非static)父级元素来定位

特点:给元素设置绝对定位后,元素会脱离文档流,不占据原来的位置,下面的元素可以往上走

相对定位:relative

参照物:元素本身的位置

特点:移动之后还占据着原来的位置,不脱离文档流

3、块元素和行内元素的区别是什么 

(1)块级元素:独占一行,可以设置宽高,块级元素可以作为所有内联元素的容器和部分块级元素的容器,常用的块级元素有:div,p,dl,dt,dd,ol,ul,fieldset,h1-h6,p,from,table,tr,td

(2)行内元素:不独占一整行,不可以设置宽高,宽高由内容撑开,行内元素也遵循盒子模型,但是margin-top、margin-bottom、padding-top、padding-bottom是没有效果的。常用的行内元素:a、span、i、b、em、br、sub、u

行内块元素:img、input、textarea

注意:当元素浮动(float)时会转化成行内块元素特点。

4、Href 和 src的区别

href标识超文本引用,用在link和a等元素上,href是引用和页面关联,是在当前元素和引用资源之间建立联系

 src表示引用资源,表示替换当前元素,用在img,script,iframe上,src是页面内容不可缺少的一部分。

5、Css如何实现盒子水平垂直居中

无法加载
无法加载
无法加载

6、常见的浏览器内核和前缀有哪些? 微信的浏览器内核是什么

Chrome(谷歌浏览器) :  WebKit内核     -webkit-

 Safari(苹果浏览器) :   WebKit内核       -webkit-

 Firefox(火狐浏览器) :  Gecko内核        -moz-

 IE(IE浏览器) :             Trident内核         -ms-

 Opera(欧朋浏览器) :   Presto内核          -o-

 微信的浏览器内核:X5内核是腾讯基于开源Webkit优化的浏览器渲染引擎

7、CSS3有哪些新特性?

1)选择器 2)CSS3 边框(Borders)(圆角边框,添加阴影框) 3)CSS3 背景(background-clip、background-size) 4)CSS3 渐变(线性渐变、径向渐变) 5)CSS3 文本效果(text-overflow、text-shadow) 6)CSS3 字体 7)CSS3 转换和变形(transform) 8)CSS3 过渡(transition) 9)CSS3 动画(animation) 10)CSS3 多媒体查询 11)CSS3伸缩布局盒模型(弹性盒)

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

单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。(伪元素由双冒号和伪元素名称组成)

双冒号是在当前规范中引入的,用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法,

比如:first-line、:first-letter、:before、:after等,

而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。

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

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

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

9、怎么让Chrome支持小于12px 的文字

 针对谷歌浏览器内核,加webkit前缀,用transform:scale()这个属性进行缩放!

<style>
p{
 -webkit-transform:scale(0.8);
}
</style>
<p>
  测试
</p>

10、CSS优化、提高性能的方法有哪些?

加载性能:

1)css压缩:将写好的css进行打包压缩,可以减少很多的体积;

2) css单一样式:当需要下边距和左边距的时候,

很多时候选择:margin: top 0 bottom 0;

但 margin-bottom: bottom;margin-left: left;执行的效率更高;

3) 减少使用 @import, 而建议使用link, 因为后者在页面加载时一起加载,前者是等待页面加载完成之后再进行加载;

选择器性能:

CSS选择符是从右到左进行匹配的。当使用后代选择器的时候,浏览器会遍历所有子元素来确定是否是指定的元素等等;

**避免使用通配规则**

如*{} 计算次数惊人!只对需要用到的元素进行选择

**尽量少的去对标签进行选择,而是用class**

如:#nav li{},可以为li加上nav_item的类名,如下选择.nav_item{}

**不要去用标签限定ID或者类选择符**

如:ul#nav,应该简化为#nav

**尽量少的去使用后代选择器,降低选择器的权重值**

后代选择器的开销是最高的,尽量将选择器的深度降到最低,最高不要超过三层,更多的使用类来关联每一个标签元素

**考虑继承**

了解哪些属性是可以通过继承而来的,然后避免对这些属性重复指定规则

渲染性能:

1.慎重使用高性能属性:浮动、定位;

2.尽量减少页面重排、重绘;

重排按照css的书写顺序:

·位置:positon、top、left、z-index、float、dispay

·大小:width、height、margin、padding

·文字系列: font、line-height、color、letter-spacing

·背景边框:background、 border

·其它:anmation、transition

重绘:border、outline、background、box-shadow,能使用background-color,就尽量不要使用background;

3.去除空规则:{};

4.属性值为0时,不加单位;

5.属性值为浮动小数0.**,可以省略小数点之前的0;

6.标准化各种浏览器前缀:带浏览器前缀的在前。标准属性在后;

7.不使用@import前缀,它会影响css的加载速度;

8.充分利用css继承属性,减少代码量;

9.抽象提取公共样式,减少代码量;

10.选择器优化嵌套,尽量避免层级过深;

11.css雪碧图,同一页面相近部分的小图标,方便使用,减少页面的请求次数,但是同时图片本身会变大,使用时,优劣考虑清楚,再使用;

12.将css文件放在页面最上面

可维护性、健壮性:

1 将具有相同属性的样式抽离出来,整合并通过class在页面中进行使用,提高css的可维护性;

2 继上一条,oocss也是提高css性能的途径之一,通过定义可复用的、语义化良好的基础类,然后添加到html中,这也是很多ui框架都在使用的一种方法,例如:class=”btn btn-active btn-blue”;

3 样式与内容分离:讲css代码定义到外部css中;

4 容器与样式分离;

留下评论

微信:15182814906

QQ:1548902957

邮箱:1548902957@qq.com