文字样式、盒子模型、布局与浮动
文字样式
字体属性：
Color: 颜色名称/十六进制/RGB码 #FFF和#FFFFFF都表示白色
Font-family：字形名称/字形名称.... 可以有多个字形，但只取一个，从头开始选直到找到一个适合的。
Font-size: 数值+%/数值+单位pt、px、em、ex
Font-style：normal普通/italic斜体/oblique斜体
Font-weight: normal普通/bold粗体/bolder超粗体/lighter细体
<html>
<body>
<h1 style="font-family:verdana">A </h1>
<p style="font-family:arial;color:red;font-size:20px;">哈哈</p>
</body>
</html>
属性：
文字水平对齐： text-align: left/center/right/justify两端对齐；
首先缩进：Text-indent: 数值+%/数值+单位pt、px、em、ex
字符间距：letter-spacing: normal/ 数值+单位pt、px、em、ex
行高： line-height: 数值+单位
是否换行：word-wrap: break-word
<html>
<body>
<h1 style="text-align:center">This is a 标题</h1>
<p>这个标题在这页的中间</p>
</body>
</html>
文字效果属性
垂直对齐：Vertical-align：baseline一般位置/super上标/sub下标/top顶端对齐/middle垂直剧中/botton底端对齐
文字装饰：text-decoration: none/underline下划线/line-through删除线/overline上划线
转换字母大小：text-transform：none/lowercase/uppercase/capitalize首字母大写
增加阴影：text-shadow
盒子模型初步
概念：几乎所有标签其实都是一个盒子——而所谓盒子，无非就是一个“矩形的区域范围而已”。其实所谓网页，无非是一个盒子套一个盒子。
在css中，每个盒子模型都是由内容（content）、边框（border）内边距（padding）、外边距（margin）四个部分组成；
组成盒子模型的四部分也可以这样理解：
**内容（content）就是盒子里装的东西；
**边框（border）就是盒子本身了；
**内边距(padding)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；
**外边距（margin）就是在有很多盒子摆放的时候不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。
906897-20160511230352593-1097179453.png
盒子的两种初始状态（基本表现）：
类似div的盒子：一个盒子自动“占据一行”（不管其内部内容多少）：这就是“块盒子”（块元素）。常用块盒子：
p, hr, h1~h6, table, form, ul, li, ol, dl, dt, dd, blockquote, pre,
特点：可以设置固定的宽高，margin，padding，
类似span盒子：一个盒子中的内容会跟同类的盒子并排在一行出现，除非该行已满，则会自然到下一行——类似文字的表现特性。：这就是行内盒子（行内元素）。行内盒子通常放“最终的数据内容”，比如文本，图片。其他行内盒子：
b, strong, font, i, u, a, img, input, textarea, select,
特点：宽高不能设定，而是由其内容“撑出”，margin和padding没有上下方面的表现。
布局初步：
将网页以逐步细化的方式分割成横向或纵向的几个独立区域。对于纵向区块，则可以使用div盒子自然而成。对于横向区块，则需要使用浮动才能实现。但浮动或导致父盒子失去“正确的高度”（自然高度）——因此又要考虑父盒子高度的修正：
1，设置固定高度，保证可以包住子盒子
2，对父盒子设置overflow:hidden样式，可以获得“自然高度”。
3，在父盒子内部添加一个清除浮动的空div: <div style=”clear:both;”></div>
浮动作用与特性：
float:left, float:right
作用：使一个块盒子可以跟其他块盒子“并列”放置。
特性：使其“浮”在别的标签之上，别的标签视它不存在而正常排列出来。
