标签：god 文章 2nf rvm adr das srpm ilo style
1.简单清除浏览器样式
*{
padding: 0px;
margin: 0px;
}
2.得到屏幕范围的div
html,body{
width: 100%;
height: 100%;
}
#outer{
width: 100%;
height: 100%;
}
3.div水平居屏幕中间
#outer{
width: 100%;
height: 100%;
}
#inner{
width: 70%;
height: 100%;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
margin: 0 auto;
}
4.消除li的样式
list-style: none;
5.消除a标签的下划线
text-decoration:none;
6.对width和height的百分号理解
width:100%;是相对于父元素的宽度，若父元素没有设定，其值为0，块级元素width默认为100%，height默认为0
7.对盒模型的理解
会稽元素的width和height是指内容部分的宽和高.
浏览器上显示的实际部宽度为：border-left+padding-left+width+padding-right+border-right
浏览器上显示的实际部高度为：border-top+padding-top+height+padding-bottom+border-bottom
8.子容器溢出问题
一般使用overflow:auto;属性设置容器根据内容自适应高度，如果不指定高度或不设置自适应高度，容器将默认为1个字符高度
9.一个简单的例子
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> 3 <head> 4 <title>新建网页</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <meta name="description" content="ouym" /> 7 <style type="text/css"> 8 *{ 9 padding: 0px; 10 margin: 0px; 11 } 12 html,body{ 13 width: 100%; 14 height: 100%; 15 } 16 #outer{ 17 width: 100%; 18 height: 100%; 19 background-color: #e6e6e6; 20 overflow:auto; 21 } 22 #inner{ 23 width: 70%; 24 height: 100%; 25 /* background-color: #888; */ 26 background-color: #fff; 27 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); 28 margin: 0 auto; 29 } 30 #header{ 31 width: 100%; 32 height: 24%; 33 } 34 #header img{ 35 width: 100%; 36 min-height: 100px; 37 height: 100%; 38 } 39 #cd{ 40 width: 100%; 41 min-height: 60px; 42 /* background-color: #777; */ 43 border-bottom: 1px solid #ededed; 44 border-top: 1px solid #ededed; 45 46 } 47 #cd li{ 48 float: left; 49 display: block; 50 width: 50px; 51 height: 50px; 52 padding-top: 10px; 53 padding-left: 8px; 54 list-style: none; 55 text-align: center; 56 57 } 58 #cd li a{ 59 font-size: 18px; 60 text-decoration:none; 61 color: #6a6a6a; 62 } 63 #content{ 64 65 width: 100%; 66 height: 60%; 67 background-color: #eee; 68 overflow:auto; 69 } 70 #left{ 71 margin-left: 20px; 72 margin-top: 20px; 73 margin-bottom: 20px; 74 float: left; 75 width: 55%; 76 height: 80%; 77 padding: 10px; 78 background-color: #ccc; 79 overflow:auto; 80 } 81 82 #right{ 83 margin-right: 20px; 84 margin-top: 20px; 85 float: right; 86 width: 35%; 87 height: 80%; 88 padding: 10px; 89 background-color: #ccc; 90 overflow:auto; 91 } 92 #footer{ 93 clear: both; 94 width: 100%; 95 height: 6%; 96 min-height: 60px; 97 /* background-color: #666; */ 98 border-bottom: 1px solid #ededed; 99 border-top: 1px solid #ededed; 100 text-align: center; 101 } 102 #footer p{ 103 display: block; 104 padding-top: 20px; 105 color: #000; 106 font-size: 18px; 107 } 108 #myblok{ 109 display: block; 110 border-bottom: 2px solid #444; 111 } 112 .blocs{ 113 display: block; 114 padding-left: 20px; 115 margin-top: 5px; 116 } 117 118 </style> 119 </head> 120 <body> 121 <div id="outer"> 122 <div id="inner"> 123 <div id="header"> 124 <img src="./header.jpg" alt="" /> 125 </div> 126 <div id="cd"> 127 <li><a href="#">首页</a></li> 128 <li><a href="#">联系</a></li> 129 <li><a href="#">订阅</a></li> 130 <li><a href="#">管理</a></li> 131 <li><a href="#">随笔</a></li> 132 </div> 133 <div id="content"> 134 <div id="left"> 135 <p id="myblok">我的博客</p> 136 <p class="blocs">文章1</p> 137 <p class="blocs">文章2</p> 138 <p class="blocs">文章3</p> 139 <p class="blocs">文章4</p> 140 <p class="blocs">文章1</p> 141 <p class="blocs">文章2</p> 142 <p class="blocs">文章3</p> 143 <p class="blocs">文章4</p> 144 <p class="blocs">文章1</p> 145 <p class="blocs">文章2</p> 146 <p class="blocs">文章3</p> 147 <p class="blocs">文章4</p> 148 <p class="blocs">文章1</p> 149 <p class="blocs">文章2</p> 150 <p class="blocs">文章3</p> 151 <p class="blocs">文章4</p> 152 <p class="blocs">文章1</p> 153 <p class="blocs">文章2</p> 154 <p class="blocs">文章3</p> 155 <p class="blocs">文章4</p> 156 </div> 157 <div id="right"> 158 159 </div> 160 </div> 161 <div id="footer"> 162 <p>@2016 OUYM personal blog</p> 163 </div> 164 </div> 165 </div> 166 </body> 167 </html>
运行效果：
标签：god 文章 2nf rvm adr das srpm ilo style
原文地址：http://www.cnblogs.com/ouym/p/6136022.html
