yanzhibo的专栏IlgawME)Y*Ml

背景位置属性(background-position) 为了提高Http的请求速度，有时候很多图片都做到一张图片里面，这时候就需要切图，就用到了background-position属性。这个属性和background-image属性连在一起使用，决定了背景图片的最初位置。body{ background-image:url(../images/css_tutorials/

* 是表示针对HTML的所有元素。margin表示边框外面留的空白，后面的0表示不留空白。padding表示边框内部带内容之间填充，后面的0表示不留空白。border表示边框，后面的0px表示边框宽度为0像素，边框绘制方式none表示不绘制边框。原文：http://guanjy0129.blog.163.com/blog/static/111549445

DIV盒子模型：从外到内依次包括： margin：外边距、border：边框、padding：内补白、content：内容。内外距离区别：其实说白了padding就是内容与边框的空隙。margin 则是模块与模块的空隙。图解：以下是W3C标准的盒子示例： DIV+CSS .div1

列表样式类型属性(list-style-type)这个属性用来设定列表项标记的类型。有以下值：• disc (缺省值，黑圆点) • circle (空心圆点) • square (小黑方块) • decimal (数字排序) • lower-roman (小写罗马字排序) • upper-roman (大写罗马字排序) • lower-alpha (小写字母排序)

利用CSS来布局页面布局DIV有点逻辑性!重点理解盒子模型,标准流和非标准流的区别,还有定位原理!把这3个攻破了,就非常简单了!多实践多参考!最后就是兼容问题了,在实践中自然就有经验了!这些兼容技巧都是经验来的!        盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟悉的标准盒子模型：     

共同：都是无意义的标签元素（标签本身没有任何含义）主要用于应用样式表，通过CSS来设置样式。区别：两者最明显的区别在于DIV是块元素，而SPAN是行内元素(也译作内嵌/内联元素)。块元素：是以另起一行开始渲染的元素，默认换行。行内元素：不需另起一行。默认不换行。测试一下下面的代码你会有更形象的理解：测试紧跟前面的"测试"显示这里会另起一行

visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征，虽然它们都可以达到隐藏页面元素的目的，但它们的区别在于如何回应正常文档流。DIV中display和visibility属性差别visibility属性：确定元素显示还是隐藏；visibility="visible|hidden"，visible显示，hidden隐

overflow检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。visible :　默认值。不剪切内容也不添加滚动条。假如显式声明此默认值，对象将以包含对象的 window 或 frame 的尺寸裁切。并且"> clip 属性设置将失效auto :　在必需时对象内容才会被裁切或显示滚动条hidden :　不显

visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征，虽然它们都可以达到隐藏页面元素的目的，但它们的区别在于如何回应正常文档流。visibility属性：确定元素显示还是隐藏；visibility="visible|hidden"，visible显示，hidden隐藏。当visibility被设置为"hidden"的

边框风格属性(border-style) 这个属性用来设定上下左右边框的风格，它的值如下： none (没有边框，无论边框宽度设为多大)  dotted (点线式边框)  dashed (虚线式边框)  solid (直线式边框)  double (双线式边框)  groove (槽线式边框)  ridge(脊线式边框)  inset

字体名称属性(font-family)这个属性设定字体名称，如Arial, Tahoma, Courier等。例句如下：.s1 {font-family:Arial} CSS字体族科 <!-- H1{ font-family: "隶书" } .tex

cursor属性，最常用的还是pointer。auto :　 默认值。浏览器根据当前情况自动确定鼠标光标类型。all-scroll :　IE6.0有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。col-resize :　IE6.0有左右两个箭头，中间由竖线分隔开的光标。用于标示项目

文本对齐属性(text-align)这个属性用来设定文本的对齐方式。有以下值：• left (居左，缺省值) • right (居右) • center (居中) • justify (两端对齐)文本对齐属性 text-align.p1{text-align:left}.p2 {text-align:right}.p3{text-align:center}

div+css提高篇之position定位relative与absoluteposition定位是前端新手的又一个障碍，好比是双节棍，刚开始练习的时候很容易伤者自己，纯熟似李小龙刷起来自然是得心应手，威力无穷。position定位在实际应用中多见于和js同时使用，纯静态页面使用position好比杀鸡用牛刀，大材小用不说，用起来也不会顺手。首先指出一点：使用position对某一个

DIV定位，position属性absolute ：绝对定位  位置相对于文档流的左上角，会脱离文档流，飘起来。配合top、right、bottom、left使用。有意思的是绝对定位也是“相对”的。它的坐标是相对其容器来说的。容器又是什么呢，容器就是离元素最近的一个定位好的“祖先”，定位好的意思就是其position是absolute或fixed或relative。如果没有这个

DIV水平居中显示示例： DIV+CSS /*设置水平居中*/ #main{ margin:0 auto; /*上下距离为0px，左右距离自动*/ width:960px; background:#ccc; } #other{ margin:10px auto; /*上下距离为10px，左

CSS按其位置可以分成：内联样式(Inline Style)内部样式表(Internal Style Sheet)外部样式表(External Style Sheet)1、内联样式是写在标签里面的，它只针对自己所在的标签起作用。      style="font-size:14px;color:red;">这个style定义段落中的字体是14像素的红色字2、 内部样式表（也

z-index 设置层级也就是设置元素的堆叠顺序。默认为0，即和文档流处于同一个层级。如果设置-1，则处于底层。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。注释：z-index 仅能在定位元素上奏效（例如 position:absolute;）！