一列布局
1.页面内容区域有一个固定宽度
2.页面内容区域在浏览器窗口中自动适应居中
实现方式：
box{widht:自定义；margin 0 auto}
固定宽度设置
1.以主流的分辨率来判断
二列布局（1列固定宽度，1列自动适应宽）
1.固定宽度的列：通常称为边栏 主要放置一些固定的内容如导航、菜单之类；
2.自适应宽的列：根据浏览器窗口的大小自动判断宽度，主要放置主体内容；
应用：后台管理；用户中心；博客；
实现办法
1.固定容器{width：固定数值;float:lef/right}
2.自适应容器{margin-方向：数值=固定列宽;}//不能设置宽
三列布局
1.中间宽度自适应，两边定宽;
2.中间列放置主体内容，在浏览器中优先展示渲染；
原理
当子元素处于浮动状态时，设置负margin>=子元素宽度时，子元素会叠盖到兄弟元素之上；
三列布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
html,body{height: 100%;}
.main{
background: darkred;
width: 100%;
padding-left: 200px;
box-sizing: border-box;
padding-right: 300px;
}
.left-side{
background: deeppink;
width: 200px;
}
.right-side{
background: green;
width: 300px;
}
.main,.left-side,.right-side{
float: left;
height: 100%;
}
.left-side{
margin-left: -100%;
}
.right-side{
margin-left: -300px;
}
</style>
</head>
<body>
<div class="main">我时主体内容我时主体内容我时主体内容我我时主体内容我时主体内容我时主体我时主体内容我时主体内容我时主体内容我我时主体内容我时主体内容我时主体内容我我时主体内容我时主体内容我时主体内容我我时主体内容我时主体内容我时主体内容我我时主体内容我时主体内容我时主体内容我内容我时主体内容我时主体内容我时主体内容</div>
<div class="left-side">我时左侧栏</div>
<div class="right-side">我时右侧栏</div>
</body>
</html>
1000
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
