1、vertical-align

通常用于设置图片或者行内块元素和文字垂直对齐

只针对于行内元素或者行内块元素有效

默认基线对齐

1. 值：
  - baseline 基线对齐（默认值）
  - top 让元素顶部与整行的顶部对齐
  - bottom 让元素底部与整行的底部对齐
  - middle 中线对齐

让图片在父级垂直居中

<style>
        /* div {第一步height和ling height值一样 */
            height: 500px;
            background-color: saddlebrown;
            line-height: 500px;
        }

        img {
            height: 200px;
            width: 200px;
            /* 第二步   vertical-align: middle;*/
            vertical-align: middle;
        }
    </style>

想让两个块级元素在一行显示，转换为行内块产生的问题

给他们的父级设置font-size:0;

4、overflow属性

overflow属性定义一个内容太大无法适应容器的时候应该怎么做
设置给被超出的元素
- visible：默认，内容不会被修剪，而是显示在元素的框外
- hidden:超出内容被修剪，修剪掉的内容不可见，并且没有滚动条
- scroll：超出内容被修剪，浏览器显示滚动条方便查看被修剪的内容
- auto：浏览器定夺，如果内容超出就生成滚动掉，否则不生成
overflow：auto和scroll的区别：
- auto:是自动生成滚动条，不超出不生成超出才生成
- scroll：无论是否超出都会生成滚动条
overflow-x：overflow-y：只控制x和y的超出情况

5、visibility属性：

控制元素显示或者隐藏

hidden:控制元素隐藏

-   保留原来的位置，其他元素的布局没有发生改变
-   相当于此元素变透明
-   visibility属性是继承的，里边的子元素也全部都继承属性，并且隐藏了
-   如果给子元素设置visible覆盖，那么子元素可以进行显示

visibility ：visible 让 visibility：hidden隐藏的元素显示

6、opacity透明度：

指定了一个元素的透明度

当opacity作用在某一个元素上的时候，把这个元素和里边的内容当成一个整体看待即使里边的元素没有继承opacity。它也和父级有一样的透明度
opacity的取值是 1-0

- 1代表完全不透明
- 0代表完全透明

基础选择器

 /* 1.id选择器
    #box{color: #000;}
    2.calss选择器 类名可以选多个
    如果优先级相同，代码自上而下执行，下面的会覆盖上面的
    .box{color: #000;}
    3.标签类选择器
    div{color: #000;}
    span{color: #000;}
    4.通配符选择器
    *{color: #000;}
    5.属性选择器  把页面中所有待遇该属性的标签都选中
    [class]{color: #000;}
    [class="box5"]{color: #000;} */

复杂选择器

后代选择器

后代选择器使用空格间隔开（A B：在A元素中寻找后代（不一定是儿子）是B的元素

  .outer .show{}
  html body div .show{}

子代选择器

子代选择器使用 > 间隔开（A>B：在A元素中寻找儿子辈元素是B的元素)

.box>.show{background-color: red;}

相邻兄弟选择器：

相邻兄弟选择器使用 + 间隔开（A+B：在A元素的下边紧贴着A的元素并且是B 才能被选中）

.outer>.show+span{ background-color: yellow; }

通用兄弟选择器：

相邻兄弟选择器使用 ~ 间隔开（A~B：在A元素的下边兄弟元素并且是B 就能被选中）

 .outer>.show~span  background-color: yellow;

群组选择器：

将多个选择器使用，隔开可以同时对多个选择器设置样式
如果多个元素有相同的样式，方法有两种

- 使用一个共同的类名
- 使用群组选择器

  .con1,.con2,.con3,.con4{width: 100px;height: 100px}

交集选择器

“交集”选择器：由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集

              (li和active之间没有空格）
        .list li.active{background-color: skyblue;}

第四天