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浮动自动换行的不适用嵌套。盒模型布局,看成一个方块。
原文地址:https://www.cnblogs.com/polar/p/1123770.html