定义样式前设置一些默认样式*{margin:0;padding:0;}htmlbody{height:100%;}一栏式布局两个要点页面内容区域有固定宽度。页面内容区域在浏览器窗口自适应居中的实现方法：页面内容区域框{width:自定义宽度;margin:0auto;}两列布局*{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: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;}
