html5+css3之CSS中的布局与Header的实现

下面是“HTML5+CSS3之CSS中的布局与Header的实现”攻略：

一、CSS布局基础

1.1 盒模型

CSS盒模型是指在HTML文档中，每个元素形成一个带边框的盒子。盒子的大小、位置、边界都能被 CSS 所控制。

盒模型包括四个部分：

内容(content): HTML元素内容所包含的数据
内边距(Padding): 盒子内边界和内容之间的距离
边框(Border): 盒子的边界
外边距(Margin): 盒子外边界和其他元素之间的距离

1.2 三种布局方式

在CSS中有三种常用的布局方式:

流动布局（Flow Layout）: 元素按照html文档中的顺序自上而下排列
浮动布局（Float Layout）: 元素先按照html文档中的顺序自上而下排列，但后面的元素可以浮动（水平排列）在前面的元素左右两侧，可以实现多列布局。
定位布局（Position Layout）: 元素通过设置CSS的定位属性，相对于其父元素进行定位。

二、CSS布局示例

2.1 浮动布局实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Float Layout Example</title>
<style type="text/css">
    #wrapper {
        width: 800px;
        margin: 0 auto;
        background-color: #eee;
    }
    #main {
        float: left;
        width: 60%;
        background-color: #ccc;
    }
    #sidebar {
        float: left;
        width: 40%;
        background-color: #aaa;
    }
    #clear {
        clear: both;
    }
</style>
</head>
<body>
    <div id="wrapper">
        <div id="main">
            <p>Main Content</p>
        </div>
        <div id="sidebar">
            <p>Sidebar Content</p>
        </div>
        <div id="clear"></div>
    </div>
</body>
</html>

这是一个基于浮动布局的两列网页布局，主要CSS代码如下：

float: left; 指定元素向左浮动。
clear: both; 清除浮动，避免后面的元素被浮动元素 contents 覆盖。

2.2 定位布局实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Position Layout Example</title>
<style type="text/css">
    #wrapper {
        position: relative;
        width: 800px;
        margin: 0 auto;
        background-color: #eee;
    }
    #header {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        height: 100px;
        background-color: #ccc;
    }
    #main {
        margin-top: 100px;
        padding: 20px;
        background-color: #aaa;
    }
</style>
</head>
<body>
    <div id="wrapper">
        <div id="header">
            <h1>Welcome to my site</h1>
        </div>
        <div id="main">
            <p>Main Content</p>
        </div>
    </div>
</body>
</html>

这是一个头部固定的定位布局，主要CSS代码如下：

position: absolute;将元素从文档流中脱离，后面的元素会向上移动，可以根据top, right, bottom, left等属性进行定位。
position: relative;用于定位子元素基于父元素定位，设置元素为相对定位。
top: 0px; left: 0px; right: 0px; 指定位置属性，将 header 元素定位于网页的顶部。

以上的两个实例分别展示了浮动布局和定位布局的基本用法，希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：html5+css3之CSS中的布局与Header的实现 - Python技术站