css布局浅析

最新推荐文章于 2022-09-05 15:20:54 发布

show_code

最新推荐文章于 2022-09-05 15:20:54 发布

阅读量693

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： css布局混合布局布局

本文链接：https://blog.youkuaiyun.com/playboyanta123/article/details/39647465

Web前端专栏收录该内容

74 篇文章

订阅专栏

本文详细介绍了前端工程师在页面布局中常用的单列、双列、三列布局，并提供了实现方案和代码示例，旨在帮助开发者高效地实现网页结构与样式。

对前端工程师来说，每天的工作无外乎就是把UI设计师的PSD完美转化成html页面，这里说的完美不仅是样式是一模一样的，还要做到兼容主流浏览器。拿到UI设计师给的PSD之后，我们首先想到的是什么呢？我觉得就是对整个页面布局把控，这样能做到胸有成竹，实现起页面结构和样式来自然就能事半功倍！

在我们通常用到的页面布局中，分为单列布局，双列布局，三列布局以及混合布局，基本上大家所看到的网页都能用这几种布局归纳起来。下面就简单的说说这几种的布局的用例以及实现方案：

1.单列布局

这种布局最为简单，也是比较常见的，例如大家日常见到的百度首页,还有IBM的官网等，这种布局实现起来简单，展现的内容也是非常直观，下面贴上这种布局的基本代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>单列布局</title>
<style>
body {padding:0;margin: 0;}
.main{background: #f5f5f5;}
.top{height: 40px;background: #000;}
.content{width: 900px;background: #f0f0f0;height: 600px;margin: 0 auto;}
.foot{width: 900px;margin: 0 auto;height: 100px;background: #ddd;}
</style>
</head>

<body>
<div class="main">
    <div class="top"></div>
    <div class="content"></div>
    <div class="foot"></div>
</div>
</body>
</html>

2.双列布局

这种布局可以说是最为常见的布局，将导航下的内容分为两列展示，一般左边是一个二级菜单，右边显示内容，比如现在比较火的招聘网站拉勾网，这种布局涉及到将中间的一块分成两部分显示，所以就要涉及到浮动，左边的一块左浮动，右边的一块右浮动，当然也可以用绝对定位的方式，这里实现的方式有多种，下面以比较符合流体布局的一种方式：左侧的块固定，右侧的块自适应宽度，代码如下：

<style>
body {padding:0;margin: 0;}
.main{background: #f5f5f5;}
.top{height: 40px;background: #000;}
.content{width: 900px;height: 600px;margin: 0 auto;}
.left{width: 200px;background: #2d8fd8;height: 600px;float: left;}
.right{background: #00aaf1;height: 600px;margin-left: 200px;}
.foot{width: 900px;margin: 0 auto;height: 100px;background: #ddd;}
</style>
</head>
<body>
<div class="main">
    <div class="top"></div>
    <div class="content">
    	<div class="left"></div>
    	<div class="right">
    		我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边
    	</div>
    </div>
    <div class="foot"></div>
</div>
</body>

这种实现中，当你改变content的宽度时，左边的宽度是不会变的，改变的只有右边的宽度，这种实现就不需要去算宽度，而且可以自适应。PS：上面left的float属性去掉用position:absolute来代替也是可以的。

3.三列布局

这种布局也是相对来说比较常见的一种布局，一般是左右侧固定宽度，而中间的宽度自适应，作为主体内容的展示区域，这种布局的实现原理就是左边的容器左浮动，而右边的容器右浮动，中间的容器设置左右外空白，即margin，下面的代码就是这种布局的简单实现：

<style>
body {padding:0;margin: 0;}
.main{background: #f5f5f5;}
.top{height: 40px;background: #000;}
.content{width: 900px;height: 600px;margin: 0 auto;}
.left{float: left;width: 200px;background: #2d8fd8;height: 600px;}
.middle{margin:0 200px;background: #f1f1f1;height: 600px;}
.right{float: right;width: 200px;background: #00aaf1;height: 600px;}
.foot{width: 900px;margin: 0 auto;height: 100px;background: #ddd;}
</style>
</head>
<body>
<div class="main">
    <div class="top"></div>
    <div class="content">   
    	<div class="right"></div> 	
    	<div class="left"></div>
    	<div class="middle">
    		我在中间我在中间我在中间我在中间我在中间我在中间我在中间我在中间我在中间
    		我在中间我在中间我在中间我在中间我在中间我在中间我在中间我在中间我在中间
    		我在中间我在中间我在中间我在中间我在中间我在中间我在中间我在中间我在中间我在中间
    	</div>
    </div>
    <div class="foot"></div>
</div>
</body>

上面所说的这些只是页面布局的基础，当然随着互联网的飞速发展，网页的复杂度也是越来越高，但是其布局本质还是离不开上面所说的几种，以后还要做深入研究，前端这条路会一直走下去，越往前走，越发现自己知道的东西太少了，古人说的学到老，活到老，这句话真的是真理。