CSS布局方式

1.内边距 padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
    *{
        margin:0px;
    }
        .div1{
            width:100px;
            height:100px;
            background-color:red;
            padding:10px;/*内边距以内容为目标，距离边框的距离，盒子会被撑大*/
            //如果没有给出left-top-right-bottom，默认为全部都是这个边距
            }

    </style>

<body>

    <div class="div1"></div>

</body>

 

2.外边距 margin

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
    *{
        margin:0px;
    }
        .div2{
            width:100px;
            height:100px;
            background-color:green;
            border:2px solid yellow;
//Border：围绕在内边距和内容外的边框
 margin-top:40px;
//margin:用于控制元素与元素之间的距离；margin最基本的用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的
}
    </style>

<body>
    <div class="div2"></div>
<!--margin collaspe   边境坍陷或者说边境重叠
外边距的重叠只产生在普通流文档的上下边距之间，这个看起来有点奇怪的规则，其实有其现实意义，设想
当我们上下排列一系列规则的块及元素,(如段落 p时)那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离

1.兄弟div：上面的margin-bottom和下面的div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值

2.父子div： 如果父级div中没有border，padding，inline content，子级的div会一直向上找，
直到找到某个标签包括border padding inline content  中的其中一个，然后按此div进行margin
-->
</body>

 </html>

 

 

3.浮动 float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .continer{
        border:1px solid red;
        width:300px;
    }

    .div1{
        width:100px;
        height:200px;
        background-color:yellow;
        float:left;
    }

    .div2{
        width:100px;
        height:200px;
        background-color:green;
        float:right;//浮动脱离文档流，后面的元素会填充进来，如果前面的元素也为浮动元素，会停在浮动元素后面

    }

    .div3{
        clear:both;
    }


    .div4{
        background-color:blue;
    }

    .clearfix:after{
        content:"";
        display:block;
        clear:both;/*清除左右浮动*/
    }


    </style>


</head>
<body>

<div class="continer clearfix">

    <div class="div1">box1</div>
    <div class="div2">box2</div>
    <!--<div class="div3"></div>-->
</div>
<div class="div4">box4</div>

</body>
</html>

 

4.定位 position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位属性</title>
    <style>

    *{
        margin:0px;
    }

    .div1{
        width:200px;
        height:100px;
        background-color:yellow;

    }

    .div2{
        width:200px;
        height:100px;
        background-color:green;

        position:absolute;/*绝对定位脱离文档流，相对于已定位的祖先元素，如果祖先元素没有定位则相对于body元素*/

        /*position:relative;*//*相对定位，相对于自己原来的位置进行重新定位，不脱离文档流*/
        left:100px;
        top:100px;
    }

    .div3{
         width:100px;
         height:200px;
         background-color:red
    }


    .div4{
        width:200px;
        height:200px;
        background-color:blue;
    }

    .return{
        width:80px;
        height:80px;
        position:fixed;/*已窗口为参考点，固定定位*/
        bottom:50px;
        right:5px;
        color:green;
        text-align:center;
        line-height:80px;
        background-color:blue;
    }

    </style>
</head>
<body>

<div class="continer clearfix">

    <div class="div1">box1</div>
    <div class="div2">box2</div>
    <div class="div3">box3</div>
    <div class="div4">box4</div>

</div>
<div style="height:2000px;background-color:pink"></div>

<div class="return">返回顶部</div>

<!--仅使用margin属性布局绝对定位：margin-bottom，margin-right的值不再对文档流产生影响，因为元素已经脱离文档流
不管他的祖先元素有没有定位，都是以文档流中原来的位置偏移参照物-->

</body>
</html>

 

5.display属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:50px;
            height:50px;
            background-color:yellow;
           /* display:inline;*/
        }

        p{
            width:50px;
            height:50px;
            background-color:red;
           /*display:inline*/
        }

        span{
            width:50px;
            height:50px;
            background-color:blue;
            display:inline-block;
        }

        a{
            width:50px;
            height:50px;
            background-color:green;
                        display:inline-block;

        }
    </style>


</head>
<body>

<div>div1</div>
<p>123</p>

<span>spannnnn</span>
<a href="#">abcaaaaa</a>

</body>
</html>

 

 

posted @ 2019-12-04 11:31  coldplaycode  阅读(183)  评论(0)  编辑  收藏  举报

coldplaycode