首页 > 其他 > 详细

盒子模型+浮动布局+定位布局

时间:2019-06-25 20:34:23      阅读:88      评论:0      收藏:0      [点我收藏+]

盒子模型

border

(边框)元素边框

margin

外边距

padding

内边距

content

(内容)可以是文字或图片

 技术分享图片

 

浮动布局

    1.浮动:float:left/right;
    2.清除浮动:(div快不想被浮动的div盖住)
        Clear:left/right/both

<style>
    #d1{
        width: 200px;
        height: 200px;
        background:red;
        
    }
    #d2{
        width: 200px;
        height: 300px;
        background: blue;
        float: left;
    }
    #d3{
        width: 100%;
        height: 100px;
        background: #19DF79;
        clear: both;
    
    }
    #d4{
        width: 200px;
        height: 300px;
        background: #703E3F;
        
    }
    </style>
</head>

<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
    <div id="d4"></div>
</body>

定位布局

布局定位共有4种方式。

(1)固定定位(fixed)

(2)相对定位(relative)

(3)绝对定位(absolute)

(4)静态定位(static)

 

盒子模型+浮动布局+定位布局

原文:https://www.cnblogs.com/sy130908/p/11085321.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!