前端学习日记（八）：css中字体、列表、鼠标形状、显示与隐藏、溢出处理、盒子模型的简单应用

一、字体样式（font）

1. font-style 【用于打开和关闭斜体文本】
   • normal 正常字体，关闭斜体
   • italic 斜体
   • oblique 模拟斜体

2. font-weight 【为字体设置粗细程度 】
   • normal 正常
   • bold 加粗字体
   • lighter 设置当前元素字体比父元素更细
   • bolder 设置当前元素字体比父元素更粗
   • 100–900 数值类型的粗细程度（值越大字体越粗）

3. text-align【水平对齐方式】
   • left
   • right
   • center
   • 设置行高进行垂直居中 一行文本，line-height的值等于容器的高度

4. text-transform 【允许字体改变 】
   • none 防止任何改变
   • uppercase 将文本转换为大写
   • lowercase 将文本转换为小写
   • capitalize 将所有单词第一个字母转换为大写
   • full-width 转换为类似于一个等宽字体

5. text-decoration 【设置或者取消文本修饰 】
   • none 取消所有文本修饰
   • underline 为文本添加下划线
   • overline 为文本添加上划线
   • line-through 为文本添加删除线

6. text-decoration-style【修饰线的样式】
   • dashed 虚线
   • dotted 点状线
   • double 双实线
   • wavy 波浪线
   • solid 实线

7. text-shadow 【设置或者取消文本阴影】
   语法： text-shadow: h-shadow v-shadow blur color;
   • none 取消所有阴影
   • h-shadow 必需。水平阴影的位置。允许负值。
   • v-shadow 必需。垂直阴影的位置。允许负值。
   • blur 可选。模糊的距离。
   • color 可选。阴影的颜色。

二、list（列表样式）

1. list-style-type【 设置列表项标志类型 】
   • none 无
   • disc 小黑点（默认的）
   • circle 空心圆
   • square 实心方形
   • decimal 数值，小于10的不补0
   • lower-roman 小写罗马数字，E.g. i, ii, iii, iv, v…
   • upper-roman 大写罗马数字，E.g. I, II, III, IV, V…
   • decimal-leading-zero : 数值，小于10的补0，E.g. 01, 02, 03, … 98, 99

2. list-style-position 【设置列表项标志出现的位置 】
   • outside 列表项标志出现在主块框的外部
   • inside 列表项标志出现在主块框的内部

3. list-style-image 【自定义设置列表项标志】
   • url() 指定图标位置

4. list-style 列【表样式的速记写法】
   • <type> <image> <position>

三、cursor（调整光标悬浮到链接上的时候光标的形状 ）

1. pointer 手型
2. crosshair十字交叉
3. wait 等待
4. help 帮助
5. move 移动…
6. default箭头
7. auto默认，浏览器设置的光标
8. text文本
9. 方向键
   右，东
   cursor: e-resize;
   左，西
   cursor: w-resize;
   上，北
   cursor: n-resize;
   下，南
   cursor: s-resize;
   右下,东南
   cursor: se-resize;
   右上，东北
   cursor: ne-resize;
   左下，西南
   cursor: sw-resize;
   左上，西北
   cursor: nw-resize;

四、 outline 【调整环绕链接的框】
• 类似border,但是不占据屏幕空间

五、其他样式

1. display 显示方式
   • inline 行内显示，宽高无效
   • block 块级显示，宽高有效
   • inline-block 行内显示同时宽高有效
   • none 不显示，不占据屏幕空间

2. visibility 显示与隐藏
   • hidden 隐藏，占据屏幕空间
   • visible 显示

3. opacity 透明度，0-1之间的取值，取值为0的时候隐藏，占据屏幕空间

4. overflow 溢出处理
   • hidden 超出内容隐藏
   • auto 超出产生滚动条
   • scroll 滚动条

六、盒子模型【文档中的每个元素都可以被看作是一个矩形盒子】

• width & height 用于设置内容区的宽高，该片 区域用于显示内容。盒子高度 默认为内容的高度。
• padding 内间距 代表内容盒子的外边界与外边 框的内边界之间的距离
• border 设定介于padding的外边缘与 margin的内边缘之间，默认值 为0
• margin 外边距 代表盒子四周的区域。设值方法 与padding类似。相邻元素的边 距会合并（margin collapsing ）

1. 默认盒子模型 W3C盒子 【使用box-sizing属性可以改变盒子模型，取值“content-box”的盒子为默认盒子模型。】
   • width 属性仅表示盒子内容所 占的宽度
   • height 属性仅表示盒子内容所 占的高度
2. 边框盒子模型 IE盒子 【使用box-sizing属性可以改变盒子模型，取值“border-box”的盒子为边框盒子模型。 】
   • width = width + padding-left + padding-right + border-left + border-right