CSS相关面试题汇总笔记

来源：互联网发布：匡恩网络裁员编辑：程序博客网时间：2024/06/08 11:59

<map></map>表示热区。<area/>这是点击链接区域。
1. shape="circle"，说明点击区域是个圆形；coords="圆心点X值,圆心点Y值,圆的半径"，说明圆的位置及大小。
2. shape="rect"，说明点击区域是个矩形；coords="左上角X值,右上角Y值,左下角X值,右下角Y值"，说明矩形的位置及大小。
3. shape="poly"，说明点击区域是个多边形；coords="第一个点的X，第一个点的Y，第二个点的X，第二个点的Y……"。
datauri就是将原来引用的地址的url改成图片的源代码。
1. 优点：减少 Http 的请求次数；
2. 缺点：无法被重复利用；会使文件变大。
<iframe></iframe>这个标签表示引入一个页面，src属性表示引入的地址，支持宽高，消除引入页面的边框用的是：frameborder="0"，消除引入页面本身的滚动条可以用：scrolling="no"。
引入 flash 视频：
```
<object>    <embed src="" width="" height=""></embed></object>
```
表示引入 flash 视频对象，<object></object>这个标签表示下面引入一个对象，<embed></embed>表示引入一个 flash 视频，src 表示 flash 视频的地址，支持宽高。
在 flash 对象内加入<param name="wmode" value="transparent">，并且在引入 flash 的标签对的属性区，加入 wmode="transparent"，只有这样才能将下面的 flash 背景透明，并且在 IE6 下，能解决加在 flash 上的模块不盖在 flash 上的兼容性问题。
引入视频：
1. 方法一：在 HTML5 下有<video></video>这个标签对，相关的有很多 JS 接口，去控制视频播放，暂停以及声音等等。但是 HTML5 本身不支持 IE6 。
2. 方法二：利用 Dreamweaver 本身自带的功能插入视频，具体操作：插入——媒体——FLV…，然后选择文件等可视化操作。但是这种方法只能插入 FLV 格式的视频。
3. 方法三：在其他网站上通过分享，复制 HTML 代码，再复制到代码区就可以了。但是这种方法，不可避免的会在播放前，播放原来网站上的广告。
词内断行：
1. word-wrap:break-word;表示段落内，如果有词汇超出了预先设置的宽度，那这个词汇会自动折行显示。
2. word-break:break-all;表示最大程度的利用段落设置的宽度，如果词汇出现单行放置多个词汇而出现超出预先设置宽度时，此时，超出的词汇会自动折行。
如果要让段落内的文字溢出设置宽度时显示省略号，那以下代码缺一不可：
```
width: [number]px;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;white-space: nowrap;
```
表示强制文字在同一行显示；text-overflow:ellipsis;表示当段落文字溢出时，显示省略号。
在 W3C 盒模型下，某个元素的宽高定义：
1. 可视宽/高 = 元素的内容宽/高+ padding + border；
2. 内容宽 = 元素里可以放内容的宽度。
IE6,7,8 下的怪异模式：
1. 在文件没有文档申明，即没有<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">时，在 IE6，7，8 下页面的盒模型解析就会触发怪异模式：
  1. 可视宽 = 设置的内容宽；
  2. 内容宽 = 设置的宽度 - padding 值 - border 值。
2. 在标准浏览器（chrome）下，在盒子的样式内加入box-sizing:border-box;也能使标准浏览器在解析盒模型时，触发怪异模式。
隐藏元素：
1. 方法一：display:none;表示将元素完全隐藏，并且脱离文档流。
2. 方法二：visibility:hidden;表示将元素隐藏，但是并未脱离文档流，也就是元素位置还会被保留下来，只是看不见而已。
模拟固定定位：
1. 方法一：（此方法问题颇多，不推荐，但是可以应付面试）
```
html{height:100%; overflow:hidden;}body{margin:0; height:100%; overflow:auto;}
```
  解释：
  1. 首先，系统默认的滚动条是在文档上的，html{ height: 100%; overflow: hidden;}中的 overflow: hidden;把系统默认的文档滚动条隐藏了；
  2. 接着body{ margin: 0; height: 100%; overflow: auto;}中的overflow: auto;，把滚动条加在了 body 身上。
  3. 然后，我们在 .div 身上加上了 position: absolute; left: [number]px; top: [number]px;，因为没有添加定位父级，所以 .div 的定位是相对于文档的（也就是 HTML 的父级）。于是，滚动条的滚动就影响不到了 .div 的位置，也就是固定定位的效果。
2. 方法二：（同样不推荐，性能不是非常的稳定，后期维护也有影响）
  1. expression(eval(document.documentElement.scrollTop+100))是 CSS 表达式（即 JS 语言），document.documentElement.scrollTop+100表示此元素居于顶部 100px 。
未知宽高的 <img> 在容器中水平垂直居中：
1. 方法一（推荐，无兼容性问题）：
  1. 给容器加text-align: center;让文件水平居中，接着再在容器内并列的插入图片和一个<span></span>，并且分别给图片和 span 加以下样式span{ display: inline-block; height: 100%; vertical-align: middle;}；
  2. img{ vertical-align: middle;}，让和父级高度与 span 的中心点与 img 的中心点一致，用此方法保持垂直居中。
2. 方法二（不推荐，用到了 CSS Hack 语言）：
  1. 此方法是将 img 包在 span 内。然后将容器和 span 分别转换成表格属性和单元格属性。语句display: table-cell;表示将元素转换成块属性，但是在 IE6 下不兼容display: table-cell;。因此，需要用到 CSS Hack 语言，分别在 span 和 img 中加入*position: absolute; left:50%; top:50%;与*position: relative; left: -50%; top: -50%;让这些样式在 IE6,7 下也能实现同样的效果。

列表的文字溢出解决方法如下：

body 内如下：

  <ul class="list">      <li>          <p>              <a href="#">文字文字文字文字文字文字文字文字</a>              <span>文字</span>          </p>      </li>  </ul>

样式表如下：

.list{    width:302px;     padding:0;     margin:0;     list-style:none;}li{    height:30px;     font-size:12px;     line-height:30px;     border:1px solid #000;    vertical-align:top;}p{     margin:0;    float:left;     padding-right:50px;     position:relative;     overflow:hidden;    height:30px;}span{    float:left;     padding-left:10px;     width:40px;     position:absolute;     right:0;     top:0;}

CSS盒模型

CSS盒模型

详情链接：关于CSS盒模型和兼容的东西，可以狠戳这里！

阅读全文

1 0