CSS101文章学习

1.盒模型

说明： 外边距:margin 内边距:padding 边框 border

注意：replaced / none-replaced (不可置换的没有margin-top/margin-bottom)

2.选择器

#id .class [rel=”nofollow”] :hover

分享样式与结构 样式重用

优先级与效率

!important	高于一切
style=””	1,0,0,0
id	0,1,0,0
class 属性选择符 伪类	0,0,1,0 同级后来居上
*	不计分
继承	没能specificity值，低于*选择器
@import	通常有冲突时，相同规则 at rule近的优先级都比较低

 

示例：

  <style type="text/css">

        .a{color: Green}

        .b{color:Red}

    </style>

    <div id="alipay" class="b a">

        <span>content</span>

    </div>

输出内容为：Red的content

<style type="text/css">

       div{color:Green!import;}

       #alipay{color:Blue;}

    </style>

    <div id="alipay" class="b a">

        <span>content</span>

    </div>

输出内容为:Blue的content

ID	高效、最快
class	高效、较快
属性选择符、伪类	低效、慢
*	低效、慢

3.定位

static(一般) relative（相对定位） absolute（绝对定位） fixed（固定定位）

position:static 元素默认。影响文档流，占位

position:relative ;top:60px;left:50px; 影响文档流 占位

position:absolute 不影响文档流 不占位

position: fixed 不影响文档流 不占位

定位：1.基于非static 的父节点定位

         2.fixed基于页面窗口定位

3.定位在ie6/ie7中有bug

4.浮动

float :none right left

float:none

浮动会例元素脱离文档，如果浮动后面还有内容的话，元素的框会把浮动忽略，但文本仍会被浮动影响环绕无浮动框

浮动与定位 清理浮动

<style type="text/css">

        .clearfix:after

        {

            visibility:hidden;

            display:block;

            font-size:0;

            content:"";

            clear:both;

            height:0;

        }

        .clearfix

        {

            zoom:1;

        }

    </style>

5.规划你的CSS

浏览器Reset 页面Reset

模块化 : .module{}

            .module .head{}

            .module .body{}

            .module .foot{}

6.

7.css3

8.工具