Css面试题
文章树列

 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"])    

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

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

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

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

优先级为:

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

4.2 CSS3新增伪类举例:

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

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

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

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

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

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

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

4.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.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; } 

14、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{} 如果权重相同,则最后定义的样式会起作用,但是应该避免这种情况出现

4.5 15、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 

4.6 介绍一下CSS的盒子模型?

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

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

4.7 对WEB标准以及W3C的理解与认识?

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;

4.8 css+div的优势

Div+CSS标准的优点:

1.大大缩减页面代码,提高页面浏览速度,缩减带宽成本;

2.结构清晰,容易被搜索引擎搜索到,天生优化了seo

3.缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。

4.强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了,有了CSS,我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题,改变字体颜色,字体样式等等。

5.CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。

6.提高易用性。使用CSS可以结构化HTML

7.可以一次设计,随处发布。

更好的控制页面布局

4.9 写一个简单的json对象?

var json_={

stuId:2012002,

stuName:‘李华明’,

stuAge:20,

stuSex:’男’

}

如果一个JavsScript对象转JSON可以通过eval()函数转换成JSON对象进行访问。

4.10 css是什么

层叠样式表,用来进行页面样式设计,美化页面显示。

4.11 DIV和Span的区别?

DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN是行内元素,SPAN的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN

在HTML视图中工作时,可以在<DIV>内编辑文本,将某些字包含在<SPAN>元素内,以强调那些字。与<DIV>不同,<SPAN>和它周围的文本一起移动

新版下载
本文原创,商业转载请联系作者获得授权,非商业转载请注明出处。

评论

发送评论 编辑评论


                        

前端技术分类热门文章

标签热门文章排行

☛免责声明 ☛本站使用教程
Theme Argon With Ry-Plus By 清欢
我的第24290位朋友,历经141596次回眸才与你相遇
内容失效/资源代找/交流学习
内容失效/资源代找/交流学习