day04

1、vertical-align
- 使用场景：
2、让图片在父级垂直居中
3、想让两个块级元素在一行显示，转换为行内块产生的问题
6、opacity透明度：
选择器

1、vertical-align

使用场景：

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

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

2、让图片在父级垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .two {
      width: 200px;
      height: 200px;
      background: lightcoral;
      /* 第一步 */
      line-height: 200px;
    }
    img {
      width: 100px;
      height: 100px;
      /* 第二步 */
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <div class="two">
    <img src="" alt="">
  </div>
</body>
</html>

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

两个块级元素之间会有缝隙（原因回车造成的）
不仅仅两个块元素在一行，两张图片在一行都会存在这个问题
解决的办法：

在结构中消除换行符
给他们的父级设置font-size:0;如果里面的子元素需要设置文字大小，再单独设置即可。
浮动也可以解决（后面学） ```javascript <!DOCTYPE html>

<a name="hMK7n"></a>
## 4、overflow属性

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

- hidden:控制元素隐藏
   - 保留原来的位置，其他元素的布局没有发生改变
   - 相当于此元素变透明
   - visibility属性是继承的，里边的子元素也全部都继承属性，并且隐藏了
   - 如果给子元素设置visible覆盖，那么子元素可以进行显示
- visible：让visibility：hidden隐藏的元素显示
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>visibility属性</title>
    <style>
        .box{
            width: 600px;
            height: 400px;
            background: yellow;
        }
        .con1{
            width: 300px;
            height: 100px;
            background-color: pink;
            visibility: hidden;
        }
        .con1 .inner{
            width: 100px;
            height: 50px;
            background-color: #5ab3f4;
            visibility: visible;
        }
        .con2{
            width: 300px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="con1">
            <div class="inner"></div>
        </div>
        <div class="con2"></div>
    </div>
</body>
</html>

6、opacity透明度：

指定了一个元素的透明度

当opacity作用在某一个元素上的时候，把这个元素和里边的内容当成一个整体看待即使里边的元素没有继承opacity。它也和父级有一样的透明度
opacity的取值是 1-0
- 1代表完全不透明
- 0代表完全透明
  选择器
  1、什么是选择器？
要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。
HTML页面中的元素就是通过CSS选择器进行控制的
2、基础选择器
id选择器
我们可以给元素设置id属性，然后通过 #+id属性值 的方式来选择这个元素
选择器命名：
- id就像我们的身份证号，是不允许重复的
- 并且一个元素只能有一个id属性
- id命名规范建议（类名命名方式也适用）
  - id或者class必须以字母开头，不能以数字或者下划线开头
  - 名字不出现汉字
  - 不允许带有广告的英文单词出现：如：ad adv adver advertising (防止浏览器当成垃圾广告处理掉过滤掉 )
  - 除第一位后边小写字母、数字、连字符（ _ -）
  - 见名知意
  - 不要出现空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        #three{
            background-color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li id="three"></li>
        <li></li>
    </ul>
</body>
</html>

类选择器：

可以给不同的元素，进行分组。所有类名相等的元素，是一组的，可以进行控制样式
给要被分组的元素设置class属性选择器中使用 .+ class属性值 来选择元素
类不一定多个元素，也可以是一个元素
一个class可以设置多个类名，但是只能有一个class属性，一个元素的多个class属性的值可以用空格隔开，就代表书写多个类名 ```javascript <!DOCTYPE html>

<a name="hBKua"></a>
### 标签名选择器：

- 通过标签名来选择元素
- 会选择页面中所有的这个标签的元素
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签名选择器</title>
    <style>
        li{
            background-color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li id="three"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</body>
</html>

通配符选择器（*）

通配符使用星号*表示，意思是“所有的”。
在CSS中，同样使用*代表所有的标签或元素，它叫做通配符选择器。
不过，由于*会匹配所有的元素，这样会影响网页渲染的时间，因此很多人开始停止使用*通配符选择器
```
/*这里就把所有元素的字体设置为红色*/
*{ color : red; }
```
属性选择器
[属性]{},把具有这个属性的所有标签选中
[属性=“属性值”]，把不仅具有这个属性，而且必须是属性值也是规定的这一类标签选中
```
<style>
     [index]{
         background:darkorange;
     }
    [index="a1"]{
        background:darkorchid;
    }
</style>
```
3、复杂选择器
后代选择器
后代选择器使用空格间隔开（A B：在A元素中寻找后代（不一定是儿子）是B的元素） ```javascript <!DOCTYPE html>
p1

p2
span1
- 111
- 222
1. 333
2. 444

<a name="dbSSl"></a>
### 子代选择器
子代选择器使用 **>** 间隔开 （**A>B**：在A元素中寻找儿子辈元素 是B的元素）
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子代选择器</title>
    <style>
        .box>.show{
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="outer">
        <p>p1</p>
        <p>p2</p>
        <span>span1</span>
        <ul class="box">
            <li>111</li>
            <li class="show">222</li>
            <li>
                <span class="show"></span>
            </li>
        </ul>
        <ol>
            <li>333</li>
            <li class="show">444</li>
        </ol>
    </div>

</body>
</html>

相邻兄弟选择器：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相邻兄弟选择器</title>
    <style>
        .outer>.show+span{
            background-color: yellow;
        }
        .outer>.show+p{
            /*选不中状态*/
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="outer">
        <p>p1</p>
        <p class="show">p2</p>
        <span>span1</span>
        <p>p3</p>
        <span>span2</span>
    </div>
</body>
</html>

通用兄弟选择器：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用兄弟选择器</title>
    <style>
        .outer>.show~span{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="outer">
        <span>span0</span>
        <p>p1</p>
        <p class="show">p2</p>
        <span>span1</span>
        <p>p3</p>
        <span>span2</span>
    </div>
</body>
</html>

群组选择器：

将多个选择器使用，隔开可以同时对多个选择器设置样式
如果多个元素有相同的样式，方法有两种
- 使用一个共同的类名
- 使用群组选择器 ```javascript <!DOCTYPE html>

<a name="gO9pl"></a>
### 交集选择器

- “交集”选择器：由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交集选择器</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        /*
            当我们想要选择： 某一个元素 并且这个元素拥有某个类名的时候

        */
        .list li{
            width: 30px;
            height: 30px;
            border: 1px solid #000;
            margin: 30px;
            border-radius: 50%;
            background-color: pink;
        }
        .list li.active{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="outer">
        <ul class="list">
            <li></li>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

4、选择器的优先级

相同优先级的选择器生效方式

当优先级相同的时候，在后边书写的样式优先级高
link元素其实也是把样式关联上，选择器优先级相同的情况写，后写的生效 ```javascript <!DOCTYPE html>

box

<a name="WRw0F"></a>
### 选择器优先级的权重计算：

- 行内样式： 1000
- id：100
- 类：10
- 标签名：1

**!important>内联样式>id>类|属性>标签>通配符>继承>浏览器默认**
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器优先级2</title>
    <style>
        #box p{
            /*1 --101*/
            background-color: red;
        }
        #box .con p{
            /*2 -- 111*/
            background-color: pink;
        }
        .box #con p{
            /*3--111*/
            background-color: green;
        }
        .box .show p{
            /*4--21*/
            background-color: yellow;
        }
        .box .con .show p{
            /*5 -- 31*/
            background-color: grey;
        }
        #box .show p {
            /*6 --111*/
            background-color: purple;
        }
        #box #con .show p{
            /*7 -- 211*/
            background-color: #5ab3f4;
        }
        #box #con #show p{
            /*8  -- 301*/
            background-color: #5df2ff;
        }
    </style>
</head>
<body>
<div id="box" class="box">
    <div id="con" class="con">
        <div class="show" id="show">
            <p>我是一个p标签</p>
        </div>
    </div>
</div>
</body>
</html>

选择器优先级覆盖案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优先级覆盖案例</title>
    <style>
        .outer li{
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: grey;
            float: left;
        }

        .outer .active{
            background-color: red;
        }
    </style>
</head>
<body>
    <ul class="outer">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li class="active"></li>
        <li></li>
    </ul>
</body>
</html>

5、css 的三大特性(背)

继承性
层叠性
优先级
①：继承性
什么是继承性？
官方解释，继承是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素。简单说就是给父元素设置一些属性，子元素/后代也可以使用，这个我们称之为继承性。

哪些属性具有继承性

并不是所有的属性都可以继承, 以color/font-/text-/line-开头的属性、元素可见性：visibility

有继承性的属性罗列

参考链接：https://blog.csdn.net/qq_41803637/article/details/80023720

②：层叠性：

层叠性就是CSS处理冲突的一种能力。通俗的说就是多种选择器选中了同一个元素，又对相同的属性设置了不同的属性值，这个时候就会发生层叠性。

如何处理：
1、如果权重相同的话，就看css代码的顺序，后面的会把前面的属性覆盖
2、如果权重不相同的话，谁权重大就听谁的。

③：优先级（权重）

权重顺序
！important>内联样式>id>类>标签>通配符>继承>浏览器默认

作业

或者

默写：
1.单词
2.基础选择器
3.选择器优先级
4.css有哪三大特性

1、vertical-align

使用场景：

2、让图片在父级垂直居中

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

6、opacity透明度：

选择器

1、什么是选择器？

2、基础选择器

id选择器