李超

cc编程笔记本。

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

CSS框架模型

以前总以为Padding区域是在元素内的,实际上不是的,Padding区域是元素内容以外的部分,Padding区域的外沿是Border,Border的外面是Margin区域,而Height和Width指的是最里面的高和宽,而不是从Border开始计算的。
也就是说,左右Border距离60px,左右padding是10px,那width就是60px - 10px * 2 = 40px。


Margin的设置

margin: 10px 0px 10px 0px;
顺序是从上面开始的顺时针,上 右 下 左。


CSS 列表

列表类型 list-style-type
作用于选择器 ul

ul{list-style-type:square}

使用list-style-type属性可以改变一个列表的类型,取值范围如下
none 无标记
disc 默认 实心圆
circle 空心圆
square 实心方块
decimal 数字
decimal-leading-zero 用0开头的数字 比如 01 02 03
lower-roman 小写罗马数字 i, ii, iv, v
upper-roman 大写罗马数字 I, II, IV, V
lower-alpha 小写英文字母 a,b,c,d
upper-alpha 大写英文字母 A,B,C,D
lower-greek 小写希腊字母 alpha, beta, gamma
lower-latin 小写拉丁字母 a,b,c,d
upper-latin 大写拉丁字母 A,B,C,D

列表图像 list-style-image
作用于选择器 li

ul li {list-style-image : url(xxx.gif)}

列表标志位置 list-style-position
ul li {list-style-position: inside}

取值是inside和outside,inside表示列表项目标记放在文本以内,环绕文本根据标记对齐。
outside是默认值,表示标记位于文本左侧,列表项目标记放置在文本以外,且环绕文本不根据标记对齐。

简写列表样式
为简单起见,可以使用方便的属性:list-style
li {list-style : url(example.gif) square inside}
里面的值的顺序可以是任意的,只要写了一个值,其他的会按默认值来填充的。



CSS 定位

定位方式 positon
取值范围
static 这个是默认值,设置Postion为static后,left,right,top,bottom都会失效,该元素将位于页面流给予的位置。
relative 相对定位,相对于该元素的默认位置,也就是static情况下的位置。
absolute 绝对定位,相对于父容器的位置。
fixed 固定定位,这个定位总是相对于浏览器的左上角,工作于IE7.0。

元素Z轴位置  z-index
默认值是0,指定了-1后,将位于默认元素的背面,而指定了1后,会位于默认元素的前面
posted on 2008-05-06 18:21  coderlee  阅读(329)  评论(0编辑  收藏  举报