精通CSS 第8章布局

最新推荐文章于 2023-05-14 01:52:50 发布

iteye_6296

最新推荐文章于 2023-05-14 01:52:50 发布

阅读量108

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/iteye_6296/article/details/82643683

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

所有css布局技术的根本都是3个基本概念：定位、浮动和外边距操作。

8.1 计划布局

要想创建可伸缩且容易维护的css系统，首先应该检查设计，寻找重复的模式，这包括页面结构中的模式或在站点中元素反复出现的方式。

8.2 设置基本结构

使用margin:auto 让设计居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
body {
            text-align: center;
}

        .wrapper {
            width: 920px;
margin: 0 auto;
text-align: left;
}

        .header {
            height: 300px;
background-color: green;
}

        .content {
            height: 800px;
background-color: gray;
}

        .footer {
            height: 300px;
background-color: #ff6600;
}

    </style>

</head>

<body>

<div class="wrapper">
    <div class="header">
<!-- 头部-->
</div>

    <div class="content">

    </div>

    <div class="footer">
<!--底部 -->
</div>

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

8.3 基于浮动的布局

基于浮动的布局中，只需要设置希望定位的元素的宽度,然后将它们向左或向右浮动。

浮动元素不再占据文档流中的任何空间，它们就不再对包围它们的块框产生任何影响。

为了解决这个问题，需要对布局中各个点上的浮动元素进行清理。非常常见的做法不是连续地浮动和清理元素，而是浮动几乎所有东西，然后在整个文档的 战略点（比如页脚）上进行一次或二次清理。

8.3.1 两列浮动布局

8.4 固定宽度、流式和弹性布局

8.4.1 流式布局

Liquid Fold http://liquidfold.net

多栏布局有三种基本实现方案：固定宽度、流动、弹性

iteye_6296

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
精通CSS 第8章布局

所有css布局技术的根本都是3个基本概念：定位、浮动和外边距操作。 8.1 计划布局要想创建可伸缩且容易维护的css系统，首先应该检查设计，寻找重复的模式，这包括页面结构中的模式或在站点中元素反复出现的方式。 8.2 设置基本结构使用margin:auto 让设计居中&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;...
复制链接

扫一扫