CSS3面试题

1.隐藏网页中的元素有几种方式?这些方法有什么区别?

答案:三种方法.

display:none;脱离文档流,不占页面空间,会改变页面布局。

visivility:hidden;不会脱离文档流,不会改变页面布局,仍占页面空间。

opacity:0;该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定

一些事件,如click事件,那么点击该区域,也能触发点击事件.

2.如何解决子元素的上外边距溢出?

答案:在父元素的第一个子元素位置处添加一个空的table标记.

3.常用来设置透明度的方式有几种?他们之间有何区别?

答案:opacity和rgba

opacity能设置与元素相关各种颜色的透明度

rgba()只能设置当前某一种颜色的透明度.

4.浮动会对父元素的高度带来什么影响?如何解决这个问题?

答案:子元素一旦浮动,父元素的高度为0,在父元素最后一个子元素位置处

添加一个空的块级元素,并设置其clear属性为both.

.clear:after{

display:block;

content:"",

clear:both;

}

5.哪些元素默认有外边距?

答案:body,p,h1-h6,ul,ol,dl,pre

6.网页中如何定义锚点?如何连接到锚点位置?

答案:a标记用name定义锚点,其他标记用id属性定义锚点.

连接到锚点的位置:href="#锚点名称";

7.框模型默认的计算方式是什么?要改变默认的计算方式用哪个属性及值?

实际占地宽度=左右外边距+左右边框+左右内边距+width

实际占地高度=上下外边距+上下边框+上下内边距+height

改变计算方式: box-sizing:border-box

8.实现时针转动效果需要用到CSS中哪些关键技术?

答案:旋转,动画,,绝对定位

9.设置行内元素居中对齐用什么属性?

答案:text-aligin:center

10.如果要将表单中控件的值提交给服务器必须为控件设置什么属性?

答案:name和value属性

11.transition和animation的区别?

答案:Animation和transition大部分属性是相同的,他们都是随时间改变元素的属性值,他们的主要

区别是transition需要触发一个事件才能改变属性,而animation不需要触发任何事件的情况下也会随着

时间改变属性值,并且transition为2帧.从from.... to ,而animation可以以帧一帧的,也可以理解为一个

animation是由多个transition组成.

12.如何实现水平垂直居中?

答案:

1.定位+外边距

盒子宽高已知,position:absolute;left:50%;top:50%;

margin-left:-自身一半宽度;margin-top:-自身一半高度;

2.定位+transform  盒子宽高已知,

#container{

position:relative;

border:1px solid red;

width:800px;

height:600px;

}

#content{

width:100px;

height:100px;

background:blue;

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

}

3.flex布局

父级:

display:flex;

align-items:center;/*垂直居中*/

justify-content:center;/*水平居中*/

居中布局

-水平居中

行内元素:text-aligin:center;

块级元素:margin:0 auto;

绝对定位已知宽度: position:absolute;margin-left:-(宽度的一半);left:50%;

绝对定位+transform: postion:absolute;left:50%;transform:translateX(-50%);

弹性布局水平居中: display:flex;justify-content:cneter;

-垂直居中

line-height:height;高度设置和盒子一样高

绝对定位和transform: position:absolute;top:50%;transform:translateY(-50%);

弹性布局垂直居中: display:flex;aligin-items:center;

绝对定位已知高度:position:absolute;margin-top:-(高度的一半);top:50%;

-水平垂直居中

1.已知宽高100px

position:absolute;

top:50%;

left:50%;

margin-left:-50px;

margin-top:-50px;

2.弹性布局

display:flex;

justify-content:center;

aligin-items:center;

3.css3的transform属性

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

4.margin:auto;

postion:absolute;

top:0;

left:0;

right:0;

bottom:0;

margin:auto;

13.盒子模型你是怎么理解的?

答案:元素框处理元素内容,内边距外边距以及边框计算方式.

盒子模型有两种,W3C和IE盒子模型

(1)w3c的盒模型: width=content内容区域宽;不包括margin,padding,border

(2)IE盒模型: width=content 内容宽度 + padding 宽度  + border 宽度

(3)box-sizing  border-box在已设定的宽度和高度之内去设定padding和border

content-box在已设定的高度和宽度之外设置padding和border

14.src和href的区别?

答案:

(1) href:href是Hypertext Reference的缩写,表示超文本引用。用来建立当前元素和文档

之间的连接。并行下载该文档,不会停止对当前文档的处理.

(2)src:src是source的缩写,src指向的内容会嵌入到文档当前标签所在位置.

