一、记单词、复习前一天的学习内容、讲解练习作业。
二、转义字符
http://tool.oschina.net/commons?type=2 （转义字符的链接）
三、文本样式设置
1、text-indent 用于段落首行缩进。如果用于中文布局，一般会使用2em作为单位，段落缩进的首行字符。
2、text-decoration 文本装饰线它的属性值有（none、line-through、overline、underli）
3、text-transform英文字母大小小转换 它的属性值为（capitalize将每个英文单词首字母变为大写字母。 None默认、uppercase将所有英文字母转为大写字母、lowercase、将所有因为字母转为小写字母。）
4、text-shadow 文本的影阴
该属性的作用是给文本添加阴影效果。
该属性最初是在CSS2.0中被定义的，但在CSS 2.1被删除了，不知道是出于什么考虑，在CSS3.0中又重新被写进了规范。
目前除了IE9及之前版本不支持该属性外，其它主流浏览器钧支持该属性。
该属性有4个值，具体如下：
水平方向阴影偏移（h-shadow）
“0”表示维持原位，正数为向右偏移，负数为向左偏移。单位为像素“px”。
垂直方向阴影偏移（v-shadow）
“0”表示维持原位，正数为向上偏移，负数为向下偏移。单位为像素“px”。
阴影模糊距离（blur）
用正数表示阴影模糊的单位距离，距离越大模糊程度越高，单位为像素“px”。
阴影的颜色（color）
支持Web技术中的常用颜色模式：“颜色英文单词”、“HEX”、“RGBa”、“HSLa”。“行内块元素”和“块元素”所用的“box-shadow”（以后会学习）有所不同，文本阴影的属性值里没有“inset”（设置为内阴影）和“spread”（阴影的扩展，单位像素“px”），以后在使用中需要加以区分。
5、line-height 行高
该属性是用于设置“行内元素”中文本元素在一行中所占据的高度，（可实现单行文本垂直居中的效果）
使用场景如：表格、导航按钮、自定义样式按钮、标题栏等
6、单词之间的间距（word-spacing）
7、单词的间距“word-spacing”
该属性用于设置英文单词之间的间距。
注意
他区分单词时是按照单词两边是否含有空格来判断的，所有如果你的内容是中文，
当你的文字间没有空格时，整体就会被当做一个单词。
当你的每个汉字两边都有空格时，每个汉字才会被当做是一个单词。
其值可以为负数，距离会减小
8、字符的间距“letter-spacing”
和“word-spacing”有所不同，该属性是用于控制字符间的间距。
一个字母，一个汉字，甚至一个空格都是一个字符。
注意：
- 在html中，多个空格最终会变为一个空格的。
- 其值可以为负数，距离会减小
9、空格换行处理“white-space”
该属性设置如何处理元素内的空格符和换行符，它主要有以下值：
normal（默认）
由浏览器处理空格和换行
pre
段落里所有的空格符和换行符都会被保留（类似于标签）
nowrap
段落内的文本不会换行（类似于没有设置过换行的“notepad”）
pre-wrap
段落里所有的空格符序列和换行符序列都会被保留（除了在某些编码格式下和“pre”有所差距，大多数时候可以说它和“pre”这个值是等价的）这点类似于pre但他不会更改浏览器的默认值。当内容小于窗体宽度时会出现滚动条。
pre-line
多空格会合并成一个，但换行符会保留
注意：如果当前的内容是无空格的一连串的英文那么它会被浏览器当做是一个单词不会换行，只会出现滚动条去适应它。
9、decoration 设置文字的方向（rtl从右到左 ltf 从左到右）
10、overflow（它的值 hidden auto scroll ）文本溢出时的处理。
11、text-overflow
文本的裁切“text-overflow”
该属性规定当文本溢出所在标签时进行的处理。
该属性主要包含两个值：
clip 裁剪文本（从属性意义不大，通过overflow：hidden可实现此效果）
ellipsis显示省略符号来代表被裁剪的文本
不过该属性不能单独使用，必须要配合文本换行处理属性“white-space”和内容溢出处理属性“overflow”来使用，否则会达不到所期望的效果。
显示省略号的流程
文本长度需要超出边界
不允许内容换行
设置超出就隐藏
设置文本末尾显示省略号
div {
width: 5rem;
height: 5rem;
border: 0.1rem solid red;
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
Css盒子模型
1、 什么是盒子模型
所谓盒子模型，即是将网页布局中的元素（能设置宽高的元素）进行拟物化的比喻，一个盒子是由“内容–content”（盒子内的物件）、“内间距–padding”（物件和盒子的距离）、“边框–border”（盒子壁）、“外间距–margin”（盒子和其它物体的距离）组成，如下示例图：
IE盒子模型与W3c盒子模型
(1) 由于一些“客观”的原因，IE浏览器和标准的盒子模型有一定的差异。
(2) 标准的盒子模型
“width”和“height”== conent、padding和border；
IE浏览器盒子模型
“width”和“height == content
(3) 盒子模型的选择与转换
一方面为为了兼容IE浏览器，另一方面是IE的盒子模型在实际的布局中的确更容易控制。所以我们在实际的开发工作中，都是将标准的盒子模型转换为IE的盒子模型。转换方式如下：
是将CSS的样式属性样式：
“box-sizing”的值设为“border-box”IE盒子模型。
box-sizing”的值设为“border-conten”w3c盒子模型。
当然，如果我们要将IE的盒子模型转化为标准的盒子模型也是可行的，即将“box-sizing”的值设置为“cotent-box”，不过业界并不推崇这样做。
2、盒子宽度，盒子高度，内间距，边框，外边距
基本含义
width: 盒子宽度
Height： 盒子高度
Padding：内边距：盒子内容与盒子边框的距离
Border： 盒子边框
margin: 外边距：盒子边框与其他标签的边框的距离
组合值具体设置padding/margin
一个值: 上右下左（同时设置四个值分别设置）
两个值：上下，左右
三个值：上，左右，下
Border设置
border-width 设定边框的宽度。
border-style 设置边框的类型，主要有以下可以设定的值
none，无边框
solid，实现边框
dotted，点线边框
dashed，虚线边框
double，双线边框
groove，3D凹槽边框
ridge，3D凸槽边框
inset，内浮雕边框
outset，外浮雕边框
border-color
设置边框的颜色，
当然“border”属性的各个分支属性也能单独地对某个方向上的值进行设置
圆角的盒子“border-radius”
元素的轮廓“outline”
该属性用于设置一个元素的轮廓线，和“border”不一样，“outline”无论在什么“盒子模型”下，都不会占据页面的空间，并且它不能分别去设置各个方向的值，即不能对“top”、“right”、“bottom”和“left”方向的“outline”进行分别设置，只能进行统一设置。
在使用“webkit（老版本Chrome浏览器、Safari浏览器以及iOS和Android系统自带浏览器）”内核或“blink（以新版的Chrome浏览器和Opera浏览器为代表）”内核的浏览器中，该属性会在表单元素在获得焦点后自动出现，本意是让用户获得更好的交互体验，但该设定很多时候反而会影响我们对“Web”页面的风格设置，这个时候我们都是将它的值设置为“none”。
另外，“outline”属性并不受圆角属性“border-radius”的影响。和“border”属性大体一致，
“outline”有以下分支属性：
outline-width
设置轮廓线的宽度，能为Web技术中常用的度量单位，最常用的为像素“px”。
outline-style
设置轮廓线的样式，和“border-style”一致，这里就不在赘述。
outline-color
设置轮廓线的颜色，和“border-color”一样支持Web的四种“颜色模式”。
outline-offset
设置轮廓线相对元素边界的距离，通常以像素“px”为单位。