# css3

# 选择器

选择符	简介
E[att]	选择具有att属性的E元素
E[att="val"]	选择具有att属性且属性值等于val的E元素
E[att="val"]	匹配具有att属性且值以val开头的E元素
E[at$="val"]	匹配具有att属性且值以val结尾的E元素
E[att*="val"]	匹配具有att属性且值中含有val的E元素

# 属性选择器

# E[att]，利用属性选择器就可以不用借助于类或者d选择器

<body>
    <input value="利用属性选择器"/>
    <input>
</body>
<style>
    input[value] {
        color: skyblue;
    }
</style>

# E[att="val"]，属性选择器还可以选择属性值的某些元素

<body>
    <input type="text" />
    <input type="password" value="密码" />
</body>
<style>
    input[type=password] {
        color: skyblue;
    }
</style>

# E[at$="val"]，属性选择器可以选择属性值开头的某些元素

<body>
  <div class="icon">图标</div>
  <div class="icon2">图标2</div>
  <div class="icon3">图标3</div>
  <div class="icon4">图标4</div>
</body>
<style>
    /*选择首先是div然后具有cLass,属性并且属性值必须是icon开头的这些元素*/
   div[class^=icon] {
       color: skyblue;
   }
</style>

# 匹配具有att属性且值中含有val的E元素

<body>
  <div class="icon">图标</div>
  <div class="icon2">图标2</div>
  <div class="icon3 data">图标3</div>
  <div class="icon4 data">图标4</div>
</body>
<style>
    /*选择首先是div然后具有cLass,属性并且属性值必须是icon开头的这些元素*/
   div[class^=icon] {
       color: skyblue;
   }
    /*属性选择器可以选择属性值结尾的某些元素*/
    div[class$=data] {
        color: pink;
    }
</style>

# 结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素

nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E,然后再根据E找第n个孩子

选择符	简介
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中最后一个E元素
E:nth-child(n)	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

# first-child

注意空格

<body>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>赵六</li>
    </ul>
</body>
<style>
    /*选择ul里面的第一个孩子 li */
    /*ul li:first-child {*/
    ul :first-child {
        background-color: pink;
    }
</style>

# last-child

<body>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>赵六</li>
    </ul>
</body>
<style>
    /*选择L里面的第一个孩子小Li*/
    ul li:last-child {
        background-color: pink;
    }

</style>

# nth-child

nth-child(n)选择某个父元素的一个或多个特定的子元素

n可以是数字，关键字和公式
n如果是数字，就是选择第n个子元素，里面数字从1开始…
n可以是关键字：even偶数，odd奇数
可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略

<body>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>赵六</li>
    </ul>
</body>
<style>
    /*选择L里面的第一个孩子小Li*/
    ul li:nth-child(3) {
        background-color: pink;
    }

</style>

# nth-child(公式)

<body>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>赵六</li>
    </ul>
</body>
<style>
    /*选择L里面的第一个孩子小Li*/
    ul li:nth-child(even) {
        background-color: pink;
    }

</style>

# nth-child(n)

<body>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>赵六</li>
    </ul>
</body>
<style>
    /*3.nth-child(n) 从0开始 每次加1 往后面计算 这里面必须是n 不能是其他的字母选择了所有的孩i*/
    ul li:nth-child(n) {
        background-color: pink;
    }

</style>

# nth-of-type

<body>
    <div>
        <p>p</p>
        <div>div1</div>
        <div>div2</div>
    </div>

</body>
<style>
    /*
        nth-of-type会把指定元素的盒子排列序号
        执行的时候首先看：nth-child(1)之后回去看前面div
    */
    div div:nth-of-type(1) {
        background-color: skyblue;
    }
</style>

# 公式

公式	取值
2n	偶数
2n +1	奇数
5n	5 10 15…
n+5	从第5个开始（包含第五个）到最后
-n+5	前5个（包含第5个）…

# 伪元素选择器

before和after创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
before和after必须有content属性
before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
伪元素选择器和标签选择器一样，权重为1

语法：

element::before {
    
}

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

<body>
    <div>
        是
    </div>

</body>
<style>
    div::before {
        /*
            content 必须
        */
        content: '我';
    }

    div::after {
        content: "张三";
    }
