欢迎来到知海社区首页!
|

知海全国 ∨我要报名》 咨询热线:400-878-6338

知海社区>全部版块>技术交流

web前端面试题及答案 css篇

阅读17回复0 张杰发表于 2018-02-02 14:47 楼主

1.CSS3有哪些新特性?

CSS3实现圆角(border-radius),

阴影(box-shadow),

对文字加特效(text-shadow、),

线性渐变(gradient),

旋转(transform)transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

增加了更多的CSS选择器 多背景 rgba 

在CSS3中唯一引入的伪元素是::selection.

媒体查询,多栏布局,border-image;

2.XML和JSON的区别?

(1).数据体积方面。JSON相对于XML来讲,数据的体积小,传递的速度更快些。

(2).数据交互方面。JSON与JavaScript的交互更加方便,更容易解析处理,更好的数据交互。

(3).数据描述方面。JSON对数据的描述性比XML较差。

(4).传输速度方面。JSON的速度要远远快于XML。

3.对BFC规范的理解?

BFC,块级格式化上下文,一个创建了新的BFC的盒子是独立布局的,盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向(和布局方向有关系)的margin会发生折叠。    (W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行布局,以及与其他元素的关系和相互作用。)

4.解释下 CSS sprites,以及你要如何在页面或网站中使用它。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确;

5.position的值, relative和absolute分别是相对于谁进行定位的?

absolute 生成绝对定位的元素, 相对于最近一级的 定位不是 static 的父元素来进行定位。

fixed (老IE不支持) 生成绝对定位的元素,相对于浏览器窗口进行定位。 

relative 生成相对定位的元素,相对于其在普通流中的位置进行定位。 

static 默认值。没有定位,元素出现在正常的流中。

6.display:none和visibility:hidden的区别?

display:none 隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢,就当他从来不存在。

visibility:hidden 隐藏对应的元素,但是在文档布局中仍保留原来的空间。

7.CSS中 link 和@import 的区别是?

(1) link属于HTML标签,而@import是CSS提供的; 

(2) 页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;

(3) import只在IE5以上才能识别,而link是HTML标签,无兼容问题; 

(4) link方式的样式的权重 高于@import的权重.

8.position:absolute和float属性的异同?

A:共同点:对内联元素设置`float`和`absolute`属性,可以让元素脱离文档流,并且可以设置其宽高。

B:不同点:float仍会占据位置,position会覆盖文档流中的其他元素。

9.介绍一下box-sizing属性?

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。

content-box:让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定,设置width/height属性指的是content部分的宽/高

border-box:让元素维持IE传统盒模型(IE6以下版本和IE6~7的怪异模式)。设置width/height属性指的是border + padding + content

标准浏览器下,按照W3C规范对盒模型解析,一旦修改了元素的边框或内距,就会影响元素的盒子尺寸,就不得不重新计算元素的盒子尺寸,从而影响整个页面的布局。

10.CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?

1.id选择器( # myid)

2.类选择器(.myclassname)

3.标签选择器(div, h1, p)

4.相邻选择器(h1 + p)

5.子选择器(ul > li)

6.后代选择器(li a)

7.通配符选择器( * )

8.属性选择器(a[rel = "external"])

9.伪类选择器(a: hover, li:nth-child)

可继承的样式: font-size font-family color, text-indent;

不可继承的样式:border padding margin width height ;

优先级就近原则,同权重情况下样式定义最近者为准;

载入样式以最后载入的定位为准;

!important > id > class > tag 

css3新增伪类:

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

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

p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。

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

:enabled :disabled 控制表单控件的禁用状态。

:checked 单选框或复选框被选中。


0

您需要登录后才可以回帖   登录 |注册会员
顶部