码迷,mamicode.com
首页 > 其他好文 > 详细

浮动介绍和定位注意点

时间:2018-01-25 00:17:50      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:接下来   html   block   相对   relative   标签   pos   元素   isp   

  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>

 

浮动介绍和定位注意点

标签:接下来   html   block   相对   relative   标签   pos   元素   isp   

原文地址:https://www.cnblogs.com/LoveMarvin/p/8343698.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!