</style>

# 使用场景

图标

<body>
    <div>

    </div>

</body>
<style>
    div {
        height: 30px;
        width: 200px;
        border: 1px solid skyblue;
        border-radius: 20px;
        position: relative;
    }

    div::after {
        content: '▲';
        position: absolute;
        right: 20px;
        font-size: 20px;
    }
</style>

# 盒子模型

CSS3中可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。

两种情况

box-sizing:content-.box盒子大小为width+padding+border(以前默认的)
box-sizing:border-box盒子大小为width

如果盒子模型我们改为了box-sizing:border-box，那 padding 和 border 就不会撑大盒子了（前提padding 和border不会超过width宽度)

# 图片变模糊

CSS3 滤镜 filter: filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

<body>
    <div>
        <img src="static/img/banner2_20190819_210028.png">
    </div>

</body>
<style>
    img {
        filter: blur(15px);
    }

    img:hover {
        filter: blur(0);
    }
</style>

# 计算盒子宽度width:calc函数

比父元素小30像素
可以使用 + - * /

<body>
    <div class="parent">
        <div class="son"></div>
    </div>

</body>
<style>
    .parent {
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }

    .son {
        width: calc(100% - 30px);
        height: 200px;
        background-color: pink;
    }
</style>

# 过度

过渡(transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。过渡动画：是从一个状态渐渐的过渡到另外一个状态

可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持(i9以下版本)但是不会影响页面布局。

现在经常和：hover一起搭使用。

语法：

transition:要过渡的属性花费时间运动曲线何时开始；

属性：想要变化的css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个a‖就可以。
花费时间：单位是秒（必须写单位）比如0.5s
运动曲线：默认是 ease(可以省略)
何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是0s(可以省略)

多个之间用逗号，所有的属性用all

<body>
    <div class="parent">
    </div>

</body>
<style>
    .parent {
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }

    .parent:hover {
        width: 400px;
        height: 400px;
        transition: width 0.5s ease ;
    }

</style>

多个

<body>
    <div class="parent">
    </div>

</body>
<style>
    .parent {
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }

    .parent:hover {
        width: 400px;
        height: 400px;
        transition: all 0.5s ease, height 0.5s ease;
    }

</style>

# 2D转换之translate

# 二维坐标系

2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类以定位

定义2D转换中的移动，沿着X和Y轴移动元素
translate:最大的优点：不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的translate:(50%,50%):
对行内标签没有效果
如果使用百分号，移动的距离是盒子自身高度或者高度来对比的
对行内标签没有效果

<body>
  <div></div>
</body>

<style>
  div {
    width: 100px;
    height: 100px;
    background-color: red;
    /*
      x就是x轴上移动位置y就是y轴上移动位置中间用逗号分隔
      transform:translate(x,y);
    */
    /*transform: translate(100px, 0);*/
    /*transform: translate(100px, 100px);*/
    transform: translateX(100px);

  }
</style>

# 垂直剧中

<body>
<div>
    <p></p>
</div>

</body>

<style>
    div {
        width: 500px;
        height: 500px;
        background-color: red;
        position: relative;
    }

    p {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        background-color: blue;
        transform: translate(-50%, -50%);

    }

</style>

# 2D转换之旋转rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

transform:rotate(度数)

rotate里面跟度数，单位是deg比如rotate(45deg)
角度为正时，顺时针，负时，为逆时针
默认旋转的中心点是元素的中心点

<body>

    <img src="../static/img/account.png">
</body>

<style>
    img {
        transform: rotate(50deg);
    }
</style>

# 2D转换中心点transform-origin

transform-origin:x y;

注意后面的参数X和y用空格隔开
× y默认转换的中心点是元素的中心点(50%50%)
还可以给xy设置像素或者方位名词(top bottom left right center)

<body>

<div></div>
</body>

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        margin: 200px auto;
        transition: all 1s;
        /**
            transform-origin: left bottom;
            默认是center center

         */
        transform-origin: 50px 20px;

    }

    div:hover {
        transform: rotate(360deg);
    }
</style>

# 2D转换之缩放scale

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

transform:scale(x,y);

