DAY4学习笔记

  昨天由于有别的事，时间不够，只来得及把教程过一遍写出了作业，今天才有时间把学的东西都整理一遍,消化。
ｃｓｓ文本属性：

1. 缩进文本：text-indent属性。p {text-indent:5em;}文本首行缩进距离．
2. 水平对齐：text-align.
3. 两端对齐：justify。
4. 字间隔：word-spcing：改变字（单词，不是字母》之间的标准间隔
5. 字母间隔：letter-spacing:改变字母之间的标准间隔
6. 字符转换：text-transform:处理文本的大小写，有none（不做改动），uppercase（转为全大写），lowercase（全小写），capitaliz（首字母大写）
7. 文本装饰：text-decoration:有none（去掉所有修饰），underline（下划线），overline（上画线），line-through（贯穿线），blink（让文本闪烁）

---

ｃｓｓ字体：

1. font-family：设置字体。p{font-family:Georgia,serif,'new century';}以上句子表示的是将段落字体设置为Georgia，如果系统没有改字体，则用serif，如此类推；如果都没有，就用默认字体；注意，当字体名有空格时，要用单引号将该字体名包起来。
2. 字体风格：font-style. 最常用与规定斜体文本，有三个值：normal（正常字体），italic（斜体），oblique（文本倾斜显示，只是竖直文本的倾斜表示，不是斜体）
3. 字体变形：font-variant:设定小型大写字母
4. 字体加粗：font-weight:
5. font-size:推荐单位用em，代替px。1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。

---

ｃｓｓ链接：

1. a:link–普通的，未被访问的链接。
2. a:visited–已点击的链接。
3. a:hover–鼠标停在该链接上方。
4. a:active–链接被点击的瞬间。
   a:link {color:#FF0000;} /* 未被访问的链接的颜色 */
a:visited {color:#00FF00;} /* 已被访问的链接的颜色 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上的颜色 */
a:active {color:#0000FF;} /* 正在被点击的链接的颜色*/
   *注意：*a:hover必须在a:link和a:visited后面， a:active必须在a:hover后面

---

ｃｓｓ列表：

1. 要修改列表的标志类型，用list-style-type
2. 对标志使用图像：用list-style-image:url(xx.jpg)；
3. 设置标志出现在项内容值外还是项内容内部，用list-style-position
4. 以上三个合在一起的写法：li {list-style : url(example.gif) square inside}，顺序不限

---

css表格：

1. 宽度：width,高度：heigth;
2. 垂直对齐方式：vertical-align
3. 表格内容与边框的距离：padding：15px；

---

css框模型：
主要分为内容区，内边距，边框，外边距几个部分。

1. 内边距：padding—接收长度值或百分比，不能负数。默认是到四边都是一样的距离。h1 {padding: 10px 0.25em 2ex 20%;}表示到四边距离不同分别代表：padding-top，padding-right,padding-bottom,padding-left.这四个属性可以单独设置。当ｐａｄｄｉｎｇ取值为百分比时，百分比是相对父元素的width计算的。
2. border：边框；边框的样式：border-style;有十种不同的非inherit样式，包括none；其中，outset为凸起按钮；可以给边框设置多个样式：p.aside {border-style: solid dotted dashed double;}该语句代表：为类名为 aside 的段落定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。
      其中，四个方向的样式属性为：border-top-style,border-right-style,border-bottom-style,border-left-style,可以单独给某条边设置边的样式。
     也可以用border-top-width等属性定义单边的宽度。
      注意：要用边框时，一定要声明边框样式，没有的话或者设为none的话会默认设置为无边框，其他的宽度什么的也会无效。
     边框颜色：一次可以接受最多 4 个颜色值。颜色值小于 4 个，值复制就会起作用。也可以给单边框加颜色，border-top-color等等属性
      注意：有一种特殊颜色为transparent，为透明色，相当于创建有宽度的不可见边框。
3. 外边距：margin。外边距;这个属性接受任何长度单位、百分数值甚至负值.可以用margin-top等属性设置单边的外边距
   补充：
   **值复制规则：如果缺少左外边距的值，则使用右外边距的值。
   如果缺少下外边距的值，则使用上外边距的值。
   如果缺少右外边距的值，则使用上外边距的值。**
      换句话说，如果为外边距指定了 3 个值，则第 4 个值（即左外边距）会从第 2 个值（右外边距）复制得到。
   如果给定了两个值，第 4 个值会从第 2 个值复制得到，第 3 个值（下外边距）会从第 1 个值（上外边距）复制得到。
   最后一个情况，如果只给定一个值，那么其他 3 个外边距都由这个值（上外边距）复制得到。
4. 外边距合并：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
   合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并

---

ｃｓｓ定位和浮动：
定位：position属性：四个值：

1. static（元素框正常生成）
2. relative（框偏移某个距离，元素仍保持其未定位前的形状，它原本所占的空间仍保留。）
3. absolute（元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。）
4. fixed（元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。）
5. ａｂｓｏｌｕｔｅ和ｒｅｌａｔｉｖｅ的区别：
   相对定位ｒｅｌａｔｉｖｅ：相对自身本来的位置移动；没有脱离文档流，会单独占满一行。top等属性是相对父元素而言的。设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
   绝对定位ａｂｓｏｌｕｔｅ：脱离了文本流，位置只受bottom，top，left，，right影响。绝对定位的元素的位置相对于最近的“已定位“（很关键）祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
   fixed:与absolute相似，脱离了文本流，但始终相对于body定位

浮动：脱离了文本流，让块并排。。。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

1. ｆｌｏａｔ：有ｌｅｆｔ，ｒｉｇｈｔ，ｎｏｎｅ，ｉｎｈｅｒｉｔ四个属性，意如其名。
2. 行框里面设置浮动图片，会让文字围绕图片，很炫酷
3. .要消除周围的浮动元素的影响，可用ｃｌｅａｒ属性，该属性的值比ｆｌｏａｔ多一个ｂｏｔｈ值，代表两边都不可以有浮动元素