【无标题】

1.元素显示模式

    块元素：独占一行，宽、高、内外边距可以设置   div    h1~h6      li

    行内元素：一行多个，宽高、内外边距设置无效   span   a

    行内块元素：可以一行多个，还可以设置宽高、内外边距  img

2.全局属性

<!-- title ：鼠标悬停时，提示词-->

    <a href="#" title="恭喜你，上天了">去云端</a>

<!-- tabindex :  正数            负数            0 -->

    <div title="你中奖了，小可爱~" tabindex="1">我是盒子</div>

    <div title="你中奖了，小可爱~" tabindex="2">我是盒子</div>

<!--spellcheck:拼写检查   true   false  -->

    <input type="text" spellcheck="false">

<!-- accesskey：设置快捷键的属性    谷歌浏览器里：配合alt按键，才能完成 -->

    <form action="#">

        <input type="text" name="user" id="">

        <button accesskey="l">提交</button>

    </form>

<!-- autocapitalize   启动大小写-->

<!-- contenteditable：设置元素中内容是否可以更改   true   false-->

    <div contenteditable="true">我是一个不允许编辑的盒子</div>

3.行内样式

<div style="width: 700px; height: 50px; background-color: pink;">我是一个盒子</div>

4.内部样式

在head最后添加 <style>编写样式</style>

5.外部样式

文件格式为css，调用需在html文件里head末尾添加<link rel="stylesheet" href="css文件地址">

6.基础选择器

* 选中所有标签，# id选择器，. 类名选择器，

7.基础选择器

ul>li 只选亲儿子，ul li 后代选择器

8.逗号选择器

用逗号隔开，选择全部

9.属性选择器

input[type="text"]

10.伪类选择器

 /* a:link 、a:visited 、a:hover 、a:active */——顺序

        /* 伪类选择器：元素在不同状态下的样式 */

        /* ：link    为访问的来凝结样式 */

        a:link {
            color: green;

        }

        /* 访问之后的样式 */

        a:visited {
            color: red;

        }

        /* 获取焦点时的样式 */

        a:focus {
            color: blue;

        }

        /* 鼠标悬停时的样式 */

        a:hover {
            color: pink;

        }

        /* active     用户点击之后按住鼠标 */

        a:active {
            background-color: pink;

        }

11.结构伪类选择器

/* 先找.father，然后对所有的子元素进行排序，找到对应序号的子元素，然后再去看子元素是否满足条件（.son） */

        .father .son:nth-child(2) {
            background-color: pink;

        }

/* 先找.father，再找.father里的.son，然后对.son进行排序 */

        .father .son:nth-of-type(2) {
            background-color: aqua;

        }

12.伪元素选择器

为选中的标签添加内容和格式

p::before {
            content: "##3#";

            color: pink;

        }

        p::after {
            content: "and you";

            color: red;

        }

        input::placeholder {
            color: pink;

        }

        div::selection {
            color: aqua;

        }

13.字体样式

p {
            /* 字体大小  字号 */

            font-size: 12px;

            /* 字体 */

            font-family: "微软雅黑";

            /* 字体粗细  400:正常   700：加粗 */

            font-weight: 700;

            /* 字体样式 /

            font-style: normal; 

        }

14.文本缩进

p {
            text-indent: 2em;——缩进当前字体2字符

        }

15.文本对齐方式

div {
            /* 对齐方式：text-align   居中的是内容*/

            text-align: center;

        }

16.文本修饰

a {
            /* 清除a链接默认样式 */

            text-decoration: none; 

        }

ul li:nth-child(1) {
            text-transform: uppercase;——内容小写转大写

        }

        ul li:nth-child(2) {
            text-transform: lowercase;——内容大写转小写

        }

17.行高

 div {
            /* 单行文本借助行高垂直居中 */

            line-height: 200px;

        }

18.背景样式

 div {
            background: pink url(./背景.jpg) no-repeat right bottom;——设置背景各种样式

        }

19.列表样式

li {
            /* 去除li默认样式的 */

            list-style: none;

            list-style: decimal;

        }

