CSS布局技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/love07070707/article/details/53859604

css的布局（css+div）
漂浮：float
float（漂浮）
none :　默认值。对象不飘浮
left :　文本流向对象的右边
right :　文本流向对象的左边
clear（清除）
none :　默认值。允许两边都可以有浮动对象
left :　不允许左边有浮动对象
right :　不允许右边有浮动对象
both :　不允许有浮动对象

    注意：横屏分为三栏时候，left，right设置float。center写最后。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏设置方法</title>
    <link rel="stylesheet" href="test.css">

    <style>
        div{
            height:200px;
            width: 200px;
            text-align: center;
            background-color: red;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .center{
            margin:0 auto;
        }
    </style>

</head>
<body>
    <!-- <a href="http://www.baidu.com">百度</a> -->

    <div class="left">
        区域一
    </div>
    <div class="right">
        区域三
    </div>
    <div class="center">
        区域二
    </div>


</body>
</html>

定位：
position: absolute;绝对定位
position: relative;相对定位
position
static :　默认值。无特殊定位，对象遵循HTML定位规则
absolute :　将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性
relative :　对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置