[ CSS ] - 20140613-题目1

[ CSS ] - 20140613-题目1

1. 如何使容器透明，内容不透明？
分别用1个div或2个div的2种方式实现这个效果。
2. style, !important, id, class, 标签, *（通配符）他们的权重顺序是怎么样的？
3. link 与 @import 的区别？
4. position: relative、absolute、fixed、static、inherit的区别？
5. display: inline,block,inline-block,list-item,inline-table,table-cell的区别？


PS:
1. 回复时注意加上下面这句话，才会有语法高亮或格式缩进。
```html
// you code
```
2. 也可以粘贴jsfiddle地址，比如：
http://jsfiddle.net/jikeytang/Rmt8M/
评论支持markdown语法。
[http://jsfiddle.net/jikeytang/Rmt8M/](http://jsfiddle.net/jikeytang/Rmt8M/)

1. 如何使容器透明，内容不透明？

// you code
<!-- 2个div -->
<style>
#a{
    position: absolute;
    left: 0;
    top: 0;
    width: 500px;
    height: 500px;
    background: #f00;
    opacity: .3;
    filter: alpha(opacity=30);
}
#b {
    position: absolute;
    left: 0;
    top: 0;
}

</style>
<div id="a"></div>
<div id="b">内容</div>

<!-- 1个div -->
<style>
#c {
    position: absolute;
    top: 0;
    left: 600px;
    width: 300px;
    height: 300px;
    background: rgba(255, 0, 0, .3);
}
</style>
<!--[if lt IE 9]>
<style>
#c{
    /* IE8- */
    filter: progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = '#33ff0000', 
    endColorstr = '#33ff0000' );    
}
</style>
<![endif]-->
<div id="c">透明了么</div>

1. style, !important, id, class, 标签, *（通配符）他们的权重顺序是怎么样的？
   @Important > style > id > class > 标签 > *
   有实验.a.b.c.d.e.f..... 256个class的权重会超过id，有兴趣可以试试（.a.b之间没有空格）
2. link 与 @import 的区别？
   (1).link是html提供的方法，@import是css提供的方法
   (2).link会先下载css文件，再下载html代码,而@import会等下载页面之后再下载css
   link不会导致页面错乱，@import会在页面下载而css还没下载完的时候，页面显示错乱
3. position: relative、absolute、fixed、static、inherit的区别？
   position: relative; 相对定位，相对自身定位。设置left,top看到的显示位置虽然变了，但是div占的位置还在原来的地方
   position:absolute; 绝对定位，相对自身标签往上找，position属性不为static的元素或直到body定位,不占页面位置，默认left,top值为父级的padding-left,padding-top
   position:fixed; 相对浏览器视窗定位，IE6不兼容
   position: static; 元素默认position属性
   position: inherit; 继承，没用过，也没了解过，一般不推荐使用
   有兴趣的人可以去看看包含块(Containing block)的概念
4. display: inline,block,inline-block,list-item,inline-table,table-cell的区别？
   inline: 内联元素默认属性，元素不能定宽高，margin-top,margin-bottom,padding-top,padding-bottom无效,可被text-align控制
   block: 块级元素默认属性，可定宽高，不能被text-align控制
   inline-block: 拥有内联属性的块级元素，反着说也行
   list-item: 显示为列表样式属性，没用过
   inline-table: 显示为table表格属性
   table-cell: 显示为td属性，垂直水平居中效果好用