css 实现app图标样式_利用div+css实现几种经典布局的详解，样式以及代码！

一、左右两侧，左侧固定宽度200px，右侧自适应占满

效果

html代码

<div class="container">
                <div class="left"></div>
                <div class="right"></div>
        </div>
 

css代码

*{
			margin: 0px;
			padding: 0px;
		}
		.container{
			height: 500px;
			background: yellow;
		}
		.left{
			float: left;
			width: 200px;
			height: 100%;
			background: red;
		}
		.right{
			margin-left: 200px;
			background: green;
			height: 100%;
		}

这个实现起来比较的简单,左侧的div给浮动，右侧的divmargin-left使其从左侧div右侧开始展现,加背景颜色方便观察。

二、左中右三列，左右个200px固定，中间自适应占满

html代码

<div class="container">
                <div class="left"></div>
                <div class="right"></div>
                <div class="center"></div>
        </div>

css代码

 *{
			margin:0px;
			padding: 0px;
		}
		.container{
			background: yellow;
			height: 500px;
		}
		.left{
			background: red;
			float: left;
			width: 200px;
			height: 100%;
		}
		.center{
			/*第一种用浮动，加上左右外边距，不用绝对定位 
				这里我推荐把html中的right写在center的前面,如果按顺序写的话会把right挤到下面，感兴趣的可以自己试试
			*/
			/*margin: 0 200px;*/
 
			/*第二种用浮动加绝对定位*/
			/*position: absolute;
			left: 200px;
			right: 200px;*/
 
			background: grey;
			height: 500px;
		}
		.right{
			background: green;	
			float: right;
			width: 200px;
			height: 100%;
		}

三、上中下三行，头部200px高，底部200px高，中间自适应占满

html代码

<div class="container">
                <div class="top"></div>
		<div class="center"></div>
		<div class="bottom"></div>
        </div>

css代码

*{
			margin:0px;
			padding: 0px;
		}
		.container{
			background: yellow;
			width: 100%;
		}
		.top{
			background: red;
			width: 100%;
			height: 200px;
			position: absolute;
			top: 0;
		}
		.center{
			width: 100%;
			background: grey;
			position: absolute;
			top: 200px;
			bottom: 200px;
		}
		.bottom{
			width: 100%;
			background: green;	
			height: 200px;
			position: absolute;
			bottom: 0;

这里用到了绝对定位，把上面的和下面的分别设置top:0,bottom:0 固定在上下两端，中间的距离上下200px即可

四、上下两部分，底下这个固定高度200px，如果上面的内容少，那么这个footer就固定在底部，如果内容多，就把footer挤着往下走

html代码

<div class="container">
                <div class="content"></div>
                <div class="footer"></div>
        
        </div>

css代码

 *{
			margin: 0px;
			padding: 0px;
		}
		html{
			height: 100%;
		}
		body{
			min-height: 100%;
			position: relative;
		}
		.content{
			width: 100%;
			background:red;
			padding-bottom: 200px;
		}
		.footer{
			width: 100%;
			height: 200px;
			background: green;
			position: absolute;
			bottom: 0;
		}

固定footer在底部和把foorter往下挤着走都比较容易实现，但是合到一起，就不好弄了吧，其实也不难，更改content的高度，就可以看到效果了

必要的设置就是html要有高度,body的最小高度要有，footer是依照body进行绝对定位的，

了解了这些就不难实现了