首页 > > 网页制作 > css >

浮动介绍和定位注意点

2018-06-24 02:14:34来源：未知阅读 ()

　　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>