CSS 布局
2017-06-08 本文已影响28人
细密画红
国内浏览器分辨率(cnzz)
-
固定宽度布局（实现起来简单、可控）
淘宝 -
弹性布局（fluid）布局
永远保证你能看见全部的内容 -
响应式布局 -- 多终端
-
单列布局、两列布局、三列布局
image.png
image.png
<style>
.wrapped{
position:relative;
margin:0 auto;
width:960px;
}
.main{
margin-left:150px;
background:green;
min-height:300px;
}
.aside{
position:absolute;
left:0;
top:0;
width:150px;
min-height:200px;
background:red;
}
</style>
<body>
<div class="wrapped">
<div class="aside"></div>
<div class=main></div>
</div>
</body>
对每一种布局方式要知道它的优缺点。
以上是不用浮动方式实现的两列布局（position:absolute + margi-left）缺点是：aside是绝对定位，脱离了文档流，如果main的高度比aside要小，那么main之后的div（比如footer）有部分内容可能会被aside遮挡住。解决方式：给main一个最小高度，aside一个最大高度。
接下来利用浮动 ( float:left * 2) 的方式实现两列布局 ( 如果不清除浮动，浮动元素会让它的父元素高度为0）
<style>
.wrapped{
margin:0 auto;
width:960px;
}
.wrapped:after{
content:'';
display:block;
clear:both;
}
.main{
float:left;
width:800px;
margin-left:10px;
background:green;
min-height:300px;
}
.aside{
float:left;
width:150px;
min-height:200px;
background:blue;
}
</style>
<body>
<div class="wrapped">
<div class="aside"></div>
<div class="main"></div>
</div>
footer
</body>
布局缺点：宽度必须要很精确，有时候加个1px的border,都有可能导致main 直接换行。
三列布局
image.png
- 简单的方式
<style>
*{
margin:0;
padding:0;
}
.wrapper{
width:100%;
position:relative;
}
.main{
margin:0 150px 0 150px;
min-height:500px;
background:#ddd;
}
.aside{
position:absolute;
left:0;
top:0;
width:150px;
height:300px;
background:green;
}
.ad{
position:absolute;
top:0;
right:0;
width:150px;
height:300px;
background:green;
}
</style>
<body>
<div class="wrapper">
<div class="aside"></div>
<div class="main"></div>
<div class="ad"></div>
</div>
</body>
- 双飞翼 （和上面一样的效果，不同的方式）
只有内联元素才会被左浮的元素影响?
<style>
*{
margin:0;
padding:0;
}
.wrapper{
width:100%;
overflow:hidden;
}
.main{
min-height:500px;
background:#ddd;
float:left;
width:100%;
}
.aside{
float:left;
width:150px;
height:300px;
background:green;
margin-left:-100%;
}
.ad{
float:left;
width:150px;
height:300px;
background:green;
margin-left:-150px;
}
.main .inner{
margin-left:150px;
margin-right:150px;
height:100px;
background:red;
}
</style>
<body>
<div class="wrapper">
<div class="main">
<div class="inner">
</div>
</div>
<div class="aside"></div>
<div class="ad"></div>
</div>
</body>