注意其中的x和y用逗号分隔
transform:scale(1,1):宽和高都放大一倍，相对于没有放大
transform:scale(2,2):宽和高都放大了2倍
transform:scale(2):只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
transform:scale(0.5,0.5):缩小
scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

<body>
<div></div>
</body>

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }

    div:hover {
        transform: scale(1.1,1);
    }
</style>

# 2D转换综合写法

同时使用多个转换，其格式为：transform:translate() rotate() scale() 等
其顺序会影转换的效果。（先旋转会改变坐标轴方向）
当我们同时有位移和其他属性的时候，记得要将位移放到最前

# 动画

动画(animation)是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

# 动画的基本使用

制作动画分为两步：

先定义动画
再使用（调用)动画

<body>
<div></div>
</body>

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        /*调用动画*/
        animation-name: move;
        /*持续时间*/
        animation-duration: 1s;
    }

    /*定义状态*/
    @keyframes move {
        /*开始状态*/
        0% {
            transform: translateX(0px);
        }

        /*结束状态*/
        100% {
            transform: translateX(1000px);
        }
    }

</style>

# 动画序列

0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
在@keyframes中规定某项CSS样式，就能创建由当前样式逐新改为新样式的动画效果。
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词"from"和"to”,等同于0%和100%。

# from & to

<body>
<div></div>
</body>

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        /*调用动画*/
        animation-name: move;
        /*持续时间*/
        animation-duration: 1s;
    }

    /*定义状态*/
    @keyframes move {
        /*开始状态*/
        from {
            transform: translateX(0px);
        }

        /*结束状态*/
        to {
            transform: translateX(1000px);
        }
    }

</style>

# 多种状态

<body>
<div></div>
</body>

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        /*调用动画*/
        animation-name: move;
        /*持续时间*/
        animation-duration: 1s;
    }

    /*定义状态*/
    @keyframes move {
        0% {
            transform: translate(0, 0);
        }

        25% {
            transform:  translate(1000px ,0);
        }

        50% {
            transform:  translate(1000px ,500px);
        }

        75% {
            transform:  translate(0px ,500px);
        }

        100% {
            transform:  translate(0 ,0);
        }


    }

</style>

# 常用属性

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了animation-play~state)属性。
animation-name	规定@keyframes2动画的名称。（必须的）
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0。（必须的）
animation-timing-function	规定动画的速度曲线，默认是“ease”
animation-delay	规定动画何时开始，默认是0。
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite
animation-direction	规定动画是否在下一周期逆向播放，默认是"normal“,alternate逆播放
animation-play-state	规定动画是否正在运行或暂停。默认是"running",还有"pause"。
animation-fill-mode	规定动画结束后状态，保持orwards回到起始backwards

# 动画简写属性

animation:动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态；

animation:myfirst 5s linear 2s infinite alternate;

# 3D转换

# 三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

x轴：水平向右注意：X右边是正值，左边是负值
y轴：垂直向下注意：y下面是正值，上面是负值
Z轴：垂直屏幕注意：往外面是正值，往里面是负值

# 3D移动translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。

