Caution！
1、默认的高度和宽度问题
（1）父子都是块级元素
<!DOCTYPE html><html><head> ???<title>fortest</title> ???<style> ???????div.parent{ ???????????width: 500px; ???????????height: 300px; ???????????background: #ccc; ???????} ???????div.son{ ???????????width: 100%; ???????????height: 200px; ???????????background: green; ???????} ???</style></head><body> ???<div class="parent"> ???????<div class="son"></div> ???</div></body></html>这时，子元素设置为了父元素width的100%，那么子元素的宽度也是500px；
但是如果我们把子元素的width去掉之后，就会发现子元素还是等于父元素的width。也就是说，对于块级元素，子元素的宽度默认为父元素的100%。
当我们给子元素添加padding和margin时，可以发现宽度width是父元素的宽度减去子元素的margin值和padding值。
毫无疑问，如果去掉子元素的height，就会发先子元素的高度为0，故height是不会为100%的，一般我们都是通过添加内容（子元素）将父元素撑起来。
（2）父：块级元素 子：内联元素
如果内联元素是不可替换元素（除img，input以外的一般元素），元素是没有办法设置宽度的，也就谈不上100%的问题了。 即内联元素必须依靠其内部的内容才能撑开。
如果内联元素是可替换元素（img，input，本身可以设置长和宽），不管怎么设置父元素的宽度和高度，而不设置img的宽和高时，img总是表现为其原始的宽和高。
<!DOCTYPE html><html><head> ???<title>...</title> ???<style> ???????div.parent{ ???????????width: 500px; ???????????height: 300px; ???????????background: #ccc; ???????} ???????img{ ???????????height: 100px; ???????????background: green; ???????} ???</style></head><body> ???<div class="parent"> ???????<img class="son" src="s1.jpg"></img> ???</div></body></html>由此我们可以发现，虽然没有设置宽度，但是表现在浏览器上为160px，它并没有继承父元素的100%得到500px，而是根据既定的高度来等比例缩小宽度。 同样， 如果只设置width，那么height也会等比例改变。 如果我们把img的width设置为100%，就可以发现其宽度这时就和父元素的宽度一致了。而我们一般的做法时，首先确定img的父元素的宽度和高度，然后再将img的宽度和高度设置位100%，这样，图片就能铺满父元素了。
后台管理布局
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.pg-header{ ??????????height: 48px; ??????????width: 100%; ??????????background-color: #2459a2; ??????????position: fixed; ??????????top:0; ??????????left: 0; ???????} ???????.left{ ???????????position:absolute; ???????????left:0; ???????????top:48px; ???????????bottom:0; ???????????width:200px; ???????????background-color: #ededed; ???????} ???????.right{ ???????????position:absolute; ???????????right:0; ???????????left:200px; ???????????top:48px; ???????????bottom:0; ???????????overflow:auto; ???????} ???????.content{ ???????????height: 2000px; ???????????width: 100%; ??????????????????} ???</style></head><body><div class="pg-header"></div><div> ???<div class="left"> ???</div> ???<div class="right"> ?????<div class="content"></div> ???</div></div></body></html>css响应式布局
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????/*======================================初始化=====================*/ ???????????*{ ????????????margin: 0; ????????????padding: 0; ?????????????????} ???????????body{ ???????????????font-size: 12px; ???????????} ???????????a{ ?????????????text-decoration: none; ???????????} ???????/*======================================header区域设置=====================*/ ???????.header{ ??????????????height: 44px; ??????????????width: 100%; ??????????????background-color: #2459a2; ??????????????position: fixed; ??????????????top:0; ??????????????left: 0; ???????} ???????.header_content{ ???????????width: 80%; ???????????height: 44px; ???????????background-color: #2459a2; ???????????margin: 0 auto; ???????????line-height: 44px; ???????????position: relative; ???????}/*======header区part1:logo ===========*/ ??????????????.logo{ ???????????????????float: left; ???????????????????width: 121px; ???????????????????height: 23px; ???????????????????margin-top: 9px; ???????????????}/*======header区part2:action-menu =====*/ ??????????????.action-menu{ ???????????????????float: left; ???????????????????margin-left: 30px; ???????????????} ???????????????.action-menu a.tb{ ???????????????????????????color: #c0cddf; ???????????????????????????padding: 0 10px; ???????????????????????????text-align: center; ???????????????????????????margin-left: -3px; ???????????????????????????display: inline-block; ???????????????????????} ???????????????.action-menu a.tb:hover { ???????????????????color: #fff; ???????????????????background-color: lightslategrey; ???????????????} ????????????????.action-menu a.active, .action-menu a.active:hover { ???????????????????????????????color: #fff; ???????????????????????????????background-color:#204982;; ???????????????????????????}/*======header区part3:key-search =====*/ ????????????????.key-search{ ????????????????????????margin-top: 5px; ????????????????????????float: right; ???????????????????} ????????????????.key-search a.search-icon-box, .search-txt { ???????????????????????float: left; ???????????????????} ???????????????.search-txt { ???????????????????color: #333; ???????????????????line-height: 25px; ???????????????????padding: 2px 2px 2px 5px; ???????????????????height: 25px; ???????????????????width: 91px; ???????????????} ???????????????.key-search a.search-icon-box { ???????????????????border: 1px solid #e0e0e0; ???????????????????background-color: #f4f4f4; ???????????????????width: 30px; ???????????????????height: 31px; ???????????????????border-left: 0; ???????????????} ???????????????.key-search a.search-icon-box span.search-icon{ ???????????????????background: url("images/icon.png") no-repeat 0 -197px; ???????????????????float: left; ???????????????????height: 12px; ???????????????????width: 11px; ???????????????????margin-left: 10px; ???????????????????margin-top: 9px; ???????????????}/*======header区part4:action-nav =====*/ ???????????????.action-nav { ??????????????????????float: right; ??????????????????????margin-right: 10px; ???????????????????} ????????????????.action-nav a { ???????????????????????color: white; ???????????????????????padding: 14px 18px; ???????????????????} ???????????????.action-nav a:hover{ ???????????????????background-color: lightslategrey; ???????????????????color: white; ???????????????} /*======================================content区域设置=====================*/ ????????????.content-box { ???????????????????background-color: #ededed; ???????????????????padding-top: 44px; ???????????????????height: 100%; ???????????????} ????????????.content { ???????????????????width: 960px; ???????????????????margin: 0 auto; ???????????????????height: auto!important; ???????????????????overflow: hidden; ???????????????????min-height: 713px; ???????????????????padding: 6px 28px; ???????????????????background-color: #fff; ???????????????????/*overflow: hidden;取消后看看效果*/ ???????????????} ???????/*===============================响应式布局=====================*/ ????????@media(max-width:1050px) { ?????????.action-menu a.item{ ?????????????display: none; ?????????????background-color: gold; ?????????????border: dashed 1px rebeccapurple; ?????????????color: black; ?????????} ????????????.action-menu a.active{ ????????????????padding: 0 25px; ????????????} ????????????.action-nav{ ????????????????float: left; ????????????????margin-left: 80px; ????????????} ????????????.key-search{ ????????????????float: right; ????????????????margin-right: 100px; ????????????} ?????????.action-menu:hover a.item{ ?????????????display: block; ?????????} ????????} ???????@media(max-width:810px) { ????????????.key-search{ ????????????????display: none; ????????????} ???????????.action-nav{ ???????????????display: none; ???????????} ???????} ???</style></head><body> ???<!--header结构--> ???<div class="header"> ????????<div class="header_content"> ??????????????<div class="logo"> ??????????????????<a href="/"><img src="images/logo.png" alt=""></a> ??????????????</div> ??????????????<div class="action-menu"> ???????????????????????<a href="#" class="tb active">全部</a> ???????????????????????<a href="#" class="tb item">42区</a> ???????????????????????<a href="#" class="tb item">段子</a> ???????????????????????<a href="#" class="tb item">图片</a> ???????????????????????<a href="#" class="tb item">挨踢1024</a> ???????????????????????<a href="#" class="tb item">你问我答</a> ??????????????</div> ??????????????<div class="key-search"> ???????????????????<form action="/" method="post"> ???????????????????????<input type="text" class="search-txt"> ???????????????????????<a href="#" class="search-icon-box" > ???????????????????????????<span class="search-icon"></span> ???????????????????????</a> ???????????????????</form> ??????????????</div> ??????????????<div class="action-nav"> ???????????????????<a href="#" class="register-btn">注册</a> ???????????????????<a href="#" class="login-btn">登录</a> ??????????????</div> ????????</div> ???</div> ???<!--content结构--> ???<div class="content-box"> ???????<div class="content"> ???????</div> ???????????</div></body></html>53、css补充
原文地址：http://www.cnblogs.com/liluning/p/7587588.html