css随笔1

时间：2016-12-06 03:44:49 阅读：268 评论：0 收藏：0 [点我收藏+]

标签：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>

运行效果：

技术分享

css随笔1

标签：god 文章 2nf rvm adr das srpm ilo style

原文地址：http://www.cnblogs.com/ouym/p/6136022.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行