div+css网页布局小结

学习

满屏 重复图片
.top {
width: 100%;
height: 27px;
background: url(../images/top_bg.jpg) repeat-x;
}

div水平居中各种设置形式


div#wrap {

　　width:980px;

　　margin:0 auto; /*这里的0可以任意值*/

　　border:1px solid #ccc;

　　background-color:#999;

　　}

链接样式设置，一般无下划线 经过和点击同一颜色，点击过后和一开始同一颜色。

.nav_mid a:link, .nav_mid a:visited {
font-size: 16px;
color: #FFF;
text-decoration: none;
}
.nav_mid a:hover, .nav_mid a:active {
font-size: 16px;
color: #FF0;
text-decoration: none;
}


文字和DIV居中
height: 35px; line-height: 35px;设置一样的居中

线

border-bottom: 1px dotted #CCC; 细线  border: 1px solid #E8E8E8;实线
LI无原单

list-style-type: none;

display
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。


盒子布局
margin-top: 5px;
background: url(../images/search.jpg) no-repeat right center;
background-color: #FFF;
border: 1px solid #FFF;
padding-right: 25px;
  css中padding和margin的区别

margin 外边距

border 边框

padding 内边距



1、ul：默认的ul的margin和padding不是0，如果在导航中用到了左浮动的li，往往会把外部的div撑大，导致页面变形，改成： ul{margin:0px; padding:0px;}

2、img：
①这里牵涉的不同浏览器的问题，ie6里显示的图片height总是要大于准确值，这里就需要我们记住下面这一点 img{ display：block}；
②页面中最好不要用大块背景，能平铺的要平铺，否则加载起来会很慢，也不利于以后的优化和扩展，当然也有些大的网站，现在都尽量把背景统一放到一张图片上，用background-postion来取得背景。
③最好的格式就是gif格式，即确保了背景透明，在ie6中又不会有阴影，有时gif图片会有锯齿，这就需要我们保存成web格式，设置一下matter，matter的值用背景颜色的值越相近越好。

3、overflow：有时一些公司的注册协议都是很长，这就用到了overflow，可以把div的style里加上这个：overflow：auto

4、float：有时候一些div会挤到页面的上方，这里可能就是浮动引起的，可以加上clear：both。

5、div：height等于1px的div，在ie6中可能并不是1px，在这个div的style里加上font-size：1px;这样就ok了。

6、id和class：当一个样式在页面中多次使用时，不要用id，要用class，要使用js的时候，样式最好不要用id，因为id要留给js使用。ID在一个页面中出现的次数是一次，过多使用将失去样式的可重用性的特征，对于页面的可维护性也将大打折扣。

7、table与div: 现在网络上的大多数网页都是用table写的，可以说它是不标准的！table层层嵌套，缺点是很繁琐，修改起来很麻烦，用w3c网页标准来说，table真正的目的是用来显示数据的，而不是用来布局的。div布局的好处是它符合了w3c网页标准，div是真正用来布局网页的，以后维护时要是想改变布局的话修改起来很方便，现在sina,163等国内网站以及国外的大多数网站都是用div布局的，如果你真的想当一名网页设计师，建议你走div这条路，但前提是要把CSS学好，并且要学精！你可以设置body的CSS属性，或者设置Body中元素的CSS属性，例如P标记、Table标记、Div标记等，他们都有text-align属性，设置居中就可以了，另外需要注意的是，要让整个网页居中最好使用Table来定位内容的位置，这样操作起来最简单和最方便。

7、link：.link：link{}、.link：visited{}、.link：hover{}、.link：active{}。有一点，visited与hover的顺序一定不能倒换，否则ie6中会大大的问题。

8、网页布局的方法： 网页布局的方法有两种，第一种为纸上布局；第二种为软件布局。尺寸选择：目前一般800X600的分辨率为约定俗成的浏览模式。

9、层叠样式表的应用：
　　在新的HTML4.0标准中，CSS(层叠样式表)被提出来，它能完全精确的定位文本和图片。CSS对于初学者来说显得有点复杂，但它的确是一个好的布局方法。你曾经无法实现的想法利用CSS都能实现。目前在许多站点上，层叠样式表的运用是一个站点优秀的体现。你可以在网上找到许多关于CSS的介绍和使用方法。 当然，日趋炙热的WEB标准（XHTML+CSS）开是强烈推崇内容和表现相分离，并为下一代数据交换XML做为过渡（即XHTML）。
10、DTD:如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下面这行DTD<DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose>

11、float：1）元素务必指定width属性：很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。另外指定元素时尽量使用em而不是px做单位。2）float元素不能指定margin和padding等属性：IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。3） float元素的宽度之和要小于100%如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。4）float元素的父元素不能指定clear属性：MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的着名的bug，倘若不知道就会走弯路。

12、默认样式： 某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。

13、利用border属性确定出错元素的布局特性：使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。

14、使用清除浮动元素：停止书写诸如<div style=”clear:both”></div>,以及element:after {content:”.”;clear:both;visibility:hidden;height:0;display:block}这些都是hacks，不是最好的做法。应该如下：
#container {overflow:hidden}

#container {display:inline-block} #container {display:block}
为什么要用overflow:hidden，因为它具有神奇的魔力，具体解释看W3C的文档解释。

15、适当使用单位：不要使用px定义字体大小，使用px定义字体大小应该是table布局时代的一种旧习惯，与之对应的是像素字体在1024*768分辨率下看起来OK，但是时代是不断变化，现在1024分辨率的占有率不断下降，这也就意味着在1920的显示器上会觉得字很小。如何解决？用em单位定义，比如font-size:1.2em，意思就是该字体是默认字体的1.2倍,在火狐和IE下相当于16px，使用em的好处是，你可以通过改变body标签或者其他任意外部标签的字体大小来控制整站的字体大小，让字体具有弹性，而用px是无法做到的，除非你使用的浏览器的缩放功能。另外字体也不应该用诸如pt、cm等单位定义，避免使用百分比，1em和100%是等效的，但是后者占用了更多的空间而且有自己的怪癖。

16、Position：Float为主，Position为辅！！！如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响，当然你也可以用position，不过到时候计算的时候不要忘记padding的值。但是定位(position)有一个缺点，不会自适应内部元素的高度，KwooJan建议大家布局页面的时候，还是要以Float为主，Position为辅！这样你才能做出高质量的页面。