translform:translateX(1OOpx):仅仅是在x轴上移动
translform:translateY(1OOpx):仅仅是在Y轴上移动
translform:translateZ(100px):仅仅是在Z轴上移动（注意：translateZ一般用px单位）
transform:translate3d(xy,z）:其中x、y、z分别指要移动的轴的方向的距离

# 3D移动translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向，就是轴方向。

translform:translateX(10Opx):仅仅是在x轴上移动
translform:translateY(100px):仅仅是在Y轴上移动
translform:translateZ(10Opx):仅仅是在Z轴上移动（注意：translateZ一般用px单位）
transform:translate3d(xy,z):其中X、y、Z分别指要移动的轴的方向的距离

<body>

<div></div>

</body>
<style>
  div {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    transform: translateX(100px) translateY(100px) translateZ(100px);
      /*
        trans1ateZ行着Z轴移
        translateZ后面的单位我们一般跟px
        translateZ(1gpx)向外移动1o8px(向我们的眼睛来移动的)
        3D移动有简写的方法
        transform: translate3d(100px,100px,100px);
        xyz是不能省略的，如果没有就写0
        transform: translate3d(0,100px,100px);
      */
  }
</style>

# 3D 转换透视 perspective

在2D平面产生近大远小视觉立体，但是只是效果二维的,如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）。模拟人类的视觉位置，可认为安排一只眼睛去看

透视我们也称为视距：视距就是人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面成像越大，越远成像越小透视的单位是像素

<body>

<div></div>

</body>
<style>
  body {
    /*透视写在被观察元素的父盒子上面*/
    perspective: 100px;
  }
  div {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    transform: translateX(100px) translateY(100px) translateZ(0);
  }
</style>

# 旋转rotate3d

3D旋转指可以让元素在三维平面内沿着x轴，y轴，Z轴或者自定义轴进行旋转。

transform:rotateX(45deg):沿着x轴正方向旋转45度

transform:rotateY(45de):沿着y轴正方向旋转45deg
transform:rotateZ(45deg):沿着Z轴正方向旋转45deg
transform:rotate3d(xy,z,deg):沿着自定义轴旋转deg为角度（了解即可）

<body>

  <img src="../1695619409948.jpg" >

</body>
<style>

  body {
    perspective: 500px;
  }
  img {
    width: 500px;
    height: 500px;
    margin: auto 200px;
    transition: all 1s;
    animation-name: move;
    animation-iteration-count: infinite;
    animation-duration: 2s;
  }

  @keyframes move {

    50% {
      transform: rotateX(-380deg);
    }
      
      75% {
          /*
            transform: rotate3d(x,y,z,旋转度数);
            transform: rotate3d(0,1,0,45deg); 沿着y轴旋转45
          */
          transform: rotate3d(0,1,0,45deg);
      }

    100% {
      transform: rotateX(380deg);
    }
  }
</style>

# 3D星现 transfrom-style

控制子元素是否开启三维立体环境。。

transform-style:flat子元素不开启3d立体空间默认的
transform-style:preserve-3d;子元素开启立体空间代码写给父级，但是影响的是子盒子这个属性很重要，后面必用

# css3 新盒子模型 box-sizing

传统模式宽度计算：盒子的宽度 = CSS中设置的 width + border + padding
CSS3盒子模型：盒子的宽度 = CSS中设置的宽度 width 里面包含了 border 和 padding，也就是说，我们的CSS3中的盒子模型，padding和border不会撑大盒子了

<body>
    <div>
        <div>css3 之前的盒子</div>
        <div>css3 新的盒子模型</div>
    </div>
</body>

<style>
    div :nth-child(1) {
        /*
            传统盒子 240 = width　＋　padding + border
        */
        width: 200px;
        height: 200px;
        background-color: pink;
        padding: 10px;
        border: 10px solid blue;
    }

    div :nth-child(2) {
        /*
            新的盒子模型 总像素是200
        */
        width: 200px;
        height: 200px;
        background-color: skyblue;
        box-sizing: border-box;
        padding: 10px;
        border: 10px solid blue;
    }
</style>

# 传统 or CSS3盒子模型

移动端可以全部CSS3盒子模型
PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择CSS3盒子模型

# 布局

# 流式布局

流式布局，就是百分比布局，也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
流式布局方式是移动wb开发使用的比较常见的布局方式。

<body>
    <section>
        <div></div>
        <div></div>
    </section>
</body>
<style>
    div {
        width: 50%;
        height: 300px;
        float: left;
    }

    section {
        width: 100%;
        max-width: 2000px;
        min-width: 100px;
        max-height: 2000px;
        min-height: 100px;
        margin: 0 auto;
    }

    section :nth-child(1) {
        background-color: skyblue;
    }

    section :nth-child(2) {
        background-color: lightpink;
    }
</style>

# flex

flex是flexible Box的缩写，意为"弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

如果是PC端页面布局，我们还是传统布局。
如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flx弹性布局
当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex 布局

<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>

</body>
<style>
  div {
    width: 80%;
    height: 300px;
    background-color: pink;
    display: flex;
    text-align: center;
    justify-content: space-between;
  }

  div span {
    flex: 1;
    height: 150px;
    line-height: 150px;
    background-color: skyblue;
    border: 1px solid #e77420;
    margin-right: 5px;
  }
</style>

# 父项常用属性

属性	说明
flex-direction	设置主轴的方向
justify-content	设置主轴上的子元素排列方式
flex-wrap	设置子元素是否换行
align-content	设置侧轴上的子元素的排列方式（多行）
align-items	设置侧轴上的子元素排列方式（单行）
flex-flow	复合属性，相当于同时设置了flex-direction和flex-wrap

# flex-direction设置主轴的方向

主轴与侧轴在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴

默认主轴方向就是×轴方向，水平向右
默认侧轴方向就是y轴方向，水平向下

主轴与侧轴

属性值 flex-direction属性决定主轴的方向（即项目的排列方向）注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

属性	说明
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

# justify-content 设置主轴上的子元素排列方式

justify-content属性定义了项目在主轴上的对济方式
注意：使用这个属性之前一定要确定好主轴是哪个

属性值	说明
flex-start	默认值从头部研始如果主轴是x轴，则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐（如果主轴是x轴侧水平居中）
space-around	平分剩余空间
space-between	先两边贴边再平分剩余空间（重要）

# flex-wrap 设置子元素是否换行

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的

属性值	说明
nowrap	默认值，不换行
wrap	换行

# align-items 设置侧轴子元素排列(单行)

该属性是控制子项在侧轴（默认是y轴）上的排列方式在子项为单项的时候使用 stretch:设置了这个属性，子元素不要设置高度，不然没效果

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸（默认值）

<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>

</body>
<style>
  div {
    width: 80%;
    height: 300px;
    background-color: pink;
    display: flex;
    text-align: center;
    justify-content: space-between;
    align-items: stretch;
  }

  div span {
    flex: 1;
    /*height: 150px;*/
    line-height: 150px;
    background-color: skyblue;
    border: 1px solid #e77420;
    margin-right: 5px;
  }
</style>

# align-content 设置侧轴子元素排列(多行)

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。

属性值	说明
flex-start	默认值在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	设置子项元素高度平分父元素高度

<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
  </div>

</body>
<style>
  div {
    width: 800px;
    height: 400px;
    background-color: pink;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    align-content: flex-start;
  }

  div span {
    width: 150px;
    line-height: 150px;
    background-color: skyblue;
    border: 1px solid #e77420;
    margin-right: 5px;
  }
</style>

# 子项常用属性

flex 子项目占的份数
align-self 控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序（前后顺序）

# flex

flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。

# align-self 控制子项自己在侧轴上的排列方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

<body>
<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

</body>
<style>
    div {
        width: 800px;
        height: 400px;
        background-color: #f6d0d9;
        display: flex;

    }

    div span {
        width: 150px;
        height: 150px;
        background-color: #e9fac6;
        text-align: center;
        border: 1px solid #c2e9ee;
    }

    div span:nth-child(2) {
        /*
            order 排序 数字越小越靠前
        */
        order: -1;
    }

    div span:nth-child(3) {
        align-self: end;
    }
</style>

# grid

# 属性

# 列属性：grid-template-columns

# 行属性：grid-template-rows

后面什么几个属性就是几列/行，也可以是百分比如20% 30% 也可以百分比和具体数值混合，如20px 30%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style >
  .mid {
    display: grid;
    grid-template-columns: 100px  100px  100px;
    grid-template-rows: 100px  100px  100px;
  }
</style>
<body>

<span class="span1">span1</span>
<div class="mid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
</div>
<span class="span2">span2</span>

</body>
</html>

# 重复次数 repet

作用是假如需要多个行/列可以使用这个属性，比较方便

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style >
  .mid {
    display: grid;
    grid-template-columns: repeat(2, 50%);/* 2列 每列宽度50%*/
    grid-template-rows: repeat(4, 100px);  /* 4行 每行高度100 */
  }
</style>
<body>

<span class="span1">span1</span>
<div class="mid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>
<span class="span2">span2</span>

</body>
</html>

# auto-fill

自动划分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style >
  .mid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 33%);
    grid-template-rows: repeat(4, 100px);
  }
