学过CSS的人都知道，它不是一种编程语言。 你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。
级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。
这就是大名鼎鼎的CSS盒子模型。 接下来说说盒子模型的理解：盒子模型的每一个属性都可以被声明被控制 现在举一个例子，请看代码[mw_shl_code=html,true]<!doctype html><html> <head> <meta charset="utf-8"> <title>Test Document</title> <style type="text/css"> body{margin: 0px;padding: 0px;color: #fff;font: 20px "Times New Roman", Times, serif;} #container{width: 800px;margin: 0px auto;} #header{width: 800px;height: 100px;background-color: #333;} #content{width: 800px;height: 600px;background-color: #666;} #footer{width: 800px;height: 150px;background-color: #999;} #test { float: left; width: 200px; height: 300px; background-color: #005; margin-top: 30px; margin-right: 60px; margin-bottom: 60px; margin-left: 60px; /*padding*/ padding-top: 30px; padding-right: 60px; padding-bottom: 60px; padding-left: 60px; /*border*/ border-top: 30px solid #fff; border-right: 60px dashed #ff0; border-bottom: 60px dotted #ff5; border-left: 60px double #ff8; } </style> </head> <body> <div id="container"> <div id="header">我是Header</div> <div id="content"> <div id="test">我是内容！！！</div> 这是网页内容 </div> <div id="footer">这是网页的尾部</div> </div> </body> </html>[/mw_shl_code]这是一个简单的测试页面。 我们可以看到body标签中得4个div是#container和被包含着的#header和#content和#footer （现在估计就会有人问为什么不用html5的新标签= =笔者是老东西不爱用新的） 其中有一个id为test的元素！就是今天盒子模型的整体体现了！ 总结一下：盒子模型的属性有什么 上右下左的外边距、上右下左的边框、上右下左的内边距、宽度、高度、背景 看到过这个代码么？[mw_shl_code=css,true]#test{margin: 9px 8px 7px 6px;}[/mw_shl_code]这个就是属性的快捷用法，不用每条边距什么的都分开声明，那么是按照什么样的顺序呢？ 唔可能各位都察觉到我为什么要写”上右下左的“XXX，其实就是从上开始顺时针声明~ 那么，其实CSS到底能控制什么？ CSS能控制的就是body和body的元素！！！ 唔，这就是html的元素问题了。神马是元素啊？body是元素，div是元素，段落p是元素。 能在body标签里用上的东西基本上都是元素。 既然是元素！那就应该符合盒子模型！能够控制其所有的盒子模型中的属性！ 但是html中元素也是有区别的，于是就引入了块级元素和行内级元素之类等等：块元素(block element) * address - 地址 * blockquote - 块引用 * center - 举中对齐块 * dir - 目录列表 * div - 常用块级容易，也是css layout的主要标签 * dl - 定义列表 * fieldset - form控制组 * form - 交互表单 * h1 - 大标题 * h2 - 副标题 * h3 - 3级标题 * h4 - 4级标题 * h5 - 5级标题 * h6 - 6级标题 * hr - 水平分隔线 * isindex - input prompt * menu - 菜单列表 * noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容 * noscript - 可选脚本内容（对于不支持script的浏览器显示此内容） * ol - 排序表单 * p - 段落 * pre - 格式化文本 * table - 表格 * ul - 非排序列表 内联元素(inline element) * a - 锚点 * abbr - 缩写 * acronym - 首字 * b - 粗体(不推荐) * bdo - bidi override * big - 大字体 * br - 换行 * cite - 引用 * code - 计算机代码(在引用源码的时候需要) * dfn - 定义字段 * em - 强调 * font - 字体设定(不推荐) * i - 斜体 * img - 图片 * input - 输入框 * kbd - 定义键盘文本 * label - 表格标签 * q - 短引用 * s - 中划线(不推荐) * samp - 定义范例计算机代码 * select - 项目选择 * small - 小字体文本 * span - 常用内联容器，定义文本内区块 * strike - 中划线 * strong - 粗体强调 * sub - 下标 * sup - 上标 * textarea - 多行文本输入框 * tt - 电传文本 * u - 下划线 * var - 定义变量 可变元素 可变元素为根据上下文语境决定该元素为块元素或者内联元素。 * applet - java applet * button - 按钮 * del - 删除文本 * iframe - inline frame * ins - 插入的文本 * map - 图片区块(map) * object - object对象 * script - 客户端脚本
块级元素： 诸如段落、标题、列表、表格、DIV和BODY等元素都是块级(block-level)元素。图样和表单输入这样的替换元素，可以看做是快级元素，但通常都不这样看。每个快级元素都从一个新行开始显示，而且其后的元素也需另起一行进行显示。快级元素只能作为其他快级元素的子元素，而且需要一定的条件。 内联元素： 如A、EM、SPAN元素及大多数的替换元素，如图像和表单输入的元素。他们不必在新行上显示，也不强迫其他元素在新行上显示，而且可以作为任何其他元素的子元素
block : CSS1 块对象的默认值。用该值为对象之后添加新行 inline : CSS1 内联对象的默认值。用该值将从对象中删除行 none : CSS1 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 compact : CSS2 分配对象为块对象或基于内容之上的内联对象 marker : CSS2 指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用 inline-table : CSS2 将表格显示为无前后换行的内联对象或内联容器 list-item : CSS1 将块对象指定为列表项目。并可以添加可选项目标志 run-in : CSS2 分配对象为块对象或基于内容之上的内联对象 table : CSS2 将对象作为块元素级的表格显示 table-caption : CSS2 将对象作为表格标题显示 table-cell : CSS2 将对象作为表格单元格显示 table-column : CSS2 将对象作为表格列显示 table-column-group : CSS2 将对象作为表格列组显示 table-header-group : CSS2 将对象作为表格标题组显示 table-footer-group : CSS2 将对象作为表格脚注组显示 table-row : CSS2 将对象作为表格行显示 table-row-group : CSS2 将对象作为表格行组显示
