Div+css布局的方法

最新推荐文章于 2021-10-05 19:38:56 发布

Hom_mi

最新推荐文章于 2021-10-05 19:38:56 发布

阅读量354

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_38921534/article/details/80645217

1. 浮动法

Float

Float:left/right/none

none:默认值，对象不漂浮。

Left：文本流向对象的右边。

Right：文本流向对象的左边。

2. 定位法

Position

Position：stiatic/absolute/fixed/relative

Stiatic:默认值，无特殊定位，对象遵循Html定位规则。

Absolute:将对象从文档拖出，使用top，right，bottom，left等属性相对于其最近的一个最具有定位设置的父级对象进行绝对的定位，如果不存在这样的对象，则会依靠body对象，而其层叠通过z-index属性定义。

Relative：对象不层叠，但可以将依据top，right，bottom，left等属性进行正常文档流中偏移位置。

Fixed:未支持，对象定位遵循绝对（absolute）定位。

3.浮动法和定位法的区别：

浮动是相对定位的，会随着浏览器的大小和分辨率的变化而变化，而定位法一般不行，所以在一般的情况下会用浮动法。、

4.常见布局如：

三行两列布局

<style>
     .header{
        width: 1600px;
        height:60px;
        background:black;
        margin-left:auto;
        margin-right:auto;
     }
    .content{
        width:1000px;
        background:yellow;
        margin-left:auto;
        margin-right:auto;
    }
    .content1{
        width:400px;
        background:blue;
        float:left;
        height:700px;
    }
    .content2{
        width:600px;
        height: 700px;
        background:pink;
        float:right;
    }
    .footer{
        width:1600px;
        height:200px;
        background:gray;
        margin-left:auto;
        margin-right:auto;
        overflow:auto;
        clear:both;

    }
    <body>
    <div class="header"></div>
    <div class="content">
        <div class="content1">A</div>
        <div class="content2">B</div>
    </div>
    <div class="footer"></div>
    </body>