CSS阶段总结
HTML简介
现阶段理解：HTML（Hyper Text Markup Language)是用来描述网页的一种语言，超文本标记语言，不是一种编程语言，而是一种标记语言，标记语言是一套标记标签，标签是由尖括号包围的关键词。如和成对出现，第一个标签为开始标签，第二个标签为结束标签。
完成的HTML页面格式
<!DOCTYPE html> <!-- 声明为HTML5文档 --> <html><!--是HTML页面的根元素--> <head> <meta charset="utf-8" /><!--包含了文档的元（meta）数据， 如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。--> <title> <!--描述了文档的标题--> </title> </head> <body><!--包含了可见的页面内容--> <h1></h1><!--定义一个大标题--> <p></p><!--定义一个段落--> </body> </html>
什么是CSS
现阶段理解：CSS层叠样式表（Cascading Style Sheets)，样式定义了如何显示HTML元素。HTML与CSS结合解决了内容与样式分离，样式通过存储在样式表中。
CSS语法
CSS规则有两个主要部分构成：选择器+一条或多条声明。
body {/*选择器为body,{到}为声明，声明中包括属性和值属性和值被冒号分开以分号结束*/ color:#0f0; }
id和Class选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
#speacial{ font-weight:bold;/*粗体*/ color :#0f0; }
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
.titel { /*新闻标题样式*/ color: #0000ff; margin: 30px; }
CSS盒子模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒子模型（边框，内边距外边距，内容，长宽，每个盒子之间的排列，每个盒子之间的嵌套）
• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。
最终元素的总宽度计算公式：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
CSS块级元素行级元素
块元素是一个元素，占用了全部宽度，在前后都是换行符。
块元素的例子：
<h1> <p> <div>
内联元素只需要必要的宽度，不强制换行。
内联元素的例子：
<span> <a>
改变元素显示
块级元素显示为内联元素
li {display:inline;}
内联元素显示为块级元素
li {display:block;}
CSS标准流
HTML文档的文本布局，文本从左到右，从上到下，浮动元素和定位元素都不在正常流中。
CSS定位
定位的概念是定义元素框出现的位置，建立布局。
CSS 相对定位（relative定位)
对一个元素进行相对定位，让这个元素相对于它的起点进行移动。
.ttt { position:relative ;/*相对定位*/ top:20px; left:30px; }
CSS绝对定位（absolute定位）
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:
.ttt { position: absolute; /*绝对定位*/ top: 20px; left: 30px; }
CSS浮动
Float，会使元素向左或向右移动，知道他的外边缘碰到包含框或另一个浮动框为止。
img { float:right; }
清除浮动
使用clear
clear 属性指定元素两侧不能出现浮动元素。
.text_line { clear:both; }
