您当前的位置: 站长圈 > 技术文章 > 网页前端 > 第九课:css定位

第九课:css定位

来源: 作者:adminzzq 点击: 0
1,选择器
2, 盒模型。
3, 定位。

css的定位有三种方式:
1:普通流
    根据元素在html中的先后次序来定位。
    相对定位:
        a,根据元素在普通流中的位置来定位。
        b,他自身在普通流的位置不允许其他元素点用。
        c,定位之后,他可以遮挡其他的元素。
    position:relative;可以用top,right,bottom,left四种属性来确定他的位置。

2:浮动
    float:left,right,none;
    一个元素设为浮动,他就脱离了普通流。根据设置的浮动的方向进行飘浮。直到碰到网页的边缘,或者父元素的边缘,或者其他的飘浮的元素停止。

    清理浮动。
    清理浮动给浮动的元素在垂直方向止留下位置。
    常用清理浮动的方法:
        1:专门用一个元素来清理浮动。兼容性比较好,缺点是有时候需要单独增加一个空元素来进行清理浮动的操作。clear:both;left;right;
        2: 直接给父元素一个高度。这个实际上不是通过清理浮动的操作来实现给浮动元素留下垂直方向的位置。一般不建议使用。
        3:将父元素也进行浮动。这个在特殊情况下会使用。
        4: 将父素设overflow:hidden;这个清理浮动的操作是浏览器自动帮我们完成的。
        5:用一个伪元素进行清理浮动。:after{content:'';display:block;clear:both;}
        6: 用javascript创建一个元素来清理浮动。 只需要知道这也行。不需要了解。

       1,4,5这三种清理浮动的方法,我们一定要掌握。

        小知识:+overflow:hidden +表示这个样式只在ie7在有用。_overflow:hidden;这个_表示只在ie6中有用。overflow:hidden\0;这是针对ie8来写的样式。

3:绝对定位
    绝对定位的元素是根据已经定位的最近的祖先元素来定位的。如果没有定位的祖先元素,那么就根据body或者html来进行定位。
    绝对定位的元素可以用z-index来设置堆叠的顺序。z-index的值大的在上面,小的在下面。

    固定定位:固定定位是根据网页视口来进行定位的。不随网页的滚动而改变。
        position:fixed;top,right,bottom,left;