前端进阶试题(css部分)
2015-05-09 01:18
169 查看
一、css 40分
1. 什么是盒模型?答:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>左右定宽100px,中间宽度自适应</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> table,tr,th { border-collapse:collapse; /* 关键属性:合并表格内外边框(其实表格边框有2px,外面1px,里面还有1px哦) */ border:1px solid #999; /* 设置边框属性:边框宽度1px、样式(solid=实线)、颜色(#999=灰) */ } </style> </HEAD> <BODY> <table> <caption>个人信息表</caption> <thead> <tr><th>姓名</th><th>年龄</th><th>性别</th></tr> </thead> <tbody> <tr><th>ww</th><th>11</th><th>男</th></tr></thead> <tr><th>ff</th><th>22</th><th>男</th></tr></thead> <tr><th>zz</th><th>33</th><th>男</th></tr></thead> </tbody> </table> </BODY> </HTML>
View Code
效果:
11. position:relative,absolute,fixed区别与联系?
答:postion一共有四个可选属性:static|relative|absolute|fixed,默认是static。下面看看relative,absolute,fixed之前的区别和联系。
一:relative
①例子:
这个效果将是:
设置了relative的属性后
这个效果将是:
从例子中可以看出:relative会导致自身位置的相对变化,但不会影响其它元素的位置、大小。
②relative产生一个新的定位上下文,和absolute用法会产生联系
例子:
效果:
二:absolute
在介绍relative的第二个例子时已经提到absolute属性,继续沿着上面的例子来介绍absolute
例子:
效果:
从上面可以看出absolute三个特点:
①absolute元素脱离了文档结构(和float元素类似,float元素也会脱离文档结构),和relative不同,其他三个元素的位置重新排列了。只要元素会脱离文档结构,它就会产生破坏性,导致父元素坍塌。
②absolute元素具有“包裹性”。之前<p>的宽度是撑满整个屏幕的,而此时<p>的宽度刚好是内容的宽度。
③absolute元素具有“跟随性”。没有设置top、left的值时,与其前一个元素的top,left值为0。
例子:
效果:
这里突出了absolute元素具有“悬浮”效果
如果为absolute设置了top、left,absolute元素会根据最近的定位上下文确定位置,浏览器会递归查找该元素的所有父元素,如果找到一个设置了position:relative/absolute/fixed的元素,就以该元素为基准定位,如果没找到,就以浏览器边界定位。如下两个图所示:
三:fixed
其实fixed和absolute是一样的,唯一的区别在于:absolute元素是根据最近的定位上下文确定位置,而fixed永远根据浏览器确定位置
参考资料
12. 如何居中一个float:left的元素?
答:
例子1:
效果:
例子2:
效果跟例子1是一样的。
13. Css在各浏览器下的兼容问题你通常是怎么来解决的,请分享你的经验;
答:印象深的是:
①div垂直居中问题vertical-align:middle;将行距增加到和整个DIV一样高 line-height; 然后插入文字,就垂直居中了。
②IE8不支持:last-child(匹配属于其父元素的最后一个子元素的每个元素),这个选择器一般在哪里可以用到呢?我的经验是在做这个导航效果
时用到li元素,本想通过
来使最后一个列显示为空,不过实际情况是IE8不支持这个选择器,最后页面在li的最后一个元素加了一个class
③Opacity透明度兼容处理
filter:alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* 老版Mozilla */ -khtml-opacity:0.5; /* 老版Safari */ opacity: 0.5; /* 支持opacity的浏览器*/
相关文章推荐
- 前端进阶试题-CSS篇
- 前端面试(css进阶部分)
- 前端进阶试题css(来自js高级前端开发---豪情)既然被发现了HOHO,那我就置顶了嘿嘿!觉得自己技术OK的可以把这套题目做完哦,然后加入高级前端的社区咯
- Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
- web前端开发分享-css,js进阶篇
- 前端开发面试总结HTML、CSS部分
- 【自学笔记】前端面试题之CSS(部分HTML)
- Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结
- 最新前端开发工程师面试题——CSS部分
- 前端CSS部分知识整理
- 前端基础之CSS进阶(框模型、定位、高级属性)
- 前端面试题总结HTML CSS部分
- 常见前端面试题之HTML/CSS部分
- 前端试题-CSS试题(1)
- 前端知识总结(css部分)
- 最近面试前端面试题整理(css部分)
- 前端面试题总结HTML CSS部分
- 某一线互联网公司前端面试题总结css部分
- HTML、CSS初级前端试题汇总(持续补充)
- WEB前端 -- CSS部分样式