css3的新特性和css3的动画

css3的新特性

css3新增了很多新特性，如伪类选择器、属性选择器、边框样式、flex弹性布局、动画、颜色渐变、@media响应式布局等

flex弹性布局

flex全称Flexbox(弹性盒子布局)，flex是CSS3新增的一种布局模型，可以灵活、响应式的设置页面布局。flex可以为盒状模型提供最大的灵活性。根据父元素设置好的宽度/高度等一系列属性，子元素会根据父元素的宽度/高度来进行填充改变，使元素在对齐、排列和分布变得更加方便。
容器属性：

display：设置为display: flex;或display: inline-flex;来定义一个弹性容器。
flex-direction：指定主轴的方向，可以是row（水平方向）、row-reverse、column（垂直方向）、column-reverse。
flex-wrap：控制项目在容器中是否换行，可以是nowrap（不换行）、wrap（换行）、wrap-reverse。
justify-content：定义项目在主轴上的对齐方式，如flex-start、center、flex-end、space-between、space-around。
align-items：定义项目在交叉轴上的对齐方式，如flex-start、center、flex-end、baseline、stretch。
align-content：定义多根轴线的对齐方式，只有一根轴线时不起作用。

项目属性：

flex：设置项目的伸缩比例，可以控制项目在容器内的占比。
flex-grow：定义项目的放大比例，默认为0，即不放大。
flex-shrink：定义项目的缩小比例，默认为1，即可以缩小。
flex-basis：定义项目在没有伸缩空间时的初始大小。
align-self：定义单个项目在交叉轴上的对齐方式，覆盖容器的align-items属性。

更多详情：https://www.cnblogs.com/qdhxhz/p/11953758.html
案例：

css
* {
    padding: 0;
    margin: 0;
    list-style: none;
}

html,
body {
    width: 100%;
    height: 100%;
}

.box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    // 头部
    .header {
        width: 100%;
        height: 50px;
        background: hotpink;
    }

    // 身体
    .main {
        flex: 1;
        overflow: auto;
        background: salmon;
    }

    // 脚部
    .footer {
        width: 100%;
        height: 50px;
        background: skyblue;
    }
}
html
  <!-- 引入css文件 -->
    <link rel="stylesheet" href="./index.css">
  <!-- flex弹性布局 -->
    <div class="box">
        <div class="header">头部</div>
        <div class="main">身体</div>
        <div class="footer">脚部</div>
    </div>

效果图：

选择器

属性选择器	描述
[attr]	选择具有指定属性的元素
[attr=value]	选择属性值完全等于指定值的元素
[attr~=value]	选择属性值中包包含指定词汇的元素
[attr^=value]	选择属性值中以指定值开头的元素
[attr$=value]	选择属性值以指定值结尾的元素
[attr=value]*	选择属性值中包含指定值的元素

附加：
[attr|=value] 选择属性值中以指定值开头的元素，或以指定值开头后紧跟着连字符-" 

案例：

css
<style>
        [name='msg'] {
            border: 2px solid red;
        }
    </style>
html
<input type="text" name="msg">
js
<script>
    const msg = document.querySelector("[name='msg']")
    console.log(msg);
</script>

效果图：

伪类选择器	描述
:nth-child(n)	选择父元素下的第 n 个子元素
:nth-last-child(n)	选择父元素下的倒数第 n 个子元素
:first-child	选择父元素下的第一个子元素
:last-child	选择父元素下的最后一个子元素
:only-child	选择父元素下唯一的子元素
:empty	选择没有子元素的元素
:checked	选择被选中的表单元素
:focus	选择当前获取焦点的元素
:hover	选择鼠标悬停的元素

案例：

css
     /* ul 第三个li变成红色 */
        ul li:nth-child(3) {
            color: red;
        }

        /* ul 倒数第二个li */
        ul :nth-last-child(2) {
            color: rgb(18, 10, 235);
        }

        /* 第一个ul下的li */
        ul :first-child {
            color: #fff;
        }

        /* ul下最后一个li */
        ul :last-child {
            color: chartreuse;
        }
    // 表单元素 获取焦点后的变化
        input :focus {
            border: 5px solid yellow;
        }
html
     <input type="text" name="msg">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>

效果图：

伪元素选择器	描述
::before	元素内容前面插入内容
::after	元素内容后面插入内容
::first-line	选择元素的第一行
::first-letter	选择元素的第一个字母

案例：

css
        /* 在元素前面插入内容 */
        .choose::before {
            content: '你好';
            margin: 0 10px;
        }

        /* 在元素后面插入内容 */
        .choose::after {
            content: "后面插入";
            margin: 0 10px;
            color: #fff;

        }
html
    <p class="choose">伪元素选择器</p>

效果图：