CSS 网页布局基础
Posted 知其黑、受其白
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 网页布局基础相关的知识，希望对你有一定的参考价值。
阅读目录
基础布局
1 一行布局
- 基础的行布局
- 行布局自适应
- 行布局自适应限制最大宽
- 行布局垂直水平居中
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body
margin: 0;
padding: 0;
color: #fff;
text-align: center;
.container
width: 800px ;
height: 200px ;
background: #4c77f2;
position: absolute;
top:50%;
left: 50% ;
margin-top: -100px;
margin-left: -400px;
</style>
</head>
<body>
<div class="container">这是页面内容</div>
</body>
</html>
2 二行布局
- 行布局固定宽
- 行布局某部位自适应
- 行布局导航随屏幕滚动
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body
margin: 0;
padding:0;
color: #fff;
text-align: center;
font-size:16px;
.header
width: 100%;
height: 50px;
background: #333;
margin:0 auto;
line-height: 50px;
position: fixed;
.banner
width: 800px;
height: 300px;
background: #30a457;
margin:0 auto;
padding-top: 50px;
.container
width :800px;
height: 400px;
background: #4c77f2;
margin:0 auto;
.footer
width: 800px;
height: 100px;
background: #333;
margin:0 auto;
line-height: 100px;
</style>
</head>
<body>
<div class="header">这是页面的头部</div>
<div class="banner">这是页面的banner图</div>
<div class="container">这是页面的内容</div>
<div class="footer">这是页面的底部</div>
</body>
</html>
3 一列布局
- 两列布局固定
- 两列布局自适应
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body
margin: 0;
padding: 0;
color: #fff;
.container
width:90%;
height: 800px;
margin:0 auto;
.left
width:60%;
height: 800px;
background: #1a5acd;
float: left;
.rightwidth: 40%;
height: 800px;
background: #5880f9;
float: right;
</style>
</head>
<body>
<div class="container">
<div class="left">这是页面的左侧</div>
<div class="right">这是右面的右侧</div>
</div>
</body>
</html>
4 二列布局
- 三列布局固定
- 三列布局自适应
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body
margin: 0;
padding: 0;
color: #fff;
.container
width: 100%;
margin: 0 auto;
.left
width: 30%;
height: 800px;
background: #67b581;
float: left;
.right
width: 20%;
height: 800px;
background: #67b581;
float: right;
.middle
width: 50%;
height: 800px;
background: #175bd8;
float: left;
</style>
</head>
<body>
<div class="container">
<div class="left">这是页面的左侧</div>
<div class="middle">这是页面的中间</div>
<div class="right">这是页面的右侧</div>
</div>
</body>
</html>
5 混合布局
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body
margin: 0;
padding: 0;
font-size: 16px;
color: #fff;
text-align: center;
.header
width: 800px;
height: 50px;
background: #5880f9;
margin: 0 auto;
line-height: 50px;
.container
width: 800px;
margin: 0 auto;
height: 600px;
.container .left
width: 200px;
height: 600px;
background: #67b581;
float: left;
.container .right
width: 600px;
height: 600px;
background: #d0d0d0;
float: right;
.footer
width: 800px;
height: 100px;
background: #ed817e;
margin: 0 auto;
line-height: 100px;
</style>
</head>
<body>
<div class="header">这是页面的头部</div>
<div class="container">
<div class="left">这是页面的左侧</div>
<div class="right">这是页面的右侧</div>
</div>
<div class="footer">这是页面的底部</div>
</body>
</html>
6 经典布局
圣杯布局（middle 部分首先放在 container 的最前部分，然后是 left,right)
布局要求
1、三列布局，中间宽度自适应，两边定宽
2、中间栏要在浏览器中优先展示渲染
3、允许任意列的高度最高
4、用最简单的 CSS、最少的 HACK 语句
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*
margin: 0;
padding: 0;
body
min-width: 700px;
.header,
.footer
float: left;
width: 100%;
background: #ddd;
height: 40px;
line-height: 40px;
text-align: center;
.container
padding: 0 220px 0 200px;
.left,
.middle,
.right
position: relative;
float: left;
min-height: 300px;
.middle
width: 100%;
background: #1a5acd;
.left
width: 200px;
background: #f00;
margin-left: -100%;
left: -200px;
.right
width: 220px;
background: #30a457;
margin-left: -220px;
right: -220px;
</style>
</head>
<body>
<div class="header">
<h4>header</h4>
</div>
<div class="container">
<div class="middle">
<h4>middle</h4>
<p>这是页面中间的内容</p>
</div>
<div class="left">
<h4>left</h4>
<p>这是页面左侧的内容</p>
</div>
<div class="right">
<h4>right</h4>
<p>这是页面右侧的内容</p>
</div>
</div>
<div class="footer">
<h4>footer</h4>
</div>
</body>
</html>
7 双飞翼布局(main 要放在最前边，其次是 sub,extra）
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*
margin: 0;
padding: 0;
body
min-width: 700px;
.header,
.footer
width: 100%;
float: left;
height: 40px;
background: #ddd;
text-align: center;
line-height: 40px;
.sub,
.main,
.extra
float: left;
min-height: 300px;
.main
width: 100%;
.main-inner
margin-left: 200px;
margin-right: 220px;
background: #30a457;
min-height: 300px;
.sub
width: 200px;
background: #f00;
margin-left: -100%
.extra
width: 220px;
background: #1a5acd;
margin-left: -220px;
</style>
</head>
<body>
<div class="header">
<h4>header</h4>
</div>
<div class="main">
<div class="main-inner">
<h4>main</h4>
<p>这是页面的中间内容</p>
</div>
</div>
<div class="sub">
<h4>sub</h4>
<p>这是页面的左侧内容</p>
</div>
<div class="extra">
<h4>extra</h4>
<p>这是页面的右侧内容</p>
</div>
<div class="footer">
<h4>footer</h4>
</div>
</body>
</html>
CSS 底部固定的实现方法
移动端开发中，经常会见到页面底部始终在整个屏幕最底部显示的效果，如下图所示：无论屏幕如何向下滚动图示中蓝色框住的部分都在页面中处于最底部的位置。
如果这个部分不做特殊固定处理，正常情况下，当内容足够多时，必须滑到浏览器底部才能看到底部这个模块，如果内容不够多，不足以撑开元素到达浏览器的底部时，底部可能不是显示在浏览器的最下方哦。
初始状态
显示效果如下图，如果不将页面拉到最下方，无法看
以上是关于CSS 网页布局基础的主要内容，如果未能解决你的问题，请参考以下文章