2009.12.22——div+css的一些知识-优快云博客

本文详细介绍了CSS中边框(border)、背景(background)的设置方法，包括颜色、样式及图片的重复和平铺方式等。此外还讲解了如何通过margin属性实现div居中布局，以及在不同浏览器中(float属性)的表现差异。

2009.12.22——div+css的一些知识
1.border:1px solid #999900;
用来设置边框的，其实每个元素外面都可以设置边框
border其实是一个简写，

border:border-width border-style border-color

A:border-width
边框的宽度，可以取thin(细),medium,thick(粗)，也可以和长度的表示法一样。
border-width也是个简写

border-width:border-top-width border-right-width border-bottom-width border-left-width;

B:border-style
边框的样式，可以取none,hidden,dotted(点线),dashed(虚线),solid(实线),double(双线),groove(槽

装),ridge(脊装,和groove相反),inset(凹陷),outset(凸起)
注意：border-style的初始值为none,所以除非设置了边框样式,否则边框将无法看见

border-style:border-top-style border-right-style border-bottom-style border-left-style;

C:border-color 边框的颜色就不用说了吧

2.background-color:#CCFF99;
background:
color: 文字的颜色
background 设置背景，包含文字的p段落,div层,page页面等的颜色与背景图片可以使用background属性
background包含5个属性，

background:color,image,repeat,position,attachment

A:background-color
背景的颜色，默认值为transparent(透明)
B:background-image
背景的图片，默认为none
background: url("imags/mainMenu.bmp")
C:background-repeat
背景图片的重复方式
取值：repeat(上下左右平铺整个),repeat-x(左右平铺),repeat-y(上下平铺),no-repeat(不平铺)
D:background-position
背景图片的位置初始值：0% 0%
取值：水平 left,center,right
垂直 top,center,bottom
垂直与水平 x% y%

下面是一些等式
	top left, left top 等价于 0% 0%.
	top, top center, center top 等价于 50% 0%.
	right top, top right 等价于 100% 0%.
	left, left center, center left 等价于 0% 50%.
	center, center center 等价于 50% 50%.
	right, right center, center right 等价于 100% 50%.
	bottom left, left bottom 等价于 0% 100%.
	bottom, bottom center, center bottom 等价于 50% 100%.
	bottom right, right bottom 等价于 100% 100%.

E:background-attachment
背景图片随滚动轴的移动方式
取值：scroll: 随着页面的滚动轴背景图片将移动
fixed: 随着页面的滚动轴背景图片不会移动

4.margin: auto; 让整个div居中

5.FF和IE的一个区别

#sideBar{
	/*background:  bule;*/
	height: 82%;
	width: 25%;
	/*border: 2px solid #04E;*/
	background-color: blue;
	position: relative;
	overflow: hidden;
	float: right;
}
#content{
	/*background: darkblue;*/
	height: 82%;
	width: 75%;
	float: right;
	/*border: 2px solid #555;*/
	background-color: green;
	overflow: hidden;