什么是布局
现有样式的布局，不能满足需求
- 文档流
- 浮动
- 定位
现实需要的布局：
- 导航栏+内容
- 导航栏+内容+广告栏
- 从上到下、从左到右、定宽、自适应
单列布局
实现方式： 定宽 + 水平居中
width: 1000px; //或 max-width: 1000px;margin-left: auto;margin-right: auto;
注意 max-width和width的区别max-width屏幕变窄的时候没有拉动条，width在屏幕变窄的时候下方会出现拉动条
范例 和 code
<style> ?.layout{ ?/* ??width: 960px; */ ???max-width: 960px; ???margin: 0 auto; ?} ?#header{ ???height: 60px; ???background: red; ?} ?#content{ ???height: 400px; ???background: blue; ?} ?#footer{ ???height: 50px; ???background: yellow; ?}</style><div class="layout"> ?<div id="header">头部</div> ?<div id="content">内容</div> ?<div id="footer">尾部</div></div>
也可有如下写法，省标签，便于控制局部 范例
<style> ?.layout{ ???width: 960px; ???margin: 0 auto; ?} ?#header{ ???height: 60px; ???background: red; ?} ?#content{ ???height: 400px; ???background: blue; ?} ?#footer{ ???height: 50px; ???background: yellow; ?}</style><div id="header" ?class="layout">头部</div><div id="content" class="layout">内容</div><div id="footer" class="layout">尾部</div>以下是针对通栏的场景，给通栏加背景色 范例
<style> ?.layout{ ???width: 960px; ???margin: 0 auto; ?} ?#header{ ???height: 60px; ???background: red; ?} ?#content{ ???height: 400px; ???background: blue; ?} ?#footer{ ???height: 50px; ???background: yellow; ?}</style><div id="header"> ?<div class="layout">头部</div></div><div id="content" class="layout">内容</div><div id="footer"> ?<div class="layout">尾部</div></div>查看范例效果，能发现不完美的地方吗? 对了，滚动条 bug
下面我们进行优化，给 body 设置min-width 去掉滚动背景色 bug
范例
<style> ?.layout{ ???width: 960px; ???margin: 0 auto; ?} ?body{ ???min-width: 960px; ?} ?#header{ ???height: 60px; ???background: red; ?} ?#content{ ???height: 400px; ???background: blue; ?} ?#footer{ ???height: 50px; ???background: yellow; ?}</style><div id="header"> ?<div class="layout">头部</div></div><div id="content" class="layout">内容</div><div id="footer"> ?<div class="layout">尾部</div></div>双列布局
一列固定宽度，另外一列自适应宽度
如何实现
浮动元素 + 普通元素margin 范例
<style> ???#content:after{ ?????content: ‘‘; ?????display: block; ?????clear: both; ???} ???.aside{ ?????width: 200px; ?????height: 500px; ?????background: yellow; ?????float: left; ???} ???.main{ ?????margin-left: 210px; ?????height: 400px; ?????background: red; ???} ???#footer{ ?????background: #ccc; ???} ?</style> ?<div id="content"> ???<div class="aside">aside</div> ???<div class="main">main</div> ?</div> ?<div id="footer">footer</div>如果侧边栏在右边呢？
侧边栏在右
谨记页面元素的渲染顺序 范例
<style> ???#content:after{ ?????content: ‘‘; ?????display: block; ?????clear: both; ???} ???.aside{ ?????width: 200px; ?????height: 500px; ?????background: yellow; ?????float: right; ???} ???.main{ ?????margin-right: 210px; ?????height: 400px; ?????background: red; ???} ???#footer{ ?????background: #ccc; ???} ?</style> ?<div id="content"> ???<div class="aside">aside</div> ???<div class="main">main</div> ?</div> ?<div id="footer">footer</div>三列布局
两侧两列固定宽度，中间列自适应宽度
如何实现
范例
<style> ???#content:after{ ?????content: ‘‘; ?????display: block; ?????clear: both; ???} ???.menu{ ?????width: 100px; ?????height: 500px; ?????background: pink; ?????float: left; ???} ???.aside{ ?????width: 200px; ?????height: 500px; ?????background: yellow; ?????float: right; ???} ???.main{ ?????margin-left: 110px; /*为什么要加margin-left*/ ?????margin-right: 210px; ?????height: 400px; ?????background: red; ???} ???#footer{ ?????background: #ccc; ???} ?</style> ???<div id="content"> ???<!-- 为什么不是main在前面 --> ???<div class="menu">aside</div> ???<div class="aside">aside</div> ???<div class="main">main</div> ?</div> ?<div id="footer">footer</div>其它布局(了解)
- 水平等距排列
范例
demo范例
以上两个情况都是需要使用到负margin的情况，仔细分析一下为什么需要使用负margin
<style>ul,li{ ?margin: 0; ?padding: 0; ?list-style: none;}.ct{ ???overflow:hidden; ???width: 640px; ???border:dashed 1px orange; ???margin: 0 auto;}.ct .item{ ???float:left; ???margin-left: 20px; ???margin-top: 20px; ???width:200px; ???height:200px; ???background: red;}.ct>ul{ ?margin-left: -20px;}</style><div class="ct"> ?<ul> ???<li class="item">1</li> ???<li class="item">2</li> ???<li class="item">3</li> ???<li class="item">4</li> ???<li class="item">5</li> ???<li class="item">6</li> ???<li class="item">7</li> ???<li class="item">8</li> ?</ul></div>- 圣杯布局
- 双飞翼布局
- 流式布局
弹性布局flex
范例grid
grid相关文章
移动端布局
设置 meta ，如
<meta name="viewport" content="width=device-width, inital-scale=1.0, maximum-scale=1.0, user-scalable=no;"/>
适配
媒体查询 or 动态 rem
---恢复内容结束---
CSS 布局
原文地址：https://www.cnblogs.com/evenyao/p/9276953.html