[ 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)
<style type="text/css">
    .div1{width: 100px; height: 100px; background:rgba(0,0,0,0.2);}
</style>
    <div class="div1">html</div>
(2)
<style type="text/css">
    .div1{width: 100px; height: 100px; position: relative;}
    .div2{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background:#000; opacity: 0.2;}
</style>
    <div class="div1">
        html
        <div class="div2"></div>    
    </div>

!important>style> id> class,>标签> *（通配符）

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

static:默认的position样式，传统流式布局

relative：相对定位 未脱离布局流，原始空间会继续保留且不会对别的元素造成挤压，设置top bottom left right 时是相对于原始位置计算 ，设置百分比的width height时根据上级元素大小计算

absolute：绝对定位 脱离了布局流，原始空间不会保留且不会对别的元素造成挤压，设置top bottom left right 时若父级元素没有设置relative absolute fixed则可以看成相对于窗口计算。若父级元素有设置relative absolute fixed则相对于设置了relative absolute fixed的最近的一层元素计算，设置百分比的width height时根据设置了relative absolute fixed的最近的一层元素大小计算

fixed：脱离了布局流 原始空间不会保留且不会对别的元素造成挤压 设置top bottom left right 时根据窗口计算，设置百分比的width height时根据窗口大小计算

inherit：继承上级元素的position

display: inline（内联元素）：一行排满才会换行，宽度随元素内容多少变化，设置width、height属性无效，只有水平方向的margin、padding边距有效果

display: block（块级元素）：独占一行，默认宽度自动填满其父元素宽度，可以设置width、height、margin、padding属性

display:inline-block（行内块元素）：可以看成是能设置宽高的内联元素

display:list-item（列表元素）：元素会作为列表显示，可以看成是带着li属性（list-style等）的block

display:inline-table（内联表格元素）：一行排满才会换行，可以设置width、height、margin、padding属性

display:table-cell（表格单元格元素）：让元素以表格单元格的形式呈现，类似于td标签。会被float absolute等一些属性影响，常用于垂直居中

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属性，垂直水平居中效果好用