首页 > 代码库 > HTML/CSS学习(二)

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的基础知识大概的过了一遍。还有一些细枝末节,就需要在实践中慢慢学习。
<style>pre { width: 900px; color: blue; font-weight: bolder }</style>

HTML/CSS学习(二)