html5css3面试题及答案,前端面试题及答案-CSS篇

htm15css3面试题及答案，前端面试题及答案-CSS篇

这篇文章并不是最全的前端面试题(没有最全•只有更全)，只是针对自己面试过程中遇到的一些难题、容易忽略的题做一个简单的笔记•方

便后面月面国需要的小伙伴们借釜.后续内容会不定时更新•与错误之处希望大家不吝指出•

1、CSS3的新特性

实现圆黄(border-radius)

阴影(box-shadow)

文字加特奴(text-shadow)

线性渐变(gradient)

旋军专(transform)

媒体查询•多栏布局

具体

2、CSS中link和@1(7^。11的区别link

属于HTML标签,而@1|7^0代是CSS提供的;

页面被加靓的时•link会同时被加载♦引用的CSS会等到页面被加载完再加载;

import只在IE5以上才能识别,用link是HTML标签,I兼容问题;

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

3、介绍一下CSS的盒子模型

通过css3新增的属性box-sizing:content-box|border-box分别设首盒模型为标准模型(content-box)和正模型(bnrder-box)详细介绍

两种盒模型：标准W3C盒模型'正盒模型・

区别对比：(注意蓝色背景区域大小)

标准盒模型元素宽度width=content=100px-§度计算相同

IE模型元素宽度width=content+2xpadding+2xborder=70px+2xlOpx+2x5px=lOOpx•4、

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

选择符

l.id选择器(#myid)

2.类选择器(.myclassname)

3.标签选拦器(div,hl,p)

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

5.子选择器(ul>li)

6.后代选择器(lia)

7.通配符选择器(*)8.

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

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

继承

1.可继承的样式：font-sizefont-familycolor,text-indent;

2.不可继承的样式：borderpaddingmarginwidthheight;

新增伪类

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

元素。

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

元素・

p:only-of-type选择属于其父元素唯一的

元素。

"only-child选择属于其父元素的唯一子元素的每个

元素。

p:nth-child⑵选择属于其父元素的第二个子元素的每个

元素。

:enableddisabled控制表单控件的禁用状态•

xhecked单选框或复选框被选中•

优先级算法规则:优先级就近原则,同权重情况下样式定义最近者为准；

'important>id>class>tag

important比内联优先级高，但内联比id要高5、

为什么要清除浮动？如何清除？

引起的问题:(1)

父元素的高度无法被撑开•影响与父元素同级的元素(2)

与浮动元素同级的和浮动元素会跟随其后

(3)若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构解

决方法：

1、利用clear清除浮动

.son{

clear:left|right|both|auto

}

2、在父元素后面额外添加标签

3、父元素上使用after伪类

#parent:after{

content:

clear:botn;

height:0;

display:block;

}

4、利用overflow清除浮动

#parent{

overflow:auto;

display:inline-block;

}

6、实现垂直居中的几种方法

margin:auto

.parent{width:

400px;height:

400px;

position:relative;

.son{

position:absoulte;

left:0;

right:0;

top:0;

bottom:0;

margin:auto;

）

}

margin-left、margin-top负值法（需知道子元素width、height）

.parent{width:

400px;height:

400px;

position:relative;

.son{

position:absolute;

width:lOOpx;

height:160px;

left:50%;

top:50%;

//margin-top:translateY(-50%);

//margin-left:translateX(-50%);

margin-top:-80px;

margin-left:-50px;

}

)

flex

,parent{displ

ay:flex;

align