常见的CSS布局样式

在定义样式前要设定一些默认样式

*{margin:0;padding:0;}
html body{height:100%;}

一列布局

• 两个要点

  页面内容区域有一个固定宽度。
  页面内容区域在浏览器窗口中自适应居中

• 实现方法：

页面内容区域 box{width: 自定义宽度；margin：0 auto;}

---

两列布局

*{margin:0;padding:0;}
html,body{height:100%;}
aside,main{height:100%;}
aside{background:#72C7A1;}
.main{background:#E0C569;}

aside{width:200px;float:left;}
.main{margin-left:200px;}

• 一列固定宽，一列自适应宽：

  固定宽度的列：通常称为边栏（左右均可），主要放置一些固定性的内容，如导航，菜单之类。
  自适应宽的列：：根据浏览器窗口的大小自动判断宽度，主要放置主体内容。

• 应用场景：

  后台管理、用户中心、博客等

---

三列布局

• 特点：

  三列布局，中间宽度自适应，两边定宽。
  中间列放置主体内容，在浏览器中优先展示渲染。

• 原理：

  当元素处于浮动状态时，设置负 margin >= 子元素宽度时，子元素会覆盖到兄弟元素之上

*{margin:0;padding:0;}
html,body{height:100%;}
main,.sidebox-left,sidebox-right{height:100%;}
main{background:#1A2F90;color:#ffff;}
.sidebox-left{width:200px;background:#CDE36D;}
.sidebox-right{width:300px;background:#FB81E7;}

main,.sidebox-left,sidebox-right{float:left}
main{width:100%;
\** box-sizing:border-box; \** 这个是将标准盒模型转化为框架盒模型
padding-left:200px;}
.sidebox-left{margin-left:-100%;}
.sidebox-right{maring-left:-300px;}