学习css中得与惑

标签：

css的学习分享 

  所学的css知识看多，会看懂。这只是在实践中发现的问题：

 一. ？？？h1比div还大  h1上下有边距   为什么浮动不了  （现不知道）

二. css写了 表现不出来....      选择器问题 ？一直搞不懂选择器。

 1 /*780=80  =113   33  a 31=20*/
 2 
 3 .warp{width: 780px;margin: 0 auto;border-left: 1px solid #e7e7e7;border-right: 1px solid #e7e7e7;}
 4 header{width: 100%;overflow: hidden;}
 5 .logo{margin: 0;padding: 0; height: 80px;
 6       background-color: #3399cc;color: #fff;
 7       line-height: 80px;text-indent: 36px;
 8       font-size:30px;
 9       font-family:"微软雅黑";
10   }
11 .nav-top{width: 100px;}
12 .nav-top li{
13     text-align: center;
14     margin-top: 0 32px;
15     float: left;
16 
17 }
18 section{}
19 .leftside{width: 200px;}
20 .leftside .nav-main{background-color:#3399cc;color:#fff;text-indent: 10px; }
21 .leftside a:hover{background-color: #ff0000;text-decoration: underline;}
22 .rightside{}
23 footer{}

View Code

练习明白 （一定要加）

 1，页面或者body设置宽度 margin: 0 auto 居中内容  

                             尽量不设置高度；overflow:hidden隐藏掉 避免有背景颜色下全渲染，全屏是蓝色。。。

2，浮动给li就好了 ，ul ol 不要考虑 ，li里的a要变成块元素 display:block; 一般要清除浮动 clear:both;一般情况下 不起作用。

所有要用第二种，visibility：hidden；height：0；IE的是.clearfloat｛zoom：1；｝

.clearfloat{             / 类选择器
display:block;          /*变成块元素*/
clear:both;           /*清除浮动 一定要设置高度为0*/
content:"";
visibility:hidden;
height:0;
}

3，

/*细节background要加 no-repeat*/
/*盒子模型写在前面*/
/*颜色尽量用3位数，不要英文*/

尽量不要*设置padding margin 为0；

4 有些要按顺序来 从大范围到小范围（和id，class没关系）

 如：伪类  link hover visited active 不按顺序有彩蛋。 //a:hover{}

body,body,h1,h2,ul,li,header,footer,a,p,h3,h4,h5,{

margin: 0;
padding: 0;
color: #333;
font-family:Verdana, Geneva, sans-serif, "宋体";
list-style:none;
display: block;

}

a{text-decoration: none;}
ul,li{list-style: none;}

* 字体 字体样式 不要点 颜色 块元素
a 不要下横线
a ：hover 下横线 颜色
p 行高
wrap 居中 限定宽度 边框 颜色等

头 宽100% 溢出隐藏
内元素 宽100% 高80 字体 字体样式 缩进
边距 浮动
ul
li 外边距 浮动

学习的乐趣是分享和比较（有成就感）！！！

学习css中得与惑

标签：

原文地址：http://www.cnblogs.com/TAO-JL/p/5866290.html