CSS-04 (文本属性,表格属性,定位(堆叠),显示方式,)

2  文本属性
**①颜色:** color
**②水平对齐方式:** text-align:left/center/right/justify
与margin:0 auto 让块级元素本身居中不同,text-align是让元素内部的行内,行内块,文本居中(如p,div无法居中,p标签在div中居中是p标签继承了div的text-align:center)
**③垂直对齐方式:** line-height:px/无单位数字表示字号的倍数
如果字号大小小于行高,文本会在行高范围内的垂直中心显示.多行文本不用line-height进行居中,而可以用div将一个文本包裹起来,再把这个div居中即可.
**④文本的线条修饰:** text-decoration:none(默认),underline(下划线),overline(上划线),line-through(删除线)
**⑤首行缩进:** text-indent:以px为单位的数字
**⑥文本阴影:** text-shadow:水平偏移 垂直偏移 模糊距离 颜色;(比box-shadow少一个大小 )

九 表格
1 表格的常用属性
尺寸,边框,北京,字体,文本,内外边距都生效.边框只设置table外围边框
2 td/th的属性
尺寸,边框,北京,字体,文本,内边距都生效.外边距无效
td中文本处置对齐：vertical-align：top/middle/bottom(这里是middle)
3 表格特殊显示i方式
表格是一种特殊的显示方式，实际的尺寸是根据内容多少决定的，内容少，以设定的尺寸为准，内容多以内容为准
同一行最大高度取决于最高的那个td；同一列最大宽度，取决于最宽的那个td，这就导致了表格不能按照普通的渲染方式画在页面上，需要先把表格所有数据读取到内存中，再一次性渲染（效率低）。
4 设置表格的显示规则
自动布局（默认）：table-layout:auto---表格复杂时，加载速度慢，但是表格布局比较灵活,适用于不确定每列大小的，且不太复杂的表格。
固定布局：table-layout:fixed---在任何情况下，表格尺寸都按照设置的为准，都会加速加载。适用于确定每列尺寸的表格。
5 表格的特有属性
（1）边框的合并：border-collapse:collapse(合并边框)/separate（分离状态）---写在table上
border-collapse和border="0"的区别：
（2）边框边距：border-spacing:x y;(设置x，y轴的边框边距或者单独设置x，y轴的边框边距)且表格必须处于边框分离状态。
（3）表格标题：

十 定位
就是设置元素在页面中的位置
1 定位分类：
**（1）普通流定位
（2）浮动定位
（3）相对定位
（4）绝对定位
（5）固定定位**
①普通流定位（默认文档流定位）
特点：① 每个元素在页面都有自己的空间，不能堆叠（所有元素皆为框）；②每个元素都是从父元素的左上角开始渲染的；③块级元素按照从上往下的顺序逐个排列，每个元素独占一行，行内元素和行内块在同一行从左往右排列；

②浮动
float:left/right/none;
浮动的目的：为了让块级元素横向显示。
左浮动：让元素浮动后，停靠在父元素最左边，或者其他已经浮动元素的最右边。
**浮动的特点（4个）：** ①元素一旦浮动，脱离文档流（A 不占页面空间，B后续元素上前补位，C脱离文档流的元素不设置宽，宽度靠内容撑开；D 元素一旦脱离文档流，就会变成块级元素）；②父元素横向显示不下所有的浮动元素，最后显示不下的部分会自动换行；③浮动就是为了解决多个块级元素横向显示的问题

**浮动引发的特殊情况：** ①浮动元素的占位问题：当元素浮动起来以后，会在浮动方向占据位置，导致自动换行的元素最终会受到影响；②元素浮动后，如果元素没有定义宽度，那么浮动后的元素宽度靠内容撑开；③所有的元素浮动后都变成块级（可以设置宽高，垂直外边距生效）；④文本，行内元素，行内块，是不会被浮动元素压在下面的，环绕着浮动元素显示（避开）

**清除浮动：**（清除浮动元素给我带来的效果）；
浮动元素带来的影响：浮动元素脱离文档流了，后续元素上前补位
clear:left/right/both
清除影响:不上前补位


高度坍塌:
div不设置高度,内部所有儿子都浮动, 那么父元素九认为内部没有内容了,所以高度为0.
**解决方案:**① 给父元素设置高度,(弊端:可能不止到内部元素的);②父元素也浮动;**③在最后一个子元素的后面追加一个空的块级元素,给这个元素设置clear:both** ;④父元素设置overflow:hidden


十一 显示效果
1 显示方式
设置元素按照什么方式显示:行内,行内块,块级,table
display:inline/block/inline-block/table/none
表格的显示方式:如元素宽度随内容变宽
none:脱离文档流的隐藏(不占页面控件)
2 显示效果
visibility:visible/hidden
<table>
<tr>
<td>display:none</td>
<td>visibility:hidden</td>
</tr>
<tr>
<td>脱离文档流,不占页面空间</td>
<td>不脱离文档流,虽然看不见<br>但是仍然占据页面空间</td>
</tr>
</table>

3 透明度
opacity:0-1
  <table>
    <tr>
      <td>opacity </td>
      <td>rgba</td>
    </tr>
    <tr>
      <td>元素中只要跟<br>颜色相关的部分都<br>会跟着变透明<br>(包含后代元素)</td>
      <td>当变透明</td>
    </tr>
  </table>
 
4 垂直对齐方式
vertical-align:
使用场合:
①表格中,让内容文本,垂直居中对齐(tr/th/td)---top/middle/bottom
②input:让input前后的文本与当前input的垂直对齐方式---top/middle/bottom
③img:让前后的文本与当前img的垂直对齐方式---top/middle/bottom/baseline(默认值)

5 鼠标样式
cursor:default/pointer/crosshair/text/wait

6列表样式
1 设置列表项
list-style-type:disc/circle/square/none
2 列表项设置图片
list-style-image:url()
3
list-style-position:outside(默认:li外部)/inside(li里面)
4 简写方式
list-style:type image position
最简:list-style:none

十二 定位
position:static(默认)/relative/absolute/fixed
元素一旦设置position,并且值为relative/absolute/fixed
发生两件事:
(1)当前元素称之为已定位元素
(2)当前元素解锁4个偏移属性:top/right:bottom/left(其实也包含z-index)
left和right冲突:以left为准
top和bottom冲突,以top为准
1 相对定位
position:relative;
特点:
①不脱离文档流,不影响其他元素;
②如果一个元素设置了相对定位,但是所有偏移属性设置为0,或者不设置偏移属性,最终效果与没定位一样
③相对是相对这个元素原始的位置定位
用处:
①元素位置微调
②常作为绝对定位元素的已定位祖先级元素使用(自身不影响)

2 绝对定位
position:absolute
特点:① 元素脱离文档;②元素相对body左上角做初始化
(1)绝对定位的元素,没有已定位的祖先元素,相对于body左上角初始化
(2)绝对定位的元素,相对于关系最近的已定位的祖先级元素的左上角,做位置的初始化.

3 固定定位
position:fixed

4 堆叠顺序
(1)只有已定位元素有堆叠顺序,
(2)默认情况下,后写的元素,堆叠顺序高,永远比1小
(3)理论最高层-21亿多,正常使用1000以内即可
(4)z-index:无单位整数
(5)浮动的二楼和z-index的二楼的关系:
默认,定位(position,z-index)的堆叠比浮动(float)的堆叠高
(6)堆叠顺序对父子元素无效,子元素永远在父元素上面