欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

浮动介绍和定位注意点

程序员文章站 2022-03-26 22:56:00
18年元月24日,一如既往的写了一会,外面下着雪,我在屋内叼着烟,上班好辛苦,成人的世界哪有容易二字,慢慢来,少年你还年轻,重在坚持,不要灰心。 ......

  18年元月24日,一如既往的写了一会,外面下着雪,我在屋内叼着烟,上班好辛苦,成人的世界哪有容易二字,慢慢来,少年你还年轻,重在坚持,不要灰心。

  

<!DOCTYPE html>
<html>
<head>
    <title>浮动,清浮动及定位的理解</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        li{
            float: left;
            width: 20px;
            height: 20px;
            margin-left: 10px;
            text-align:center;
            line-height: 20px;
            background-color: red;
        }
        /*对于浮动的元素,他们有以下特性:
        1,浮动的元素排在同一排
        2,浮动的元素支持所有的css样式(这句话可以给行标签加上浮动,
            那么可以不用来转换标签的样式了。一样支持所有的css样式。)
        3,浮动的元素脱离文档流
        4,浮动的元素提升层级半级。*/

        /*那么我们为什么来清除浮动呢,就是用来处理浮动元素脱离文档流的
        问题(父级的盒子高度变为0,下面元素挤上去,影响布局效果)
        常见的清除浮动有6中方式
        1,父级也浮动
        2,父级加高度(比如height写死)
        等*/

        /*最常用的方式就是为伪类清浮动*/
        .clear:after{
            content: "";
            display: block;
            clear: both;
        }
        clear{
            zoom:1;
        }

        /*伪类:向选择器定义样式(可以添加特定效果)
        :link ,:hover,:nth-child等*/


        /*这只是我对一个知识点的理解,关于为什么会这样,有这样的效果
        便没有过多的测试*/

        /*接下来便是一些定位问题了
        相对定位*/
        div{
            position: relative;
            top: 20px;
        }
        /*相对定位是针对自己本身的位置进行定位*/
        /*1,他不影响本身的一些特性
        2,不使文档脱离文档流*/


    /*    绝对定位(值得注意的一点)
        它是针对最近的的一层有定位的父级进行定位
        *不一定要和relative一起使用(没有定位父级,针对document进行偏移)*/

        /*固定定位(不兼容ie6),针对窗口进行定位*/



        /*如果绝对定位或固定定位的子级有浮动,可以省略清浮动操作(
        相对定位无法触发bfc)*/
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div style="width: 100px;height: 100px;background-color: yellow;"></div>
</body>
</html>