20.标签模式转化

pan {
            /* 将行内元素转化为行内块元素 */

            display: inline-block;

        }

21.文本轮廓线

input {
            outline-style: none;——去除默认样式

            outline-style: dashed;

            /* outline-style: dotted;

            outline-style: double; */

            outline-color: aqua;——为轮廓添加颜色

            /* outline-width: thick; */

            /* outline-width: 40px; */

            outline: none;

        }

22.边框

 div {
            width: 300px;

            height: 300px;

            background-color: pink;——背景颜色

            border-width: 3px;——边宽

            border-color: rgb(33, 29, 29);——边框颜色

            border-style: solid;——边框样式

            border-top-left-radius: 50%;

            border-top-right-radius: 50px;

            border-bottom-left-radius: 30px;

            border-bottom-right-radius: 20px;

23.合并相邻边框

table {
            border-collapse: collapse;——合并边框

            border-collapse: separate;  ——不合并边框

        }

24.颜色

div {
            /* opacity   0-1   0时，只是视觉上看不到，原来位置还在保留

               设置透明度的 */

            opacity: 0;

        }

25.元素隐藏方式

div  {
            /* 1、设置透明度隐藏   0-1   保留原来位置*/

            opacity: 0; 

            /*2、 display :none     不保留原来位置*/

             display: none; 

            /* 3、visibility：hidden  保留原来位置*/

            visibility: hidden;

        }

26.鼠标样式以及放拖拽

textarea {
            /* 防止拖拽 */

            resize: none;

            /* 鼠标样式 */

            cursor: initial;

        }

定位
27.绝对定位

.father {
            position: relative;——相对定位（让子元素的定位标准是自己）

            width: 600px;

            height: 600px;

            background-color: aqua;

        }

.son1 {
            /* 绝对定位会放弃原来的位置  子绝父相    逐级查找父级元素是否有相对定位，如果有，以父亲为定位参考，如果没有，继续向上查找*/

            position: absolute;

            left: 90px;

            bottom: 40px;

            background-color: blue;

            /* 显示的优先级 z-index*/

            z-index: 2;

        }

28.固定定位

.box1 {
            /* 固定定位   相对于可视窗口进行定位   放弃原来位置 */

            position: fixed;

            top: 100px;

            width: 100px;

            height: 100px;

            background-color: aqua;

        }

29. 粘性定位

让某一段文字滑动到一个位置时不再移动

p {
            position: sticky;——粘性定位

            top: 20px;

            background-color: pink;

        }

盒子模型
30.盒子模型

<body>

    <!-- 盒子大小：  content（内容）+padding（内边距）+border（边框）         margin（外边距）不会影响盒子大小 -->

</body>

31.边框

div {
            border: 20px solid black;

        }

32.内边距

div {
            width: 200px;

            height: 200px;

            border: 1px solid black;

            /* padding-top: 20px;

            padding-left: 20px;

            padding-right: 20px;

            padding-bottom: 20px; */

            /* 两个值时，第一个值代表上下的padding值，第二个值代表左右的padding值 */

            padding: 10px 50px;

            /* 三个值：上        左右        下 */

            padding: 10px 40px 50px;

            /* 四个值：上   右   下   左 */

            padding: 10px 20px 30px 40px;

            /* padding的值不能为负值 */

        }

33.外边距

.box1 {
            margin-bottom: 20px;

            margin-right: 20px;

            margin-left: 20px;

            margin-top: 40px;

            /* 上   右   下   左 */

            margin: 10px 20px 30px 40px;

           /* 实现元素的水平居中 */

            margin: 0 auto;

        }

34.外边距塌陷

.father {
            /* 1、给父元素加边框 */

            border: 1px solid black; 

            /* 2、给父元素添加内边距 */

            padding: 10px;

            /* 3、overflow: hidden;     偏方 */

            overflow: hidden;

        }

35.避免padding（内边距）将盒子撑大

div {
            padding: 30px;

            /* 解决padding影响盒子大小 */

            box-sizing: border-box;

        }

flex布局
36.flex布局

.box {
            display: flex;

            /* 改子元素排列方式  */

            /* flex-direction: row-reverse; */

            /* flex-direction: column; */

            /* flex-direction: column-reverse; */

            /* 改变主轴对齐方式 */

            /* space-between:两边贴边，中间评分剩余空间 */

            justify-content: space-between;

            /* space-around：平分在子项的两边 */

            /* justify-content: space-around; */

            /* justify-content: space-evenly; */

            /* justify-content: center; */

            /* 允许换行 */

            flex-wrap: wrap;

            /* 侧轴单行 */

            align-items: center;

            /* 侧轴对齐方式 */

            align-content: center;

            align-content: space-between;

            align-content: space-around;

            align-content: space-evenly;

        }

37.去除默认标签边距

ul {
            margin: 0;

            padding: 0;

     } 

38.设置自己的字体

@font-face {
            font-family: 自取字体名;

            src: url(字体地址);

         }

        div {
            font-family: 字体名;——调用字体

        }

39.颜色渐变

div {
            width: 300px;

            height: 300px;

            background-image: linear-gradient(渐变方式, red, pink, green, blue);

            background-image: repeating-linear-gradient(渐变方式, yellow, pink, red);

            background-image: radial-gradient(red, pink, blue, greenyellow);

        }

40.浮动

img {
            /* 文字环绕 */

            float: left;——浮动方式

            width: 100px;

        }

p {
            /* 清除浮动 */

            clear: both;

        }

动画
41.2d转换

.son {
            width: 300px;

            height: 300px;

            background-color: pink;

            /* 移动 */

            /* transform: translateX(200px) translateY(100px); */

            /* transform: translateY(100px); */

            /* 单独写会发生覆盖，复合：x ，y */

            /* transform: translate(50px, 50px); */

            /* 旋转 */

            /* transform: rotateZ(45deg); */

            /* 缩放 */

            /* transform: scaleX(1.5) scaleY(2); */

            /* transform: scale(0.5); */

            /* 改原点  对移动无影响，对旋转、缩放有影响*/

            transform-origin: top left;——改元素原点

        }

42.3d转换

需给父亲元素加上transform-style: preserve-3d;以及perspective

.father {
            width: 300px;

            height: 300px;

            border: 1px solid black;

            margin: 200px auto;

            transform-style: preserve-3d;

            perspective: 800px;

        }

        .son {
            width: 300px;

            height: 300px;

            background-color: pink;

            /* 移动 */

            transform: translateZ(-200px);

            /* 旋转 */

            transform-origin: left;

            transform: rotateX(45deg);

            transform: rotateY(45deg);

            /* 背部可见性 */

            backface-visibility: hidden;

        }

43.过渡

元素从一种状态到另一种状态的过程显示出来

div {
            width: 100px;

            height: 100px;

            background-color: pink;

             /*transition-property: width, height, background-color;——指定过渡属性的名称

            transition-duration: 5s;*/——过渡时间

            transition: all 3s ——全部显示3秒完成

        }

 div:hover {
            width: 1200px;

            height: 200px;

            background-color: green;

        }

44.动画

过渡的多次结合

/* 1、定义动画 */

        @keyframes 动画名字 {
            from {——第一种状态

                border-radius: 0;

                transform: translateX(0) rotateZ(0);

            }

            to {——第二种状态

                border-radius: 50%;

                transform: translateX(1100px) rotateZ(360deg);

            }

        }

        .son {
            width: 100px;

            height: 100px;

            background-color: pink;

            /* animation-name：调用的动画名字 */

            animation-name: 动画名字;

            /* animation-duration：动画执行所需时间 */

            animation-duration: 3s;

            /* animation-delay:动画延迟时间 */

            /* animation-delay: 1s; */

            /* animation-timing-function  动画方式 */

            /* animation-timing-function: steps(12); */

            /* 控制动画执行次数 */

            animation-iteration-count: infinite;

            /* 动画方向 */

            animation-direction: alternate;

            animation-fill-mode: forwards;

        }