31
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
49、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
* 1.id选择器（ # myid） 2.类选择器（.myclassname） 3.标签选择器（div, h1, p） 4.相邻选择器（h1 + p） 5.子选择器（ul < li） 6.后代选择器（li a） 7.通配符选择器（ * ）
8.属性选择器（a[rel = \） 9.伪类选择器（a: hover, li: nth - child）
* 可继承： font-size font-family color, UL LI DL DD DT; * 不可继承 ：border padding margin width height ; * 优先级就近原则，样式定义最近者为准; * 载入样式以最后载入的定位为准; 优先级为:
!important > id > class > tag important 比 内联优先级高 CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个
元素的每个
元素。 p:last-of-type 选择属于其父元素的最后
元素的每个
元素。 p:only-of-type 选择属于其父元素唯一的
元素的每个
元素。 p:only-child 选择属于其父元素的唯一子元素的每个
元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的每个
元素。 :enabled、:disabled 控制表单控件的禁用状态。 :checked，单选框或复选框被选中。
50、如何居中div,如何居中一个浮动元素?
给div设置一个宽度，然后添加margin:0 auto属性 div{
width:200px; margin:0 auto; } 居中一个浮动元素
确定容器的宽高 宽500 高 300 的层 设置层的外边距 .div {
Width:500px ; height:300px;//高度可以不设 Margin: -150px 0 0 -250px;
32
position:relative;相对定位 background-color:pink;//方便看效果 left:50%; top:50%; }
51、浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？
* IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto； * png24为的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。 * IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。 浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别) 渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\\9”这一标记，将IE游览器从所有情况中分离出来。 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。 css .bb{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\\9; /*IE6、7、8识别*/ +background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1;/*IE6识别*/ }
* IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性. * IE下,even对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. * （条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
52、列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？
1. block 象块类型元素一样显示。
33
none 缺省值。向行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。 list-item 象块类型元素一样显示，并添加样式列表标记。 2. position的值 *absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 *fixed （老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。 * relative
生成相对定位的元素，相对于其正常位置进行定位。 * static 默认值。没有定位，元素出现在正常的流中 *（忽略 top, bottom, left, right z-index 声明）。 * inherit 规定从父元素继承 position 属性的值。
53、absolute的containing block计算方式跟正常流有什么不同？
54、position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？ 55、对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；
56、css的基本语句构成是?
选择器{属性1:值1;属性2:值2;……}
57、浏览器标准模式和怪异模式之间的区别是什么?
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可显示为什么模式
58、CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？
最基本的：
设置display属性为none，或者设置visibility属性为hidden 技巧性：
设置宽高为0，设置透明度为0，设置z-index位置在-1000
34 59、超链接访问过后hover样式就不出现的问题是什么？如何解决？ 答案：被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）
60、什么是Css Hack？ie6,7,8的hack分别是什么？
答案：针对不同的浏览器写不同的CSS code的过程，就是CSS hack。 示例如下： #test { width:300px; height:300px;
background-color:blue; /*firefox*/ background-color:red\\9; /*all ie*/ background-color:yellow\\0; /*ie8*/ +background-color:pink; /*ie7*/ _background-color:orange; /*ie6*/ } :root #test { background-color:purple\\9; } /*ie9*/
@media all and (min-width:0px){ #test {background-color:black\\0;} } /*opera*/ @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} /*chrome and safari*/
62、请用Css写一个简单的幻灯片效果页面
答案：知道是要用css3。使用animation动画实现一个简单的幻灯片效果。 /**HTML**/ div.ani /**css**/ .ani{
width:480px; height:320px; margin:50px auto; overflow: hidden;
box-shadow:0 0 5px rgba(0,0,0,1); background-size: cover; background-position: center; -webkit-animation-name: \ -webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite; }
}
35
@-webkit-keyframes \ 0%
{ background:url(http://d.hiphotos.http://www.njliaohua.com//image/w=400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat; } 25% {
background:url(http://b.hiphotos.http://www.njliaohua.com//image/w=400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat; } 50% {
background:url(http://b.hiphotos.http://www.njliaohua.com//image/w=400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat; } 75% {
background:url(http://g.hiphotos.http://www.njliaohua.com//image/w=400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat; } 100% {
background:url(http://c.hiphotos.http://www.njliaohua.com//image/w=400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat; } }
63、行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？ 块级元素(block)特性：
? ?
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制; 和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的
内联元素(inline)特性：
? ?
top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。
那么问题来了，浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？
答案： 、 、