首页 > 程序开发 > CSS入门

CSS入门

2007年3月8日

番茄’s blog 不错的css初学者教程, 前提是有一点点HTML代码基础: )

css在线手册

The visual design of Web 2.0 web2.0 流行用色

CSS2盒模型2中的盒模型是关系到设计中排版定位的关键,任何一个选择符都遵循盒模型规范,例如、、……盒模型包含
(外补丁)margin,(背景颜色)background-color,(背景图片)background-image,(内补丁)padding ,(内容)content,(边框)border。
下图是CSS盒模型的示意图
css盒模型css三维模型需要说明的是:IE和Mozilla浏览器对盒模型的解释不一致,造成我们定位上的困难,主要差别是:

 

IE计算2个div之间的距离时候,会把1px的border计算在内,而mozilla没有;
设定div的宽度后,如果给padding加一个值,IE 5.x会在宽度内减去这个值,而IE 6 & M ozilla会在宽度基础上加上这个值。

css定位元素的使用:

1. position:static|无定位:position:static是所有元素定位的默认值, 一般不用注明,除非有需要取消继承的别的定位
2. position:relative|相对定位: 使用position:relative,就需要top,bottom,left,right4个属性来配合,确定元素的位置。

如,如果要让div-1层向下移动20px,左移40px:
#div-1 {position:relative;top:20px;left:40px;}
3. position:absolute|绝对定位: 使用position:absolute;,能够很准确的将元素移动到你想要的位置.

4. position:relative + position:absolute|绝对定位+相对定位
  如果给父元素(div-1)定义为position:relative;子元素(div-1a)定义为position:absolute,那么子元素(div-1a)的位置将相对于父元素(div-1),而不是整个页面

5 .float|浮动对齐
  使用float定位一个元素有float:left;&float:right;两种值。这种定位只能在水平坐标定位,不能在垂直坐标定位。而且让下面的元素浮动环绕在它的左边或者右边。

7.clear float|清除浮动
  如果你不想让使用了float元素的下面的元素浮动环绕在它的周围,那么你就使用clear,clear有三个值,clear:left;(清除左浮动),clear:right;(清除右浮动),clear:both;(清除所有浮动)。

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

程序开发

  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.

This blog is kept spam free by WP-SpamFree.