13流式布局，媒体查询，外部引入媒体查询，属性选择器，伪类选择器，伪元素选择器，结构伪类选择器

13

01流式布局就是百分比布局，

    高度的百分比，是基于父元素的百分比进行渲染的，因此使用百分比作为高度，他的父级必须定高

    特殊属性的百分比
    元素的 margin-top margin-bottom padding-top padding-bottom 他们的百分比设置都是基于父元素宽度的百分比
    
    line-height 如果设置百分比，不是基于父元素的 line-height值，而是基于他自己字号本身的百分比

例如：

.wp{
            width: 100%;
        }
        .wp div{
            width: 40%;
            margin: 0 5%;
            height: 100%;
            background: #04be02;
            display: inline-block;
        }

        .wp2{
            width: 100vw;
        }
        .wp2 div{
            width: 40vw;
            margin: 0 5vw;
            height: 40vh;
            background: #f00;
            display: inline-block;
        }

        .wp3{
            height: 200px;
            width: 100%;
            background: #f00;
            margin: 40px 0;
            display: flex;
        }
        .wp3 div{
            width: 100px;
            height: 100px;
            background: #ff0;
            margin: 5%;
        }

        .txt{
            width: 300px;
            height: 50px;
            line-height: 50px;
            border: 1px #f00 solid;
        }
        .txt p{
            border: 1px #f00 solid;
            line-height: 250%;
            
            font-size: 20px;
        }

02媒体查询 根据不同设备的宽度，设置不同的样式

关键字是 @media

    属性
        only 指的是只针对某一种设备
        not 不针对某一种设备
        screen 电脑屏幕，手机，ipad设备中的一种，print 打印机， speech 盲人听读机， all 指的所有设备
        and 链接 后面括号中条件的关键字，and 的左右两边必须有空格
        () 在括号里面设置条件，它里面的条件一般都是 max-width min-width的设置
        {} 满足条件的时候，设置的css样式必须书写在 {}中

注意事项：

媒体查询不提供优先级，因此，需要把媒体查询的样式最后加载，基础样式卸载媒体查询的前面，这样才不会覆盖媒体查询样式

例如：

/* 媒体查询
            屏幕宽度 大于600 小于800的时候，渲染的css样式
        */
        @media only screen and (max-width:800px) and (min-width:600px) {
            .wp{
                height: 150px;
            }
            .left {
                background-color:#ccc;
            }
        }

03外部引入

<!-- 外部引入媒体查询的写法 -->
    <link rel="stylesheet" href="./css/c800.css" media="only screen and (min-width:800px) and (max-width:1000px)">
    <link rel="stylesheet" href="./css/c1000.css" media="only screen and (min-width:1000px)">

04属性选择器

属性选择器 
    以下 E 代表标签名，attr 表示属性名 val 表示属性值

1.E[attr] 选择所有 具有 attr属性 的 E元素

2.E[attr=val] 选择所有 具有 attr属性并且他的值是val的 E元素

3.E[attr~=val] 选择所有 具有 attr属性并且他的值 包含 val 的E元素

4.E[attr|=val] 选择所有 具有 attr属性并且他的值是以 val 或者val- 开头的E元素

5.E[attr*=val] 选择所有 具有 attr属性并且他的值具有 val 字符的E元素

6.E[attr$=val] 选择所有 具有 attr属性并且他的值 是以 val 字符结束的E元素

7.E[attr^=val] 选择所有 具有 attr属性并且他的值 是以 val 字符开始的E元素

05伪类选择器

:focus 为所有获取焦点的input设置样式(⭐)
    :disabled 为所有被禁用的input设置样式
    :target 目标伪类选择器，当跳转到她所修饰的元素上的时候才会执行该选择器修饰的样式
    root 表示的是 html 

    E:empty 选中所有内容为空的E标签，并添加样式
    :empty 选中所有内容为空的标签，并添加样式

    E:only-child 选中父元素中只有一个E标签的 E标签并添加样式，独生子标签

06伪元素选择器：

通过伪元素选择器可以给元素添加一个类似子元素的内容，不是真正的标签
    使用伪元素需要添加 ::
    ::first-letter 表示修改第一个字符
    ::first-line 表示修改第一行字符
    ::before 在元素内容的最前面添加一个伪元素
    ::after 在元素内容的最后面添加一个伪元素

例如：

.txt::first-letter{
            font-size: 30px;
            color: #04be02;
        }
        .txt::first-line{
            font-size: 20px;
            color: #f00;
        }

        .cont::before{
            content: '张杰';
            border: 1px #f00 solid;
            font-size: 30px;
            color: #04be02;
            display: block;
        }
        .cont::after{
            content: '谢娜';
            border: 1px #f00 solid;
            font-size: 30px;
            color: #04be02;
            display: block;
        }

07结构伪类选择器

    父级 E:nth-child(num) 选中同一父级下，排名次序为 num的E元素
    num 从1开始

    使用n表达式，设置选中的标签，n从0开始计算
    偶数使用 2n
    E:nth-child(2n)
    奇数使用 2n+1
    E:nth-child(2n+1)

    也可以使用 odd 表示奇数
    even 表示偶数

    E:nth-last-child(num) 表示从后开始往前数，使用方式和 E:nth-child一模一样，也就是倒着数

例如：

        ul>li:nth-child(2){
            background: #f60;
        }
        ul>li:nth-child(6){
            background: #f6f;
        }
        ul li:nth-child(10){
            margin-bottom: 0;
        }
        /* 偶数 */
        ul li:nth-child(2n){
            background: #ff0;
        }
        /* 奇数 */
        ul li:nth-child(odd){
            background: #f00;
            height: 60px;
        }
        ul li:nth-last-child(2){
            font-size: 30px;
        }

如果父元素中的子元素不是同一个类型，则不能使用 nth-child(num) 来设置css，因为匹配到的元素是不对的
    使用 E:nth-of-type(num) 来匹配元素，他的意思是，找到和E标签同类型的第num个元素

    E:nth-last-of-type(num) 使用方法和 E:nth-of-type(num) 用法一样，只是倒着数

例如：

.cont p:nth-of-type(2){
            font-size: 30px;
            color: #f00;
        }
        .cont span:nth-of-type(2){
            font-size: 30px;
            color: #f0f;
        }
        .cont span:nth-last-of-type(1){
            font-size: 40px;
            color: #f0f;
        }

        .cont span:nth-child(2){
            border: 1px #f00 solid;
        }