HTML/CSS学习(二)

续......
=============================================================================================
浮动的样式和特性
    浮动：就是使元素脱离文档流，按照一定的方式排列，遇到相邻的浮动元素或者父级的边界就停下来

    浮动的特性
        1.浮动的元素排在同一排
        2.浮动的元素内容撑开宽度
        3.浮动的元素支持所有css样式
        4.浮动的元素脱离文档流
        5.浮动的元素提升层级半级(属性盖住内容溢出，可做文字环绕div的效果) 

    注意：
    1.overflow溢出 会重新计算元素的空间
        ：hidden 溢出隐藏
        ：auto 溢出出现滚动条
        ：scroll 出现滚动条

    2.元素的居中
         margin:0 auto;

    3.元素的伪类
        伪类：就是css一些元素身上的特殊属性
            ：hover 鼠标停留
            ：after 在元素内容之后插入一些内容

=============================================================================================
BFC的常见方法及优缺点
    BFC 就是清浮动 就是用来处理浮动元素脱离文档流的问题

    1.父级也浮动
        弊端：左右的margin:0 auto会失效

    2.给父级加display:inline-block;
        弊端：左右的margin:0 auto;会失效(如果需要元素居中可以给父级加text-align:center)

    3.给父级加行高
        弊端：扩展性不好

    4.br标签
        换行

    5.clear
        clear元素的摸一方向不允许出现其他的浮动元素
        clear:both (推荐)

    6.伪类清浮动
        ：after{
            content:"";
            display:block；
            clear：both;
        }
=============================================================================================
定位的特性
    定位：把一个元素按照一定的方式定到页面的磨一位置
        position
            相对定位 relative
                针对自己本身的位置进行定位

            绝对定位 absolute
                针对有定位的父级的原点进行定位，如果父级没有定位，会找父级的父级身上。
                以此类推，如果都没有，就会针对document进行定位。

                注意:
                    绝对定位即使没有初始值，也要设置值(如: left： 0px; top:0px;)

            固定定位    fixed
                针对页面窗口进行定位

    偏移量： left top right bottom (有优先级left,top>right,bottom)

    相对定位 relative
        1.不影响元素本身的特性
        2.没有脱离文档流
        3.提升层级
        4.无法触发BFC
        5.针对自己本身定位

    绝对定位 absolute
        1.脱离文档流
        2.内容完全撑开高度和宽度
        3.支持所有css样式
        4.提升层级
            z-index:数值; 定位层级设置
                设置数值越大，层级越高
        5.绝对定位要和相对定位配合使用
        6.自己有浮动，可以省略清浮动操作 

    固定定位 fixed
        1.不兼容ie6
        2.针对窗口进行定位
        3.如固定定位的子级也有浮动，可以省略清浮动的操作总结　　到此为止，html/css的基础知识大概的过了一遍。还有一些细枝末节，就需要在实践中慢慢学习。
    

pre { width: 900px; color: blue; font-weight: bolder }