首页 >CSS讨论组 >[前端求职必看]前端开发面试题与答案精选_CSS

[前端求职必看]前端开发面试题与答案精选_CSS[前端求职必看]前端开发面试题与答案精选_CSS精华

CSS

介绍一下CSS的盒子模型?

(1)有两种, IE 盒子模型、标准 W3C 盒子模型;IE的content部分包含了 border 和 pading;

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

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 比 内联优先级高

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> 元素。
:enabled  :disabled 控制表单控件的禁用状态。
:checked        单选框或复选框被选中。

如何居中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 属性的值。

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

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

经常遇到的CSS的兼容性有哪些?原因,解决方法是什么?

为什么要初始化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; }

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

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

对BFC规范的理解?

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

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

如果权重相同,则最后定义的样式会起作用,但是应该避免这种情况出现

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

用过媒体查询,针对移动端的布局吗?

使用 CSS 预处理器吗?喜欢那个?

SASS


 
1
 
+1
-1
 
分享
全部回复 (1)我来回答
    1楼
    · 4天前

    面试不怕不怕啦

      赞+0添加回复

    首页上一页1下一页尾页