首页 > 代码库 > css随笔1
css随笔1
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>
运行效果：
css随笔1
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。