1、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

（1）有两种， IE 盒子模型、W3C 盒子模型；

（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；

（3）区  别： IE的content部分把 border 和 pading计算了进去;

2、CSS选择符有哪些？哪些属性可以继承？

*   1.id选择器（ # myid）

    2.类选择器（.myclassname）

    3.标签选择器（div, h1, p）

    4.相邻选择器（h1 + p）

    5.子选择器（ul > li）

    6.后代选择器（li a）

    7.通配符选择器（ * ）

    8.属性选择器（a[rel = "external"]）

    9.伪类选择器（a:hover, li:nth-child）

*   可继承的样式： font-size font-family color, UL LI DL DD DT;

*   不可继承的样式：border padding margin width height ;

CSS优先级算法如何计算？

*   优先级就近原则，同权重情况下样式定义最近者为准;

*   载入样式以最后载入的定位为准;

优先级为:

   !important >  id > class > tag

    important 比 内联优先级高

3、CSS3新增伪类有那些？

    举例：

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

    p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

    p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

    p:only-child        选择属于其父元素的唯一子元素的每个 <p> 元素。

    p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

    :after          在元素之前添加内容,也可以用来做清除浮动。

    :before         在元素之后添加内容

    :enabled        

    :disabled       控制表单控件的禁用状态。

    :checked        单选框或复选框被选中。

4、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

给div设置一个宽度，然后添加margin:0 auto属性。

div{

    width:200px;

    margin:0 auto;

 }

居中一个浮动元素

  确定容器的宽高 宽500 高 300 的层

  设置层的外边距

 .div {

      width:500px ; height:300px;//高度可以不设

      margin: -150px 0 0 -250px;

      position:relative;         //相对定位

      background-color:pink;     //方便看效果

      left:50%;

      top:50%;

 }

让绝对定位的div居中

 position: absolute;

  width: 1200px;

  background: none;

  margin: 0 auto;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

5、display有哪些值？说明他们的作用。

block         象块类型元素一样显示。

  none          缺省值。象行内元素类型一样显示。

  inline-block  象行内元素一样显示，但其内容象块类型元素一样显示。

  list-item     象块类型元素一样显示，并添加样式列表标记。

  table         此元素会作为块级表格来显示

  inherit       规定应该从父元素继承 display 属性的值

6、position的值relative和absolute定位原点是？

  absolute

    生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。

  fixed （老IE不支持）

    生成绝对定位的元素，相对于浏览器窗口进行定位。

  relative

    生成相对定位的元素，相对于其正常位置进行定位。

  static

    默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。

  inherit

    规定从父元素继承 position 属性的值。

7、CSS3有哪些新特性？

  新增各种CSS选择器  （: not(.input)：所有 class 不是“input”的节点）

  圆角           （border-radius:8px）

  多列布局        （multi-column layout）

  阴影和反射        （Shadow/Reflect）

  文字特效      （text-shadow、）

  文字渲染      （Text-decoration）

  线性渐变      （gradient）

  旋转          （transform）

  增加了旋转,缩放,定位,倾斜,动画，多背景

  transform:/scale(0.85,0.90)/ translate(0px,-30px)/ skew(-9deg,0deg)/Animation:

8、用纯CSS创建一个三角形的原理是什么？

把上、左、右三条边隐藏掉（颜色设为 transparent）

#demo {

  width: 0;

  height: 0;

  border-width: 20px;

  border-style: solid;

  border-color: transparent transparent red transparent;

}

9、一个满屏 品 字布局 如何设计?

简单的方式：

    上面的div宽100%，

    下面的两个div分别宽50%，

    然后用float或者inline使其不换行即可

10、经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？

* 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 {}

想了解更多关于WEB前端开发工程师的内容敬请关注汇鱼人才。