盒模型+浮动做页面布局

最新推荐文章于 2022-08-01 19:56:49 发布

海涛高软

最新推荐文章于 2022-08-01 19:56:49 发布

阅读量460

点赞数 1

分类专栏： HTML5

本文链接：https://blog.csdn.net/qq_15267341/article/details/52728314

版权

HTML5 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

下面是一个很常见的页面布局：

这里写图片描述

主要运用原理如下：
1 使用div来划分大的块，注意div是块元素，块元素之间是要有换行的
2 如把某个块元素被设置为浮动，那么它就不在正常的流当中，后面的块元素就会忽视该浮动元素并且会占据本来属于浮动元素的位置
3 浮动元素虽然会被其后的块元素所忽略，但是记着浮动元素会影响其后的块元素中所包含的内联元素
4 实现分页，必须配合margin-right或margin-left
5 clear属性保证元素的左边、右边或两边不能出现漂移元素

下面是HTML代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="style01.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div></div>
<div>
    <!--首页-->
    <div class="tou"></div>
    <!--body-->
    <div class="ti">

        <div class="you"></div>
        <div class="zuo"></div>
    </div>
    <!--脚-->
    <div class="jiao"></div>

</div>
</body>
</html>

下面是css代码：

.tou {
    height: 200px;
    background-color: antiquewhite;
}

.ti {
    height: 500px;
    margin-top: 5px;
    background-color: aquamarine;
}

.zuo {
    background-color: brown;
    margin-right: 185px;
    height: 500px;
}

.you {
    width: 180px;
    height:400px;
    background-color: darkblue;
    float: right;
}
.jiao{
    height:200px;
    clear: right;
    background-color: deepskyblue;
}

FR：海涛高软（QQ技术交流群：386476712）

海涛高软

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
盒模型+浮动做页面布局

下面是一个很常见的页面布局：主要运用原理如下： 1 使用div来划分大的块，注意div是块元素，块元素之间是要有换行的 2 如把某个块元素被设置为浮动，那么它就不在正常的流当中，后面的块元素就会忽视该浮动元素并且会占据本来属于浮动元素的位置 3 浮动元素虽然会被其后的块元素所忽略，但是记着浮动元素会影响其后的块元素中所包含的内联元素 4 实现分页，必须配合margin-right或margi
复制链接

扫一扫