上次的HTML历史第零讲话说似乎没什么人有反应么？【召唤尼尼~@口肯口肯ken娘
其实我觉得可以去设计的板块发= =
因为这个东西毕竟与网页设计关系比较大
但其实前端什么的就是呈现给各位观众，也就说越抢眼越吸引人的网页，才更能留得住用户。
所以网页的美化与前端开发也是有着重大关系的。学点网页美化相关知识，对做前端也是有帮助的。
昨天跟@基叔 聊了不少。提到关于CSS的问题，他复制给我一段话
学过CSS的人都知道，它不是一种编程语言。你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。
所以可能程序员以程序员的思维来写CSS，是有些难度。
再所以，我可能都会把这个帖子搬到设计板块去了。
好了废话不多说，我们现在进入正题，CSS简介和使用基础。
照样在度娘里摘文：
级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。对！就是大家都看过的，基本上每个网站或者页面都会运用到的级联样式表！
版本上和度娘讲的差不多，大家可以读一读度娘的解释（虽然没什么用= =）：http://baike.baidu.com/view/15916.htm
在这么短的帖子里，我最多也只能介绍那么多。
附上一个网站：http://www.divcss5.com/
接下来我们来看看需要什么基础（这是笔者综合起来的结果）：
1.盒子模型 2.网页元素 3.选择器 4.属性及属性值 5.布局
首先是盒子模型：
那么什么是盒子模型？其实就是css里引入的一个从抽象到具体的概念。把html中的各种标签也就是网页元素比作成一个盒子以便学习和使用的人能够更好的理解网页元素的控制。（这是我的理解）
盒子模型基本上被下面两张图诠释了。但是要深入理解，请自行上网找资料~
这就是大名鼎鼎的CSS盒子模型。
接下来说说盒子模型的理解：盒子模型的每一个属性都可以被声明被控制
现在举一个例子，请看代码[mw_shl_code=html,true]<!doctype html> *本站禁止HTML标签噢*
*本站禁止HTML标签噢*
<meta charset="utf-8">
*本站禁止HTML标签噢* 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>
*本站禁止HTML标签噢*
<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元素及大多数的替换元素，如图像和表单输入的元素。他们不必在新行上显示，也不强迫其他元素在新行上显示，而且可以作为任何其他元素的子元素
其实css中也提供了一个属性可以让元素转换类型，就是display属性，以下是display的属性值~
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 将对象作为表格行组显示
其实常用的display就只有block、inline和none。
下面来引用一段代码~[mw_shl_code=html,true]<!doctype html> *本站禁止HTML标签噢*
*本站禁止HTML标签噢*
<meta charset="utf-8">
*本站禁止HTML标签噢* 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;}
</style>
</head>
*本站禁止HTML标签噢*
<div id="container">
<div id="header">我是Header</div>
<div id="content">
<p id="test">
这只是一个测试这只是一个测试这只是一个测试
<a href="#" target="_blank">
这不是测试这不是测试这不是测试这不是测试这不是测试这不是测试这不是测试这不是测试这不是测试这不是测试这不是测试
</a>
这只是一个测试这只是一个测试这只是一个测试这只是一个测试这只是一个测试</p>
</div>
<div id="footer">这是网页的尾部</div>
</div>
</body>
</html>[/mw_shl_code]元素#test是一个p元素，我们知道是块级的，所以里面可以用a元素。但是想在a元素内插入div元素，
就很容易出现错误，可能是错位，可能是a元素的声明失效。
那么我想a元素也变成一个块级元素怎么办呢？
可以利用html标签属性style：[mw_shl_code=html,true]<a href="#" target="_blank" style="display: block;">[/mw_shl_code]其实就是在html中使用css
然后还可以通过选择器选择到a元素再加上display声明。这样就可以顺利将a转换成块级元素了。
好了今天就讲两小块~
唔。下次讲选择器、属性值、属性~
如果看完帖子的能不能告诉我需不需要开个html的内容呢？
似乎很多人对html都不太理解的说= =
