div+css详解知识点

一.
DIV+CSS important知识讲解
color:#F00 !important; color:#00F这两个同样的对字体颜色控制，常理来说浏览器从左到右读取，IE浏览器将读取这2个颜色最后一个color:#00F来显示网页文字颜色，但是在IE7中将会显示color:#F00 !important; 的颜色，这就是由于IE7独特的识别支持important并优先级介绍相同CSS属性的important设置CSS样式属性。
二.
1、CSS网页版式错位
解决方法：统一一次用到标签的CSS属性，也就是CSS初始化。
css的初始化就是对全站的css进行一次初始化。
2、CSS网页在不同浏览器显示文字大小、颜色不一致
解决方法：设置好charset网页编码，如网页UTF编码内容复制到GBK网页里需要借助CSS工
（常用DW软件）转换编码
3、CSS网页空白
解决方法：记得关闭标签，如

开始内容 记得使用

结束
4、DIV+CSS在各浏览器中显示布局样式不同
解决方法：使用CSS HACK兼容各大浏览器5、记得正确的CSS doctype声明
三.
1、img图片多了边框，特别是链接后的图片带边框
解决方法：我们只需在初始化IMG标签CSS即可
img{ padding:0; border:0;} 加入此CSS即可消除边框
2、图片超出撑破DIV
解决方法：避免图片过宽撑破网页，我们建议在上传图片时候将图片剪切来比设置宽度小，同时还可以对该对象加入overflow:hidden属性，即隐藏超出内容包括图片
四.
css的优化主要是将重复的样式简写 例如网页元素的margin pading border样式他们都有其上下左右的宽带或者 都可以直接使用标签加值进行设置
五.
让两个上下结构DIV块距离为零，通常新手在制作DIV CSS页面的时候，不会考虑到初始化CSS属性，这样各标签属性默认的CSS属性将会造成错位、兼容等问题。
在CSS里设置DIV标签各属性参数为0
解决方法：div{margin:0;border:0;padding:0;}
这里就设置了DIV标签CSS属性相当于初始化了DIV标签CSS属性，这里设置margin外边距为0；边框border属性为0和内补白也为0；这样相当于就初始化了DIV之间距各属性距离为0，这样就不会造成DIV直接有一定的距离。
六.我们常常在IE6版本的浏览器查看一个网页显示完整，而在IE7及以上版本浏览器、火狐等浏览器上内容显示不完整-DIV+CSS网页内容显示不完整诊断教程。
解决方法：取消其对象的高度（height）css样式，即可兼容各浏览器，内容也会显示完整。如果取消了高度让网页布局左右内容板块边框不对齐，你可以不取消高度，但是你需要减少内容，将显示不完整的内容去掉
设置了css样式表属性overflow:hidden，隐藏超出指定宽度、高度的对象。
七.
需要先设计网页美工理由：
1、一般网络公司给客户做网页前都是需要写方案及文档，自然也需要制作出效果图给客户确

定。
2、仿制别人网站。这种情况大部分技术都不需要制作网页美工图，但是却相当于制作了网页美工图，如网页制作时候的网页图片素材都是从被仿网页下载扣来的，而制作网页样式也是跟着被仿网页样式制作，一定程度上说相当于也是先制作了网页美工图，区别是在这种情况下无需你再切图。
3、项目开发。特别对于一般像样的网站项目，都是必须要求出效果美工图的。

什么情况下无需先出美工图
1、仿制别人网页
2、没什么网页美工要求（很少），只技术自己给自己制作一个网页。

先设计好网页美工图好处
1、网站整体风格及美工可控制
2、在制作的时候节约时间。相信试过直接制作DIV+CSS的朋友，知道自己在制作网页的时候很浪费时间，因为每做一点就会思考接下来怎么设计美观，从而一个小部分可能会浪费你很多时间。
3、网页素材因素。因为在制作一个网页是需要图片和图标素材的，如果是先做美工图可以不愁素材。
八.解决CSS网页错位总体思路
1、遇到在不同版本浏览器中显示高矮不一可以使用CSS hack来解决
2、如果左右结构网页布局成了上下结构布局。解决方法是检查float浮动是否设置好；检查左右宽度是否计算正确，是否是设置左右宽度大于了总宽度导致的上下结构；div开始与div结束包含是否正确，可以使用设置border边框来验证，是否少了div标签结束或多了div。
3、字体高度不一致，有没有设置line-height或height属性来控制字行间距、CSS 字间距4、可能是你CSS 注释有问题。
4、可能是你CSS 注释有问题。
九.DIV+CSS规范命名大全集合
页头：header 如：#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id区别及用法
登录条：loginBar 标志：logo 侧栏：sideBar
广告：banner 导航：nav 子导航：subNav
菜单：menu 子菜单：subMenu 搜索：search
滚动：scroll 页面主体：main 内容：content
标签页：tab 文章列表：list 提示信息：msg
小技巧：tips 栏目标题：title 加入：joinus
指南：guild 服务：service 热点：hot
新闻：news 下载：download 注册：regsiter
状态：status 按钮：btn 投票：vote
合作伙伴：partner 友情链接：friendLink 页脚：footer
版权：copyRight
常用配合标签div、h1、h2、h3、h4、span、em、b、strong、font、u
CSS的 ID 的命名
外　套：wrap 主导航：mainNav 子导航：subnav
页　脚：footer 整个页面：content 页　眉：header
版

