css3面试题

十九、什么是语义化的HTML

语义化标签就是尽量使用有相对应的结构的含义的Html的标签

二十.简述几个css hack?

cssHack包括IE6 _width IE7 *width IE8 width:100px/9;

IE6下划线

IE7 *号

IE8 /9

二十一.介绍一下css的盒子模型?

css盒子模型 又称框模型(Box Model),包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)

元素框的总高度=元素(element)的height + padding的上下边距的值+ margin的上下边距的值 +border的上下宽度   。

旧模型:content+padding*2+border*2

新模型:width+border+padding=你设置的元素的宽度

新盒子需要设置:-webkit-box-sizing:border-box

二十二.transform和animation的区别?

transition属性是一个简单的动画属性,非常简单非常容易用。可以说它是animation的简化版本

Animation也是通过指定某一个属性(如width、left、transform等)在两个值之间如何过渡来实现动画的,与Transition不同的是,Animation可以通过keyframe显式控制当前帧的属性值,而Transition只能隐式来进行(不能指定     每帧的属性值),所以相对而言Animation的功能更加灵活。另外一个区别是Animation通过模拟属性值改变来实现动画,    动画结束之后元素的属性没有变化;而Transition确实改变了元素的属性值,动画结束之后元素的属性发生了变化

二十三.link和@import的区别是?

两者都是外部引用CSS的方式,但是存在一定的区别:

区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。

区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。

区别4:ink支持使用Javascript控制DOM去改变样式;而@import不支持。

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

选择符:通配选择器,标签选择器,类选择器,ID选择器,简单属性选择

可继承属性font-size font-family color

优先级用!important可以改变优先级别为最高,其次是style对象,然后是id > class >tag,另外在同级样式按照申明的   顺序后出现的样式具有高优先级。

p:last-of-type选择其父元素的最后的一个P元素

p:last-child选择其父元素的最后子元素(一定是P才行)

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

p:first-child选择其父元素的首个p元素(一定是p才行)

p:only-child选择其父元素的只有一个元素(而且这个元素只能是p元素,不能有其他元素)

p:only-of-type选择其父元素的只有一个p元素(不能有第二个P元素,其他元素可以有)

25.可继承的样式和不可继承的样式

可继承样式:与文字相关样式例如font-size color

不可继承样式:宽高边框背景都不可以

26.如何居中div,请编码举例说明

横向定宽居中div margin:0 auto;

横向不定宽居中:display:inline-block;父级text-align:center;

纵向居中table或者弹性盒子

27.何居中一个浮动元素,请编码举例说明

可以使用绝对定位left:50% top:50% margin:-宽/高 的一半

28.px和em的区别

px是绝对单位em是相对单位 根据自身或者父级的字体大小确定

29.尽可能多的列举出display的取值。

display的值有:none block inline inline-block list-item run-in compact marker table inline-table table-row-group table-cell table-caption

30.为什么不建议使用css import指令。

我们确实要避免使用css @import, 因为使用@import引用的文件只有在引用它的那个css文件被下载、解析之后,浏览器才会知道还有另外一个css需要下载,这时才去下载,然后下载后开始解析、构建render tree等一系列操作。 浏览器在页面所有css下载并解析完成后才会开始渲染页面,因此css @import引起的css解析延迟会加长页面留白期。 所以,要尽量避免使用css @import而尽量采用link标签的方式引入。

你可能感兴趣的:(css3面试题)