您的位置：首页 > Web前端 > CSS

前端菜鸟的自学之路（二）——CSS网页布局

2017-06-18 15:01 211 查看

基础教程

HTML+HTML5

CSS+CSS3

文中涉及到的具体属性已添加参考手册中的相关说明，查看有助于理解记忆。

课程

网页布局基础

本文类似于课程笔记、课程回顾，最好结合视频一起食用，口味更佳。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Box Model</title>
<style>
#wrap{
background-color:#7794C9;
height: 1500px;
margin: 0 auto;
border: 1px solid #E85A90;
}
</style>
</head>
<body>
<div id="wrap"></div>
</body>
</html>

代码平台

敲了代码无法预览，需要在浏览器和文本编辑器之间来回切换，下面介绍一个在线制作测试页面的网站——CodePen

页面自动居中一列布局

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Layout</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrap">
<header>
</header>
<nav>
</nav>
<div class="mainbody">
</div>
<aside>
</aside>
<footer>
</footer>
</div><!--wrap-->
</body>
</html>

HTML页面的架构，包括头部、导航栏、主体、侧栏、页脚

/*
* 页面居中
*/
#wrap{
background-color: #B0B1C7;
width: 700px;
height: 1300px;
margin: 0 auto; /*根据浏览器的宽度自动设置两边的外边距 */
}
/*
* 页头部分的布局
*/
header{
background-color:#144199;
height:50px;
}
/*
* 导航栏的布局
*/
nav{
background-color:#E85A90;
height:60px;
}

/*
* 网页内容的布局
*/
.mainbody{
background-color:#5D76B0;
height:950px;
}

/*
* 侧边栏的布局
*/
aside{
background-color:#2C72C7;
height:200px;
}

/*
* 页脚的布局
*/
footer{
background-color: #B33D5A;
height: 40px;
}

1、将所有元素放进一个div里统一设置width跟margin属性

2、给各个元素分别设置width、margin属性

因为找的实例里有分别设置属性，暂时不明白为什么分开写。

横向两列布局

常见的布局，关键是float浮动属性 + overflow属性，float属性值指定浮动位置，overflow属性值hidden将溢出部分修剪隐藏。

之前的练习中为各个元素指定高度，在不添加内容时能直观的显示网页的布局。但是在有实际内容时，我们不需要指定高度，内容的高度就是容器的高度。在HTML文档mainbody中添加两个div块，分别设置css属性，浮动在容器的左右两侧，并在mainbody中添加关键属性overflow设置值hidden。

overflow:hidden;

多列布局：

利用margin属性设置间距。

清除浮动：

clear:both;

clear属性：清除元素左侧或右侧的浮动，适用于紧邻元素之间。

绝对定位布局

利用position属性来定位布局，position属性值有static静态的、relative相对的、 absolute绝对的、 fixed固定的。

position:relative;
top: 50px;
left: 50px;

相对偏移具有自身原有位置进行偏移、处于标准文档流、拥有偏移属性和z-index属性的特点。添加3个div块，设置box1的属性值

.box2{
background-color: green;
position:absolute;
}

设置绝对定位，不设置偏移量。

盒子的大小为内容大小。特点：建立以包含块为基准的定位，脱离标准文档流，拥有z-index属性和偏移属性。

设置偏移量

有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准

无已定位祖先元素，以html为参照基准

box2有已相对定位的祖先元素box1，设置偏移量

position:absolute;
top:20px;
left: 20px;

无已定位的祖先元素

注意：如若祖先元素是静态定位，仍已html元素为基准进行偏移。

使用absolute实现横向两列布局

常用于一列固定宽度，另一列宽度自适应的情况。

父元素相对定位

自适应宽度元素绝对定位

注意：固定列的高度 > 自适应列的高度

.mainbody{
background-color:#5D76B0;
overflow:hidden;
position:relative;
}

.box1{
width: 450px;
height: 50px;
background-color: red;
position: absolute;
left: 250px;
}

CSS布局资料

Learn CSS Positioning in Ten Steps

学习CSS布局

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航