computed value: 以specified value根据规范定义的行为进行计算，通常将相对值计算为绝对值，例如em根据font-size进行计算。一些使用百分数并且需要布局来决定最终值的属性，如width，margin。百分数就直接作为computed value。line-height的无单位值也直接作为computed value。这些值将在计算used value时得到绝对值。computed value的主要作用是用于继承

used value：属性计算后的最终值，对于大多数属性可以通过window.getComputedStyle获得，尺寸值单位为像素。以下属性依赖于布局，

link与@import的区别 display: block;和display: inline;的区别

block元素特点：

1.处于常规流中时，如果width没有设置，会自动填充满父容器 2.可以应用margin/padding 3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素 4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间） 5.忽略vertical-align

inline元素特点

1.水平方向上根据direction依次布局 2.不会在元素前后进行换行 3.受white-space控制 4.margin/padding在竖直方向上无效，水平方向上有效 5.width/height属性对非替换行内元素无效，宽度由元素内容决定 6.非替换行内元素的行框高由line-height确定，替换行内元素的行框高由height,margin,padding,border决定 6.浮动或绝对定位时会转换为block7.vertical-align属性生效

PNG,GIF,JPG的区别及如何选

参考资料： 选择正确的图片格式 GIF:

JPEG：

PNG：

CSS有哪些继承属性

关于文字排版的属性如：

IE6浏览器有哪些常见的bug,缺陷或者与标准不一致的地方,如何解决

IE6不支持min-height，解决办法使用css hack：

.target { min-height: 100px; height: auto !important; height: 100px; // IE6下内容高度超过会自动扩展高度 }

ol内li的序号全为1，不递增。解决方法：为li设置样式display: list-item;

未定位父元素overflow: auto;，包含position: relative;子元素，子元素高于父元素时会溢出。解决办法：1）子元素去掉position: relative;; 2）不能为子元素去掉定位时，父元素position: relative;

<style type="text/css"> .outer { width: 215px; height: 100px; border: 1px solid red; overflow: auto; position: relative; /* 修复bug */ } .inner { width: 100px; height: 200px; background-color: purple; position: relative; } </style> <div> <div></div> </div>

IE6只支持a标签的:hover伪类，解决方法：使用js为元素监听mouseenter，mouseleave事件，添加类实现效果：

<style type="text/css"> .p:hover, .hover { background: purple; } </style> <p>aaaa bbbbb<span>DDDDDDDDDDDd</span> aaaa lkjlkjdf j</p> <script type="text/javascript"> function addClass(elem, cls) { if (elem.className) { elem.className += ' ' + cls; } else { elem.className = cls; } } function removeClass(elem, cls) { var className = ' ' + elem.className + ' '; var reg = new RegExp(' +' + cls + ' +', 'g'); elem.className = className.replace(reg, ' ').replace(/^ +| +$/, ''); } var target = document.getElementById('target'); if (target.attachEvent) { target.attachEvent('onmouseenter', function () { addClass(target, 'hover'); }); target.attachEvent('onmouseleave', function () { removeClass(target, 'hover'); }) } </script>

IE5-8不支持opacity，解决办法：

.opacity { opacity: 0.4 filter: alpha(opacity=60); /* for IE5-7 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/ } display: inline-block; *display: inline; *zoom: 1;

IE6下浮动元素在浮动方向上与父元素边界接触元素的外边距会加倍。解决办法： 1）使用padding控制间距。 2）浮动元素display: inline;这样解决问题且无任何副作用：css标准规定浮动元素display:inline会自动调整为block

通过为块级元素设置宽度和左右margin为auto时，IE6不能实现水平居中，解决方法：为父元素设置text-align: center;

容器包含若干浮动元素时如何清理(包含)浮动 /** * 在标准浏览器下使用 * 1 content内容为空格用于修复opera下文档中出现 * contenteditable属性时在清理浮动元素上下的空白 * 2 使用display使用table而不是block：可以防止容器和 * 子元素top-margin折叠,这样能使清理效果与BFC，IE6/7 * zoom: 1;一致 **/ .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } /** * IE 6/7下使用 * 通过触发hasLayout实现包含浮动 **/ .clearfix { *zoom: 1; } 什么是FOUC?如何避免