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标签的方式引入。