</style>
<body>

<span class="span1">span1</span>
<div class="mid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>
<span class="span2">span2</span>

</body>
</html>

# auto

自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style >
  .top {
    height: 100px;
    background-color: skyblue;
  }

  .container {
    display: grid;
    grid-template-rows: calc(100vh - 120px);
    grid-template-columns: 100px auto;
  }

  .left {
    background-color: pink;
  }

  .right {
    background-color: aqua;
  }

</style>
<body>

<div>
  <div class="top"></div>
  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>

</body>
</html>

# fr

片段划分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style >
.container {
  display: grid;
  /*
    2行 3列
    第一行 1/5
    第二行 2/5
  */
  grid-template-rows: 1fr 2fr;
  grid-template-columns: auto auto auto;
}
</style>
<body>

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>


</div>

</body>
</html>

# minmax

满足条件最大，不满足最小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style >
.container {
  display: grid;
  grid-template-rows: 100px 100px minmax(100px, 200px);
  grid-template-columns: auto auto auto;
}
</style>
<body>

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>


</div>

</body>
</html>

# 行列间距

行间距 grid-row-gap
列间距 grid-column-gap
组合，行&列间距 grid-gap: 行间距，列间距;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style >
.container {
  display: grid;
  grid-template-rows: 100px 100px minmax(100px, 200px);
  grid-template-columns: auto auto auto;
  grid-gap: 10px 20px;
  grid-column-gap: 10px;
  grid-row-gap: 20px;
}
</style>
<body>

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>


