网页布局样式 弹性布局 流体布局 网页设计基础

固定宽度布局

弹性布局

流体布局

1.不要跨越整个宽度，而让容器只跨越宽度的一个百分比，比如80%；
2.可考虑用百分数设置填充和空白边；
3.可选择以像素设置容器的最大宽度，防止内容在大显示器上变得极宽。

我们先来看一下固定宽度的布局，意思就是宽度和高度固定，浏览器的窗口任意缩小放大，固定宽度的布局不会随之改变：

 <style type="text/css">
    	body{
    		text-align: center;  居中
    	}
    	#header,#footer{
    		margin: 20px auto;
    		padding: 20px 0;
    		border: 1px solid red;
    	}
    	#container,#content,#sider{
    		margin: 20px auto;
    		padding: 20px 0;
    		border: 2px solid blue;
    	}
    	#header,#container,#footer{
    		width: 1000px;
    	}
    	#sider{
    		float: right;
    	}
    </style>
<div id="header">header</div>
<div id="container">
	<div id="content">content</div>
	<div id="sider">sider</div>
</div>
<div id="footer">footer</div>

从上面的代码中可以看到宽度是固定的，这里可以按照自己的设计来，缩小浏览器的窗口，内容就会被遮挡住。接下来就是弹性布局：

 <style type="text/css">
    	.flex-container{
    		display: flex;
    		flex-direction: row; /*按照行显示*/
    		flex-wrap: wrap;
    		width: 1200px;
    		height: 1000px;
    		background-color:#ece6e6;
    	}
    	.flex-item{
    		width: 320px;
    		height: 250px;
    		margin: 20px auto;
    		background-color: blue;
    	}
    </style>
<div class="flex-container">
	<div class="flex-item">one</div>
	<div class="flex-item">two</div>
	<div class="flex-item">three</div>
</div>

流体布局

    <style type="text/css">
    *{
    	margin: 0;
    	padding: 0;
    }
    .left{
    	width: 200px;
    	height: 500px;
    	background-color: blue;
    	float: left;
    }
    .right{
    	width: 200px;
    	height: 500px;
    	background-color: red;
    	float: right;
    }
    .main{
    	background-color: pink;
    	margin: 0 220px;
    	height: 500px;
    }
    </style>
<div class="container">
	<div class="left">left</div>
	<div class="right">right</div>
	<div class="main">main</div>
</div>