紧急！标题要长~_html/css_WEB-ITnose

昨天临时接了个任务，修改个网页的前端CSS。
由于之前完全没有接触过。所以特来求助。。。
1、下面这种写法没搞懂是什么意思。

#mainBox #topBanner #menu{	display:table;	width:auto;	height:100%;	float:left;}

2、下面这段CSS在IE7以及IE8正常，但在IE9以上不正常。
这段主要实现是顶部的一个工具栏。

CSS:#mainBox{	display:block;	margin-left:auto;	margin-right:auto;	width:940px;}#mainBox #topBanner{	display:none;	width:100%;	height:30px;	background:url("res/bannerBg.png") repeat-x;}#mainBox #topBanner #logo{	width:230px;	height:100%;	float:left;	background:url("res/logo.png") no-repeat;}#mainBox #topBanner #menu{	width:auto;	height:100%;	float:left;}#mainBox #topBanner #menu a{	display:block;	padding:8px;	width:115px;	background:url("res/bigbtn.png") repeat-x;	color:#C6C5C8;	line-height:100%;	text-decoration:none;	float:left;}HTML：  
	
		
		
			LIVE			PLAY BACK			SETTINGS			LOG OUT		
	

具体表现为：IE7下这段正常显示，IE8的时候这段整体下沉了30px，IE9下整体不显示。
图片上传不了（CSDN最近大姨妈太严重了）。 大致的效果是这样的。

IE7：/*logo*//*btn1*//*btn2*//*btn3*//*btn4*/          <=====正常效果IE8：/*logo*/     /*btn1*//*btn2*//*btn3*//*btn4*/        <=====下沉了30pxIE9：/*logo*/

3、请大家给介绍几个有关CSS布局的技术博客（由浅入深）和书籍。
4、第一次正面接触CSS，也不知道用什么工具，给介绍个常用的调试工具。
在此先谢过了。

回复讨论(解决方案)

补充一下：

#mainBox #topBanner{    display:none;    width:100%;    height:30px;    background:url("res/bannerBg.png") repeat-x;}display属性是通过JS来动态改变成block的。

贴出的代码咱看不出什么，，只能猜测是，a引起的，，#mainBox #topBanner #menu a设置一下margin:0;line-height:0;试试

ie9浏览器已经有控制台 可以查看dom元素状态了 f12

贴出的代码咱看不出什么，，只能猜测是，a引起的，，#mainBox #topBanner #menu a设置一下margin:0;line-height:0;试试

#mainBox #topBanner #menu
这种写法是不是 就是 CSS 后代选择器
http://www.w3school.com.cn/css/css_selector_descendant.asp

贴出的代码咱看不出什么，，只能猜测是，a引起的，，#mainBox #topBanner #menu a设置一下margin:0;line-height:0;试试

#mainBox #topBanner #menu
这种写法是不是 就是 CSS 后代选择器
http://www.w3school.com.cn/css/css_selector_descendant.asp

不是后代选择器
简单来说就是这几个id用的是同一个样式

贴出的代码咱看不出什么，，只能猜测是，a引起的，，#mainBox #topBanner #menu a设置一下margin:0;line-height:0;试试

#mainBox #topBanner #menu
这种写法是不是 就是 CSS 后代选择器
http://www.w3school.com.cn/css/css_selector_descendant.asp

不是后代选择器
简单来说就是这几个id用的是同一个样式

#mainBox{    display:block;    margin-left:auto;    margin-right:auto;    width:940px;}#mainBox #topBanner{    display:none;    width:100%;    height:30px;    background:url("res/bannerBg.png") repeat-x;}#mainBox #topBanner #logo{    width:230px;    height:100%;    float:left;    background:url("res/logo.png") no-repeat;}#mainBox #topBanner #menu{    width:auto;    height:100%;    float:left;}

那像这几个
mainBox ，topBanner ，menu，logo分别都是哪些属性呢？

贴出的代码咱看不出什么，，只能猜测是，a引起的，，#mainBox #topBanner #menu a设置一下margin:0;line-height:0;试试

#mainBox #topBanner #menu
这种写法是不是 就是 CSS 后代选择器
http://www.w3school.com.cn/css/css_selector_descendant.asp

不是后代选择器
简单来说就是这几个id用的是同一个样式

#mainBox{    display:block;    margin-left:auto;    margin-right:auto;    width:940px;}#mainBox #topBanner{    display:none;    width:100%;    height:30px;    background:url("res/bannerBg.png") repeat-x;}#mainBox #topBanner #logo{    width:230px;    height:100%;    float:left;    background:url("res/logo.png") no-repeat;}#mainBox #topBanner #menu{    width:auto;    height:100%;    float:left;}

那像这几个
mainBox ，topBanner ，menu，logo分别都是哪些属性呢？

你贴的这些全部都是以 CSS ID 选择器 命名的样式名.

CSS ID 选择器 有以下属性
1.在一个 HTML文档中,ID 选择器仅仅会使用一次;
2.ID 选择器不能结合使用;


至于你的问题

那像这几个
mainBox ，topBanner ，menu，logo分别都是哪些属性呢？

这个是后代选择器的写法.所以是选择作为某元素后代的元素.比如logo,把他定义到DIV/SPAN上面,SPAN/DIV就用上了他
但后代选择器用ID来定义 又没有任何意义.
所以我说他这套命名是不太规范的(个人意见)

贴出的代码咱看不出什么，，只能猜测是，a引起的，，#mainBox #topBanner #menu a设置一下margin:0;line-height:0;试试

#mainBox #topBanner #menu
这种写法是不是 就是 CSS 后代选择器
http://www.w3school.com.cn/css/css_selector_descendant.asp

不是后代选择器
简单来说就是这几个id用的是同一个样式

#mainBox{    display:block;    margin-left:auto;    margin-right:auto;    width:940px;}#mainBox #topBanner{    display:none;    width:100%;    height:30px;    background:url("res/bannerBg.png") repeat-x;}#mainBox #topBanner #logo{    width:230px;    height:100%;    float:left;    background:url("res/logo.png") no-repeat;}#mainBox #topBanner #menu{    width:auto;    height:100%;    float:left;}

那像这几个
mainBox ，topBanner ，menu，logo分别都是哪些属性呢？

你贴的这些全部都是以 CSS ID 选择器 命名的样式名.

CSS ID 选择器 有以下属性
1.在一个 HTML文档中,ID 选择器仅仅会使用一次;
2.ID 选择器不能结合使用;


至于你的问题

那像这几个
mainBox ，topBanner ，menu，logo分别都是哪些属性呢？

这个是后代选择器的写法.所以是选择作为某元素后代的元素.比如logo,把他定义到DIV/SPAN上面,SPAN/DIV就用上了他
但后代选择器用ID来定义 又没有任何意义.
所以我说他这套命名是不太规范的(个人意见)

t	
i		
o
	
	
y		
o
	
	
z		
y
	
	
m		
y
	

个人感觉不规范原因
1.与W3C CSSID选择器标准冲突;
2.CSS选择器也有权重的.