</div>

</body>
</html>

# 方向显示

grid-auto-flow
- column：纵向
- row：横向

# 单元格对局方式

just-items：水平对其方式
align-items：垂直对其方式
place-items: 垂直方向水平方向；

# 容器对其方式

justify-content：水平
align-content：垂直

# 合并单元格

grid-column-start 纵向开始位置
grid-column-end 纵向结束位置
grid-row-start 横向开始位置
grid-row-end 横向结束位置

# 渐变

# 背景线性渐变

线性渐变

语法：

background: linearGradient(起始方向,颜色1,颜色2,...)
background: -webkit-linear-gradient(left,red,blue)

背景渐变必须添加浏览器私有前缀
起始方向可以是：方位名词或者度数，如果省略默认就是top

<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
<style>
    .div2,.div1 {
        width: 100px;
        height: 100px;
        margin-bottom: 100px;
    }
    .div1 {
        background: -webkit-linear-gradient(left, red, blue);
    }
    .div2 {
        background: -webkit-linear-gradient(bottom left, red, blue);
    }
</style>

← H5 移动页面 →

# css3

# 选择器

# 属性选择器

# E[att]，利用属性选择器就可以不用借助于类或者d选择器

# E[att="val"]，属性选择器还可以选择属性值的某些元素

# E[at$="val"]，属性选择器可以选择属性值开头的某些元素

# 匹配具有att属性且值中含有val的E元素

# 结构伪类选择器

# first-child

# last-child

# nth-child

# nth-child(公式)

# nth-child(n)

# nth-of-type

# 公式

# 伪元素选择器

# 使用场景

# 盒子模型

# 图片变模糊

# 计算盒子宽度width:calc函数

# 过度

# 2D转换之translate

# 二维坐标系

# 垂直剧中

# 2D转换之旋转rotate

# 2D转换中心点transform-origin

# 2D转换之缩放scale

# 2D转换综合写法

# 动画

# 动画的基本使用

# 动画序列

# from & to

# 多种状态

# 常用属性

# 动画简写属性

# 3D转换

# 三维坐标系

# 3D移动translate3d

# 3D移动translate3d

# 3D 转换 透视 perspective

# 旋转rotate3d

# 3D星现 transfrom-style

# css3 新盒子模型 box-sizing

# 传统 or CSS3盒子模型

# 布局

# 流式布局

# flex

# 父项常用属性

# flex-direction设置主轴的方向

# justify-content 设置主轴上的子元素排列方式

# flex-wrap 设置子元素是否换行

# align-items 设置侧轴子元素排列(单行)

# align-content 设置侧轴子元素排列(多行)

# 子项常用属性

# flex

# align-self 控制子项自己在侧轴上的排列方式

# grid

# 属性

# 列属性：grid-template-columns

# 行属性：grid-template-rows

# 重复次数 repet

# auto-fill

# auto

# fr

# minmax

# 行列间距

# 方向显示

# 单元格对局方式

# 容器对其方式

# 合并单元格

# 渐变

# 背景线性渐变

# 3D 转换透视 perspective