css2常识

文本样式

1. letter-spacing 设置字间距 长度
2. word-spacing 设置词间距（中文无效）长度
3. text-indent 设置首行缩进
4. text-decoration 设置文本修饰线
   1. none
   2. underline
   3. overline
   4. line-throuth
5. vertical-align 不可继承
   1. 实现行内块或行内元素与同行的文本如何对齐
   2. 设置上标字和下标字
   3. 设置单元格（td和th）中内容的垂直对齐方式
   4. beseline 基线对齐
   5. top
   6. bottom
   7. middle
   8. sub
   9. super

CSS常用样式

鼠标光标样式

cousor：设置鼠标的光标样式 cursor:url(…/mages/a…png),pointer

自定义鼠标样式

1. ​ pointer:小手
2. ​ move：移动图标

列表样式

1. list-style-type 设置列表项图标类型 none：去掉列表项图标；
2. list-style-position 设置列表项图标位置 outside：在li的外面，默认值；inside：在li的里面；
3. list-style-images：自定义列表项图标；url（图片地址）
4. list-style：复合属性；多个值使用空格分隔，没有顺序和数量要求；
5. 列表样式只有设给ul、li、ol才会生效；

表格样式

1. table-layout：设置列宽固定；auto列宽自动，默认值；fixed：列宽固定。
2. border-spacing：设置单元格之间的距离，长度；
3. border-collapse：设置单元格合并边框；separate：不合并，默认值；collapse：合并；
4. cpation-side：标题位置；top：在上面。默认值。bottom：在下面。
5. empty-cells：没有内容的单元格的显示方式；show：显示，默认值。hide：隐藏

元素默认宽高

1. 行内元素：默认宽度： 被内容撑开，没有内容就没有宽度
   默认高度： 被内容撑开，没有内容会有一个行文字的高度（默认21px）
2. 行内块元素：默认宽度： 被内容撑开，没有内容就没有宽度
   默认高度： 被内容撑开，没有内容就没有高度；
3. 块级元素：默认宽度： 根据父元素内容宽度自动计算
   默认高度： 被内容撑开，没有内容就没有高度；

解决父元素塌陷

1. 父元素设置高度

2. 父元素也设置浮动

3. 给父元素设置 overflow:hidden（推荐）

4. 在浮动元素的后面添加一个兄弟元素，该元素要求是块级元素，设置 clear:both

5. 原理与方案四一致，使用伪元素选择器动态地在浮动元素的后面添加一个兄弟元素，设置 clear:both(推荐)

   .clearfix::after {
   content: “”;
   display: block;
   clear: both;
   }

   注意：习惯添加浮动后，立即在其父元素上添加清除浮动。形成条件反射。

行内块在父元素中纵向居中

1. 给父元素设置行高与父元素高度一致，给行内块元素本身设置 vertical-align:middle

行内元素或行内块元素之间的空白问题

① 元素之间的空白（左右）产生原因：代码中的换行；

解决方案：

1. 代码之间不写换行（一般不用）
2. 父元素设置font-size:0; 再单独给行内块元素设置font-size

② 底部的空白（图片的幽灵空白）

​ 产生原因：行内块元素默认底部与文字基线对齐，底部空白就是基线与底线的距离

​ 解决方案：

1. 父元素设置字体大小为0
2. 给行内块元素本身设置 vertical-align 值不是 baseline
3. 如果是图片，可以给图片设置成块级

③ 文字内容个数不同的行内块元素水平排列无法对齐

	产生原因：默认情况下，行内块元素会让里面的文字与外面文字基线对齐
	① 如果有一行文字，就是该行文字与外面文字基线对齐
	② 如果有多行文字，最后一行文字与外面文字基线对齐
	③ 如果没有文字，自己的底部与外面文字基线对齐
解决方案：给行内块元素设置 vertical-align，值不是 baseline

设置定位元素（绝对和固定）在包含块中水平和垂直都居中

1. left: 50%;
   top: 50%;
   marign-left: -宽度/2;
   margin-top: -高度/2;
2. left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;