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

Bill
163 声望11 粉丝

职业:网管