权：copyRight 商　标：label 标　题：title
主导航：mainNav(globalNav) 顶导航：topnav
边导航：sidebar 左导航：leftsideBar 右导航：rightsideBar
旗　志：logo 标　语：banner 菜单内容1： menu1Content
菜单容量：　menuContainer 子菜单： submenu
边导航图标：sidebarIcon 注释： note
面包屑：breadCrumb(即页面所处位置导航提示)
容器：container 内容：content 搜索：search
登陆：login 功能区： shop(如购物车，收银台)
当前：current
DIV+CSS命名小结：无论是使用“.”（小写句号）选择符号开头命名，还是使用“#”(井号)选择符号开头命名都无所谓，但我们最好遵循，主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名，同时考虑命名的CSS选择器在HTML中重复使用调用。
wrap（外套、最外层）、header（页眉、头部）、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1\h2\h3\h4标签使用)、content (内容区)、footer(页脚、底部)、logo（标志、可以配合h1标签使用）、banner（广告条，一般在顶部）、copyRight（版权）。其它可根据自己需要选择性使用
主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css
第一：DIV+CSS页面对于spider爬行效率
Div+Css的代码精简是table无法比拟的，即使DIV CSS的html加上对应CSS文件一般都小于table的html文件，div+css实现了样式和布局完全分离，前台垃圾代码大量减少，内容更加突出，让蜘蛛在你的网站上快速爬行，短时间内爬完你的网站。

第二：改善网页打开速度
众所周之：客户是上帝。搜索引擎也不例外，所以搜索引擎会优先抓取客户体验比较好的网站。真正的SEOer不只是为了追求收录、排名，快速的响应速度是提高用户体验度的基础网站。试问：如果你打开一个网站需要一分钟以上，你下次还会来这个网站吗？
DIV+CSS布局较Table布局减少了页面代码，加载速度得到很大的提高，这在Spider爬行时是非常有利的。过多的页面代码可能造成爬行超时，Spider就会认为这个页面无法访问，影响收录及权重。
题外：tale布局的页面打开原理：一般table布局的页面是大表格套中表格，中表格嵌套小表格，小表格再套小小表格。一般第一个表格（最外边的）要读取完才能显示出来，读取大表格的同时又要读取大表格中的小表格，大大加长了网页打开速度。
即浏览器加载table页面时候通常是加载

开始等加载完对于及加载完t

able的关闭才将内容送出显示给浏览者，这样让浏览者感到网页等等时间长点从而感觉慢。

第三：对搜索引擎排名的影响
基于XHTML标准的DIV+CSS布局，一般在设计完成后会尽可能的完善到能通过W3C验证。截止目前没有搜索引擎表示排名规则会倾向于符合 W3C标准的网站或页面，但事实证明使用XHTML架构的网站排名状况一般都不错。这一点或许会有争议，但樂思蜀本人保持这样的观点，有异议者可以拿三组以上基本同等质量的网站对比观察。

DIV+CSS对网页的整体控制性要强很多。通过简单的代码修改，即可大幅度对网站进行代码优化改版。实用性很强。
很多人感觉CSS对排名虽然很有利，但是影响排名的因素重多。这并不唯一的没有基础的同样可以利用表格 但是表格不要超过三层。建议不会css+div的朋友有时间学习一下

DIV+CSS的不好之处：
1、开发DIV+CSS页面相对于TABLE页面需要更多的开发时间
2、兼容性，因现在处于浏览器大战时期，而各个浏览器的内核不同造成了一点点对CSS属性解释不同而造成兼容问题，这点是新手比较棘手的问题。相信浏览器在遵循W3C标准下能很好的统一其解释。