Peaceful mind Where there is a will, there is a way!

2Jun/090

css零接触

css(Cascading Style Sheets),中文译名层叠样式表。我们先通过例子熟悉下css的三个特性:浮动,定位和框模型。
(1)框模型
也就是盒模型,这个东西一定要不断的学习理解。
content(内容)->padding(内补丁/填充)->border(边框)->background-img(背景图片)->background(背景颜色)->margin(外补丁/空白边),如果觉得这样不好理解,可以自己去google一下,3维/flash版本的都有,可以加深你自己的理解.
谈到框模型,都会提到IE6.0在怪异模式下使用非标准的框模型。但在谈非标准的框模型前,顺便说下浏览器模式。IE和Opera有2种模式:标准模式和怪异模型,Mozilla和Safari还有"几乎标准的模式",除了在处理表格的方式方面有一些细微差别外,和IE和Opera的标准模式相同。浏览器根据DOCTYPE是否存在以及使用的DTD来选择要使用的表现方法。也可以通过document.compatMode属性查看是否向后兼容早期的浏览器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

标准的框模型:width和padding是分开计算的,而非标准的把padding看作是width的一部分

(2)浮动
浮动在不同的浏览器表现不一样方式。看下面的例子





第一个DIV
第二个DIV
第三个DIV

照我们一般的理解,设定为浮动的元素不占据页面的任何空间,按道理,div2应该占据div1原有的空间位置。在FIREFOX中显示一切正常,然而在IE中并非如此,而且浮动的元素反而存在空白边加倍的bug,IE确实让人够呛。通过设定display为inline可以修复空白边加倍的bug。而且背景颜色也存在bug,IE无论main中的width和height设为多少,以div所占据的空间为主;而FIREFOX在父对象上设置为多少,背景只占据这部分空间。
(3)定位
绝对定位:设为绝对定位的元素相对于其最接近的的父对象进行绝对定位,就是说以该父对象为参照,使用right,bottom等属性是都是相对于该父对象进行的;此外,绝对定位的元素不占据原有的空间
相对定位:设为相对定位的元素以原位置为参照进行相对定位;相对定位的元素依然占据原有的空间。






tel:0612887

with a hush upon the marsh , the afternoon slid . Into the late, immobile period, The sun glazing the reeds and coating the limestone quarry as I, in repose With the marsh, bathed in solitude and splendor.

了解完三个基本概念后,我们谈谈用js如何操纵css的属性
通过id获得该元素的样式名称和属性

var oDiv = document.getElementById("div1");
alert(document.styleSheets[0].rules[0].selectorText); //返回样式名称
alert(document.styleSheets[0].rules[0].style.cssText);//返回样式定义
Tagged as: No Comments