css网站布局学习笔记

1.网页布局中的元素分为两种：block块状对象和in-line行间对象（内联元素）。比如div为块状对象，span为行间对象，两个div放在一起分行，两个span在一起默认不分行。可以通过display:in-line(block)改变他们，如让两个div设为in-line不分行，或把文字连接改成block块状，变成按钮（常用）。
2.span和div一样为结构型标签
3<DIV id=header>
<DIV id=logo><IMG alt=标题 src="logo"></DIV>
<DIV id=nav>
<UL>导航</UL></DIV></DIV>
 没有
<DIV id=header>
<H1><IMG alt=标题 src="logo"></H1>
<UL>导航</UL></DIV>
更直观，更能反应内容
4.高度自适应。height:100%是相对于父对象高度100%，需要让层高度100%，必须设置html,body{margin:0px;height:100%}
5.关于浮动。网页中的各个元素根据上下关系形成文档流,各个元素按照自身是块状对象还是行间对象从上到下顺序显示，把一个元素设置为左浮动时，它的右侧就会有空出的地方，下一个元素会紧贴着这个元素的左边显示，如果宽度不够则到下一行。
6.清理浮动。当上一个元素设置为左浮动，如果不想浮动在上一个元素的左边，可以使用clear:left(拒绝左浮动)或者clear:both(不浮动);
7.用a:hover和一张背景图改变背景位移实现鼠标移动变色菜单，定义一个样式来区别当前浏览的菜单。
8.列表：
<UL>
<LI>
<H2>新闻标题</H2>
<H5>新闻时间</H5></LI></UL>
9.重复出现的样式优先使用class不使用id。可以多个class用在一个元素上面。
10.布局的时候别面出现多个div嵌套，能够多个div浮动自动换行的不适用嵌套。盒模型布局，看成一个方块。