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
使用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
列表标志位置 list-style-position
取值是inside和outside,inside表示列表项目标记放在文本以内,环绕文本根据标记对齐。
outside是默认值,表示标记位于文本左侧,列表项目标记放置在文本以外,且环绕文本不根据标记对齐。
简写列表样式
为简单起见,可以使用方便的属性:list-style
CSS 定位
定位方式 positon
取值范围
static 这个是默认值,设置Postion为static后,left,right,top,bottom都会失效,该元素将位于页面流给予的位置。
relative 相对定位,相对于该元素的默认位置,也就是static情况下的位置。
absolute 绝对定位,相对于父容器的位置。
fixed 固定定位,这个定位总是相对于浏览器的左上角,工作于IE7.0。
元素Z轴位置 z-index
默认值是0,指定了-1后,将位于默认元素的背面,而指定了1后,会位于默认元素的前面