最新前端开发工程师面试题——CSS部分

　　1、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

　　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 ;

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

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

　　优先级为:

　　!important >  id > class > tag     important 比 内联优先级高

　　2、CSS3新增伪类举例：

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

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

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

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

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

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

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

　　3、如何居中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%;} 

　　列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？

　　1.block 象块类型元素一样显示。  none 缺省值。象行内元素类型一样显示。  inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。  list-item 象块类型元素一样显示，并添加样式列表标记。  

　　2. absolute　生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

　　fixed （老IE不支持）        生成绝对定位的元素，相对于浏览器窗口进行定位。   

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

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

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

      4、为什么要初始化CSS样式？

　　因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。最简单的初始化方法就是： * {padding: 0; margin: 0;} （不建议）淘宝的样式初始化： body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }body, button, input, select, textarea { font:12px/1.5tahoma, arial, /5b8b/4f53; }h1, h2, h3, h4, h5, h6{ font-size:100%; }address, cite, dfn, em, var { font-style:normal; }code, kbd, pre, samp { font-family:couriernew, courier, monospace; }small{ font-size:12px; }ul, ol { list-style:none; }a { text-decoration:none; }a:hover { text-decoration:underline; }sup { vertical-align:text-top; }sub{ vertical-align:text-bottom; }legend { color:#000; }fieldset, img { border:0; }button, input, select, textarea { font-size:100%; }table { border-collapse:collapse; border-spacing:0; } 

　　5、absolute的containing block计算方式跟正常流有什么不同？

　　6、position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

　　7、对BFC规范的理解？

　　（W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关 系和相互作用。）

　　8、css定义的权重

　　以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：/*权重为1*/div{}/*权重为10*/.class1{}/*权重为100*/#id1{}/*权重为100+1=101*/#id1 div{}/*权重为10+1=11*/.class1 div{}/*权重为10+10+1=21*/.class1 .class2 div{} 如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

　　9、解释下浮动和它的工作原理？清除浮动的技巧

　　10、用过媒体查询，针对移动端的布局吗？

　　11、使用 CSS 预处理器吗？喜欢那个？

　　12、CSS3有哪些新特性？

　　CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），  对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）  transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜  增加了更多的CSS选择器  多背景 rgba 

　　13、经常遇到的CSS的兼容性有哪些？原因，解决方法是什么？

　　14、介绍一下CSS的盒子模型？

　　（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;

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