您的位置：首页 > Web前端 > CSS

前端进阶试题（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的浏览器*/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航