如img、script、ifram当浏览器解析到该元素时,会暂停浏览器的渲染,直到

该资源加载完毕.

15.说出link和import的区别?

(1)使用方法不同:

link一般在html头部定义,作为html标签,链接资源,主要用于链接外部的样式表.

import 一般定义在css内部,并且一定要在其他所有规则之前,也就是一般写在文件头部,

并且专门拿来链css的。

(2)加载顺序差别

import 比link延迟一些,它会等到页面下载完成后才加载,因而可能会产生闪烁.

16.改变页面元素位置的定位方式及他们的区别?

答案:relative相对定位相对于自身原来位置进行偏移,

仍处于标准文档流中;

absolute绝对定位 相对于最近的已定位的祖先元素,有已定位(指position不是static的元素)

祖先元素,以最近的祖先元素为参考标准。如果无已定位祖先元素,以body元素为偏移参照,完全

脱离文档流;

fixed固定定位的元素会相对于视窗来定位,者意味着即便页面滚动,它还是会停留在固定的位置。

固定定位也会脱离文档流。

17.display有哪些值,说明他们的作用?

答案:display的取值可以是none/inline/block/inline-block/table

none:元素隐藏不可见,并且元素也不占页面空间.

inline:元素将呈现行内元素的特点,多个元素在一行中显示,不允许修改尺寸,也不能设置垂直外边距。

block:元素将呈现块级元素的特点,每个元素独占一行,允许修改尺寸。

inline-block:元素将呈现行内块元素的特点,多个元素在一行中显示,但是可以修改尺寸。

table:元素将显示表格的特点,由内容决定表格的显示方式。元素独占一行，允许修改尺寸。

18.有两个div,外框和内宽高度宽度都不定,内宽垂直水平居中,利用css如何实现?

答案:

.content{

display:flex;

justify-content:center;

aligin-items:center;

}

19.说说em和rem的区别?

答案:rem是基于html元素的字体大小来决定,而em则根据使用他的元素的字体大小决定(

很多人错误以为是根据父类元素,实际上时元素继承了父类属性才会产生的错觉)

20.浏览器的内核分别是什么?

答案：IE 浏览器的内核 Trident、Mozilla 的 Gecko、Chrome 的 Blink（WebKit 的分支）、

Opera 内核原为 Presto，现为 Blink

21.为什么要初始化CSS样式?

因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,

如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然,

初始化会对SEO有一定影响,但力求影响最小的情况下初始化。最简单的

初始方法就是:*{padding:0;margin:0;}(不建议)淘宝的样式初始化:

body,h1,h2,h3,h4,h5,h6,hr,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,

input,textarea,th,td{margin:0;padding:0;}

body,button,input,select,textarea{font:12px/1.5tahoma,arial,/5b8b/4f53;}

h1,h2,h3,h4,h5,h6{font-size:100%;}

ul ol {list-style:none;}

a{text-decoration:none;}

a:hover{text-decoration:underline}

img{border:0;}

button,input,select,textarea{font-size:100%;}

table{border-collapse:collapse;border-spacing:0;}

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

答案:可继承的样式:font-szie,font-family,color,background等

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

优先级就近原则,同权重情况下以最近者为准;

优先级为:!important>id>class>tag  important比内联优先级高

CSS3新增伪类:

:first-child 选择属于其父元素的首个元素.

:last-child 选择其父元素的最后一个元素.

:only-child 选择属于其父元素唯一的元素.

:nth-child(n)  选择属于其父元素的任意一个子元素.

:empty      选择没有子元素的元素.

:not(selector) 将满足指定选择器的元素给排除在外.

23.描述css rest的作用。

答案:reset重置浏览器为元素设置的默认样式,浏览器的种类不同,样式可能不同,

重置是为了让他们统一样式.

24.清除浮动带来影响的几种方式,各自的优缺点.

答案:

1.直接设置父元素高度,但不是每次都知道父元素的高度.

2.设置父元素也浮动,但不是任何时候父元素都需要浮动,

而且浮动会影响后续元素.

3.为父元素设置overflow属性,但如果有内容需要溢出显示的话,也会

一同被隐藏.

4.在父元素中,追加空子元素,并设置其clear:both,但页面中会多出一个空元素.

5.用内容生成的方式 :after{content:"",display:block;clear:both;}

25.px和em的区别

px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易

em的值不是固定的,并且em会继承父级元素的字体大小.

浏览器默认字体高都是16px.所以未经调整的浏览器都符合:1em=16px

那么12px=0.75em,10px=0.625em