在定义样式前要设定一些默认样式
*{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;}