标签：tput 拉动 images ice 查看 ofo 弹性 恢复 顺序
现有样式的布局，不能满足需求
现实需要的布局：
实现方式： 定宽 + 水平居中
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>
<meta name="viewport" content="width=device-width, inital-scale=1.0, maximum-scale=1.0, user-scalable=no;"/>
媒体查询 or 动态 rem
---恢复内容结束---
标签：tput 拉动 images ice 查看 ofo 弹性 恢复 顺序
原文地址：https://www.cnblogs.com/evenyao/p/9276953.html
