Day10

01、定位的层级

不做特殊设置的时候

    定位元素的层级 比非定位元素的层级高
    定位元素后来者居上

    使用z-index 设置定位的层级，如果设置该属性，则默认为0
    如果 z-index的值相同，则还是后加载的元素高于先加载的
    如果值不相同，值大的元素层级高

02、透明度

transparent 透明色

    opacity:设置元素的透明度，可以使整个元素透明，包含元素里面所有的内容
    取值范围 0-1，1是完全不透明  0是完全透明

    行元素在垂直方向的对齐方式
    vertical-align 
        值：
        top：顶部对齐
        middle：中间对齐
        baseline：基线对齐
        bottom：底部对齐
        vertical-align 只能使用在行元素或者内联元素（inline-block）上
        ，不能使用在块元素上

使用方式：

        1.如果父元素的高度由其中一个子元素撑开，那么给其他元素设置
        vertical-aline：middle；就可以实现居中效果
        2.如果父元素的高度固定，不是用子元素撑开高度，则可以通过添加
        一个自定标签，
        该标签的高度为父元素的高度，然后设置 vertical-align：middle； 和
         display：inline-block； 就可以使父元素内容居中
         
       	 vertica-align 也可以用来解决img标签的缝隙

03、居中专题

1.块元素水平居中，设置margin：0 auto；
2.行元素，内联元素的水平居中，在父级设置 text-align：center
3.使用 vertical-align：middle 设置行元素和内联元素的垂直居中
4.使用定位和 margin 结合，设置元素居中
    a.给需要居中的元素设置 margin-top 和 margin-left 为自身的一半
    b.给需要居中的元素设置定位距离为 left：50%；top：50%；
5.父元素宽高固定。子元素绝对定位，可以实现绝对居中
    a.父元素宽高固定
    b.子元素绝对定位
    c.给子元素设置 left:0; right: 0; top: 0; bottom: 0;
    d.给子元素设置 margin：auto;

04、表格

table 表示表格

    表格的作用：
    1.在之前可以使用表格进行布局
    2.作为列表来显示数据

    一个表格是由 thead、tbody、和tfoot组成，这三个个标签可以不写，浏览器会自动添加
    想要创建一个表格，可以使用以下标签
    table：表示当前创建一个表格
    tr：表示表格中的一行
    th：表示表格的一个单元格，一般代表表头
    td：表示表格的一个单元格，一般代表的是表内容

    以上标签都是块标签

    给 table 添加 border 属性，设置边框
    cellspacing 设置单元格和单元格之间的距离
    cellpadding 设置单元格内容和边框之间的距离

合并单元格

    colspan 合并行（横向合并）
    rowspan 合并列（竖向合并）

    width 设置表格的宽度，可以是具体的值，也可以是百分比
    height 设置表格的高度，可以是具体的值，也可以是百分比

    以上 width height 属性，可以设置到 table td th 上 width影
    响的是一列，height影响的是一行

    使用 border-collapse 设置单元格的边框是否合并
    border-collapse：separate;不合并
    border-collapse：collapse;合并

05、练习

06、定位综合练习