CSS总结

最新推荐文章于 2024-05-07 17:04:15 发布

HumbleFool

最新推荐文章于 2024-05-07 17:04:15 发布

阅读量168

点赞数

分类专栏： CSS 基础文章标签： css

本文链接：https://blog.csdn.net/qq_45925322/article/details/115145657

版权

基础同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

CSS

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。HTML是网页框架，CSS的作用就是渲染网页。

CSS语法

CSS选择器

   <title>css</title>
    <!--选择器,可同时给多个标签修改 -->
<!--    内部样式表-->
    <style>
        /*css元素选择器*/
        p {/*声明块*/
            color: gold;/*声明*/
            font-size: 30px;
          }
    /*id选择器 */
        #red {
            color: red;
        }
    /*    类选择器*/
        .blue{
            color: blue;
        }
        .abc{
            font-size: 30px;
        }
    /*    通配选择器*/

        *{
            color: black;
        }
    </style>
<!--    也可以写一个外部样式表，在html中的样式表编写在外部css文件中
    想使用这个样式的网页都可以通过link引入-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
<!--维护不方便，开发时一般不用这种-->
    <p style="color: red;font-size: 60px;">川哥666</p>

    <p>今天也要好好学习哦</p>
    <p id="red">今天也要好好学习哦</p>
    <p style="color: green;font-size: 30%">今天也要好好学习哦</p>
<!--class标签，与id类似，class可以重复,一个元素可以多个class-->
    <h1 class="blue">hahhahah</h1>
    <h1 class="blue abc">hahhahah</h1>
    <h1 class="red">hahhahah</h1>

CSS复合选择器

  <title>复合选择器</title>
    <style>
        .red{
            color: red;
        }
        /*交集选择器，元素选择器开头。。。。可以n个*/
        div.red{
            font-size: 30px;
        }
        .a.b.c{
            color: blue;
        }
        /*并集选择器*/
        h1,span{
            color: green;
        }
    </style>
</head>
<body>
    <div class="red">我是div</div>
    <p class="red"> 我是p</p>
   <div class="red2 a b c">我是div2</div>
    <h1>标题</h1>
    <span>哈哈</span>

CSS关系选择器

<title>关系选择器</title>
    <style>
        /*子元素选择器   父元素>子元素*/
        div>span{
            color: red;
        }
        /*只改变第一个div里面的元素*/
        div.first>span{
            font-size: 30px;
        }
        /*后代选择器   祖先 后代*/
        div span{
            color: green;
        }
        /*兄弟元素选择器   兄+弟 最近的    兄~弟  选择所有兄弟元素*/
        p+span{
            color: aquamarine;
        }
    </style>
</head>
<body>
<!--    子元素（直接被父类包含），父元素（直接包含子元素）祖先元素（直接或间接包含子元素） 兄弟元素（拥有相同父类）-->
    <div class="first">
        我是div
        <p>
            我是div中的p
            <span>我是p中span</span>
        </p>
        <span>我是div中的span</span>
    </div>
    <div>
        第二个div
        <span>
            第二个div中的span
        </span>
    </div>

CSS属性选择器

  <title>属性选择器</title>
    <style>
        /*选择含有属性的元素   【属性名】
           选择特定属性  【属性名=属性值】
           选择以什么开头的元素 【属性名^=属性值】
            选择以什么结束的元素 【属性名$=属性值】
            属性值含有什么的元素   【属性名*=属性值】
         */
        p[title]{
            color: green;
        }
        [title=d2]{
            font-size: 30px;
        }
        [title^=数字]{
            font-size: 40px;
        }
    </style>
</head>
<body>
    <p title="数字1">111111</p>
    <P title="d2">222222222</P>
    <P title="数字3">33333333</P>
    <P title="数字4">44444444</P>
    <p>555555555555</p>

伪类

<title>伪类</title>
    <style>
        /*ul>li{
            color: red;
        }*/
        /*用伪类来描述元素特殊状态，比如第一个元素，鼠标移动
         伪类用：开头
         :first-child 第一个子元素
         :last-child  最后一个子元素
         : nth-child（int) 第n个子元素
             特殊  n表示 0-n全选
                   2n/even表示 选择偶数
                    2n+1/odd 表示奇数
          这些元素是所有元素的中的第几个
          :first-of-type
          :last-of-type
          nth-of-type
          这两个用法类似
          区别：第一个是全部元素排序的第几个（如果第几个不是指定类型不会改变元素属性），第二个是同类型排序中的第几个
          :not 否定伪类 去除某个元素*/
        /*ul>li:first-child{
            color: red;
        }
        ul>li:nth-child(3){
            color: green;
        }
        ul>li:nth-of-type(5){
            color: aquamarine;
        }
        */
        ul>li:not(:nth-child(3)){
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>1 </li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <span>00000</span>
        <li>1 </li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

<title>伪类</title>
    <style>
        /*:link 给为访问过(正常）的连接设置颜色
        通过:visited 给访问过的连接设置颜色   前两个只能用于超链接
           :hover  鼠标移入状态
           :active  鼠标点击状态  所有都可以
         */
        a:link{
            color: red;
        }
        a:visited{
            color: green;
        }
        a:hover{
           color: gold;
            font-size: 30px;
        }
        a:active{
            color: blueviolet;
        }
    </style>
</head>
<body>
<!--区分连接有没有被访问过-->
    <a href="https://www.baidu.com">baidu</a>
    <br><br>
    <a href="https://www.baidu111.com">baidu1</a>

伪元素

<title>伪元素</title>
    <style>
        /*伪元素选特殊位置的元素，如开始字母叫独特
        ::first-letter 第一个字母特殊化
        ::first-line 第一行特殊化
        ::selection 选择内容
        ::before  元素开始
        ::after 元素最后
        before和after 必须要结合content属性来使用*/
        p::first-letter{
            font-size: 50px;
        }
        p::first-line{
            background-color: aqua;
        }
        p::selection{
           background-color: chartreuse;
        }
        div::before{
            content: "haha";
            color: red;
        }
        div::after{
            content: "last";
            color: chartreuse;
        }
    </style>

选择器权重

<title>选择器权重</title>
    <style>
        /*样式冲突
        由选择器优先级（权重）决定显示的属性
        1.内联选择器    1000
        2.id选择器      100
        3.类和伪类选择器  10
        4.元素选择器      1
        5.通配选择器      0
        6.继承样式      无优先级
        比较选择器的时候需要相加运算，相加越高的就显示
        选择器累加不会超过最大数量级  如  无数个id选择器也不会超过内联选择器
       注意：如果优先级相同，择最后面的选择器
       可以在某个样式后面加一个  !important 此时优先级最高超过内联选择器
         */
        div{
            color: chartreuse;
            background-color: red   !important;
            font-size: 20px;
        }
        .red{
            color: red;
        }
        #box{
            color: blue;
        }
        *{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="box" class="red" style="background-color: blueviolet">
        今天啥也没干。
        <span>板鸭板鸭板鸭</span>
    </div>

像素和百分比

<title>像素和百分比颜色</title>
    <style>
        html{
            font-size: 40px;
        }
        /*1、长度单位：
            像素   px   不同屏幕像素不同，像素越小，屏幕越清晰
             百分比 %    长宽的百分比
             em   相对于元素字体大小来计算的，会根据字体大小改变
              1 em =1 font-size
             rem   也是相对与字体大小，root em  相当于根元素的大小计算
             取决于html

          2、颜色单位
           在css里面可以用颜色名字来表示颜色
             RGB值 也可以用来表示颜色 RGB是三原色
                颜色范围 0-255（0%-100%)
            RGBA  RGB表示颜色  A不透明度 1表示不透明，.5表示半透明 ，0表示透明
            十六进制表示颜色
                 语法 #加颜色
                 00-ff表示颜色浓度
                 如果两位两位重复可以简写成一位如：00ff00 --》0f0
            HSL  HSLA
            H 色像（0-360）
            S 饱和度   0%-100%
            L 亮度   0%-100%

         */
        .box{
            width: 200px;
            height: 200px;
            background-color: rgb(255,0,0);
        }
        .box2{
            width: 50%;
            height: 50%;
            background-color: hsl(40,100%,50%);
        }
        .box3{
            font-size: 30px;
            width: 10em;
            height: 10em;
            background-color: #0000ff/*0f0*/
        }
        .box4{
            font-size: 10px;
            width: 10rem;
            height: 10rem;
            background-color: rgba(0,255,0,.5);
        }
    </style>
</head>
<body>
    <div class="box">
    <div class="box2"></div>
    </div>
    <div class="box3"></div>
    <div class="box4"></div>

文档流

 <title>文档流</title>
    <style>
        .box1{
            width: 100px;
            background-color: green;
        }
        .box2{
            width: 100px;
            background-color: red;
        }
        span{
            background-color: chartreuse;
        }
    </style>
</head>
<body>
<!--    网页都是一层一层的
         css可以为每一层设置样式
         最下面一层就是文档流 创建的元素默认都在文档流中   元素状态分为：在文档流   脱离文档流
         元素在文档流·里面特点：
            块  块元素在页面中独占一行  默认宽度是父类元素 默认高度由子元素决定
            行  行元素在页面中和人的书写习惯一样   宽度和高度和内容一样-->
    <div class="box1"> div1</div>
    <div class="box2"> div2</div>
    <span>span1</span>
    <span>sapn2</span>

盒子模型

<title>盒子模型</title>
    <style>
        /*内容区
            可以设置宽度和高度 颜色 width height
          边框
            可以设置样式 宽度 颜色  border-width border-color border-style
            border-width 四个值  上 右  下  左
                         三个值  上 左右 下
                         两个值  上下  左右
                         一个值   上下左右
            border-xxx-width(color)   设置上下左右的宽度（颜色) top bottom left right
            border-color 和上面一样
            border-style  用法和上面一样
                   solid  实线
                   dotted  点状虚线
                   dashed  虚线

                   double  双线
            border 简写属性  border/border-top/border-bottom/border-left/border-right: __px style color
            border:10px solid red
            border-xx : none;  去掉某一边的的边框
           内边距
                padding-top
                padding-bottom
                padding-left
                padding-right
                padding 10px 20px 30px 40px ;用法同上
           外边距
             不影响盒子可见框的大小，会影响盒子的占地大小，和可见框的位置
                margin-top   元素向下移动
                margin-bottom
                margin-left   元素向右走
                margin-right
                margin: 10px 20px 30px 40px;  用法同上
         */
        .box1{
            width: 200px;
            height: 200px;
            background-color: chartreuse;
            border-style: solid;
            border-color: black;
            border-width: 10px;
            padding-bottom: 50px;
            padding-left: 50px;
            padding-right: 50px;
            padding-top: 50px;
            margin-left: 100px;
            margin-top: 100px;
            margin-bottom: 100px;
        }
        .box2{
            width: 100%;
            height: 100%;
            background-color: red;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
<!--    盒子模型布局
         css中页面中的元素都是矩形
         内容区（content）
         内边距（padding）
         边框（border）
         外边框（margin）
-->
    <div class="box1">
        <div class="box2"></div>
    </div>
    <div class="box3"></div>

布局

<title>布局</title>
    <style>
        /*
        水平布局：
           子类元素所有值必须与父类值相同，否则会自动补齐，通过margin-right补齐
           若某个元素设置为auto 变量 则会自动补齐 只能 width margin-left  margin-right 设置为auto
           如果将宽度和外边距 都设置成auto，则宽度会最大化
        垂直布局：
           父类如果不设置，则会被子元素撑开,高度和子元素相同
           如果子元素高度比父元素高，则子元素溢出
           overflow  对溢出部分处理   默认值为visible   可以看见  hide  不可见 scroll 生成两个滚动条 水平和垂直滚动
                                       auto  根据需要自动生成滚动条
           overflow-x  单独处理水平  overflow-y  单独处理垂直方向
           */
        /*.outer{
            width: 800px;
            height: 200px;
            border: 10px red solid;
        }
        .inner{
            width: auto;/*width 默认为auto
            height: 200px;
            background-color: blue;
            margin-right: 100px;
            margin-left: 100px;
        }*/
        .outer{
            height: 400px;
            background-color: chartreuse;
        }
        .inner{
            width: 200px;
            height: 100px;
            background-color: gold;
            margin-bottom: 100px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
    </div>

外边距折叠

<title>外边距的折叠</title>
  <style>
      /*
        兄弟元素
          垂直方向的外边距同号 如果相邻，则会重叠  则取决于两者间距绝对值最大的  特殊情况 一正一负  则会取和
        父子元素
          父子元素的外边距 子元素会传递给父元素
          1、可以用padding来让子元素移动
          2、也可以用边框来时子元素和父元素外边界分开 通过计算来让子元素移动到想要的位置
       */
      .box1,.box2{
          width: 200px;
          height: 200px;
          font-size: 100px;
      }
      .box1{
          background-color: chartreuse;
          margin-bottom: 100px;
      }
      .box2{
          background-color: gold;
          margin-top: 100px;
      }
      .box3{
          width: 100px;
          height: 100px;
          background-color: red;
          font-size: 100px;
      }
  </style>
</head>
<body>
  <div class="box1">
      <div class="box3"></div>
  </div>
  <div class="box2"></div>

行元素

 <title>行元素</title>
  <style>
      .ss{
          /*
            行元素不支持设置宽度和高度
            行元素可以设置padding ，但是垂直方向的padding不影响页面的布局
            行元素可以设置border，但是锤垂直方向的border不影响页面布局
            行元素也可以设置margin 不影响垂直方向的页面布局
            注意：  外边框不会重叠   外边距直接是两者之和
           */
          width: 100px;
          height: 100px;
          background-color: red;
          margin: 100px;
      }
      .dd{
          width: 200px;
          height: 200px;
          background-color: chartreuse;
      }
      a{
          /*
            display 设置元素的显示类型
                 inline  将元素设置为行内元素
                 block   将元素设置为块元素】
                 inline-block  将元素设置为行内块元素
                       行内块元素 可以设置宽度和高度又不会独占一行
                 table 将元素设置为表格
                 none  元素不在页面中显示
           visibility  设置元素的显示状态
                 visible 默认值  元素正常显示
                 hidden   隐藏元素  依然占据元素位置
           */
          display: inline-block;
          visibility: hidden;
          width: 100px;
          height: 100px;
          background-color: aqua;
      }
  </style>
</head>
<body>
  <a href="javascript:;">超链接</a>
  <span class="ss">ssssspan</span>
  <span class="ss">ssssspan</span>
  <div class="dd">dddddddiv</div>

浏览器默认样式

 <title>浏览器默认样式</title>
  <style>
      /*
         浏览器有默认眼样式 浏览器里面去检查代码
       */
      .box{
          border: 1px black solid;
          width: 200px;
          height: 200px;
      }
     /* body{
          margin: 0;
      }
      p{
          margin: 0;
      }
      ul{
          margin: 0;
          padding: 0;
          list-style: none;/*去掉list前面的黑点*/
      }*/
      /*因为都是去掉margin和padding，所有用通配选择器*/
      *{
          margin: 0;
          padding: 0;
      }
  </style>
</head>
<body>
  <div class="box"></div>
  <p>我是一个段落</p>
  <p>我是一个段落</p>
  <p>我是一个段落</p>
  <P>我是一个段落</P>
  <ul>
      <li>列表1</li>
      <li>列表2</li>
      <li>列表3</li>
  </ul>

盒子尺寸

<title>盒子的尺寸</title>
  <style>
      /*
         默认情况下 盒子大小由内容区，内边距，外边距，边框决定
           box-sizing   设置盒子尺寸的计算方式
             content-box  默认值，宽度和高度用来指定内容区
             border-box  宽度和高度指定可见框的大小

       */
      .box1{
          width: 100px;
          height: 100px;
          background-color: aqua;
          padding: 10px;
          border: red 10px solid;
          box-sizing: border-box;
      }
  </style>
</head>
<body>
  <div class="box1"></div>

轮廓圆角

 <title>轮廓和圆角</title>
  <style>
      /*
         outline 设置元素的轮廓线
           outline与border区别：border会影响布局 outline 不会影响布局
       */
      .box1{
          width: 100px;
          height: 100px;
          background-color: aqua;
          /*border: red 10px solid;*/
          /*
            box-shadow  用来设置元素的阴影效果，不会影响布局
               第一个值  水平偏移位置
               第二个值  竖直偏移位置
               第三个值  阴影的模糊半径
               第四个值  阴影的颜色
           */
          box-shadow: 30px 30px 20px rgba(0,0,0,3);
      }
      .box1:hover{
          outline: red 10px solid;
      }
      .box2{
          width: 200px;
          height: 200px;
          background-color: aqua;
          /*
             border-radius 设置圆角 后面设置半径
              border-top-left-radius 左上角半径
               border-top-right-radius  右上角半径
              border-bottom-left-radius 左下角半径
              border-bottom-right-radius 右下角半径
                 设置两个值且不相等，就是椭圆
             border-radius
             一个值 全部都是一个半径   x/y 表示椭圆
             两个值 左上/右下 右上/左下
             三个值 左上 右上/左下 右下
             四个值 左上 右上 右下 左下
             50% 圆形

           */
          border-radius: 50%;
      }
  </style>
</head>
<body>
   <div class="box1"></div>
  <span>Hello</span>
  <div class="box2"></div>

浮动

  <title>浮动</title>
  <style>
      /*
        通过浮动可以使元素怒向其父类的左右移动
          使用float来设置元素属性
            none 不浮动
            left  向左浮动
            right  向右浮动
         注意：元素设置浮动之后，水平布局等式不需要成立
         元素设置浮动之后，会完全从文档流里面脱离，不再占有文档流的位置
         所以元素下边的还在文档流中的元素会向上浮动
         特点：
           浮动元素脱离文档流
           设置浮动之后元素会在父类的左或者右
           浮动元素默认不会从父类元素里卖弄移出
           浮动元素移动不会超过前面的浮动元素（水平和垂直）
           如果浮动元素上面是一个吧浮动的元素则无法上移
           主要作用就是让页面中的元素可以水平排列
       */
      .box1{
          height: 200px;
          width: 200px;
          background-color: aqua;
          float: left;
      }
      .box2{
          height: 200px;
          width: 200px;
          background-color: blue;
          float: left;
      }
      .box3{
          height: 200px;
          width: 200px;
          background-color: red;
          float: left;
      }
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>

浮动的特点

 <title>浮动的特点</title>
  <style>
      .box1{
          /*
            元素设置浮动之后不会盖住文字，文字会自动环绕在浮动元素周围
              所以可以用浮动来设置元素环绕效果
           */
          width: 100px;
          height: 100px;
          background-color: red;
          float: left;
      }
      .box2{
          /*
            元素设置浮动之后，会脱离文档流，一些特点也会发生改变
              脱离文档流的特点：
                块元素不会独占一行
                块元素默认高度和宽度会被内容撑开
                行元素的特点和块元素一样，可以设置宽度和高度
           */
          background-color: blue;
          float: left;
      }
      .box3{
          background-color: red;
      }
      span{
          float: left;
          height: 200px;
          width: 200px;
          background-color: aqua;
      }
  </style>
</head>
<body>

  <div class="box1"></div>
  <p>《关于举办重庆交通大学第六届学生“法治文化节”的通知》以及全国青少年普法网各班级同学账号密码已上传。
      要求全体学生参与“宪法小卫士”网上法治知识学习和测评，全覆盖全参与，请同学们按照下发的账号进行登录完成、作为学院参与的统计数据，请同学们利用7-8月暑假期间完成，学校将适时把各学院完成情况进行通报。@全体成员
  </p>
  <div class="box2">div2</div>
  <div class="box3">div3</div>
  <span>  </span>

高度塌陷

<title>高度塌陷</title>
  <style>
      .outer{
          border:10px red solid;
          /*
          BFC 块级格式化环境
            BFC 是CSS的一个隐含属性  会变成一个独立的布局区
            开启BFC的特点
              开启BFC的元素不会被覆盖
              子元素和父元素的边框不会相重叠     可以设置外边距使子元素在父类元素向下移
              开启BFC的元素可以包含子元素

              通过特殊方式开启BFC：
                可以设置元素浮动
                设置行内块元素
                将元素overflow设置称非visible属性
                   通常设置成 overflow ： hidden auto 开启BFC
          */
      overflow: hidden;
      }
      .inner{
          width: 100px;
          height: 100px;
          background-color: blue;
          /*
            高度塌陷：
              在浮动布局中，父元素默认被子元素撑开
              当子元素浮动时，子元素脱离文档流，父元素将不会被撑开，高度丢失

              父元素高度丢失后，其他元素会上移，导致页面混乱

           */
          float: left;
      }
      .box2{
          width: 100px;
          height: 100px;
          background-color: gold;
          float: left;
      }
  </style>
</head>
<body>
  <div class="outer">
      <div class="inner"></div>
  </div>
  <div class="box2"></div>

clear清楚浮动给其他元素带来的影响

 <title>clear</title>
  <style>
      /*
        设置浮动之后，其他盒子也会发生位置的改变，
        如果我们不需要一个位置改变影响其他元素的位置，
          可以通过clear来消除对当前元素产生的影响
        clear
             作用清楚其他元素浮动对当前元素的影响
              可选值
                 left  清除左侧浮动产生的影响
                 right  清除右侧浮动产生的影响
                 both   清楚两侧影响较大的一侧
           原理：
             给当前元素加一个外边框，使其位置不受影响
       */
      .box1{
          width: 200px;
          height: 200px;
          background-color: blue;
          float: left;
      }
      .box2{
          width: 300px;
          height: 300px;
          background-color: gold;
          float:right;
      }
      .box3{
          width: 200px;
          height: 200px;
          background-color: red;
          clear: right;
      }
  </style>
</head>
<body>
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3">3</div>

after伪元素防止高度塌陷

 <title>after伪元素防止高度塌陷</title>
  <style>
      .box1{
          border: red 10px solid;
      }
      .box2{
          width: 200px;
          height: 200px;
          background-color: gold;
          float: left;
      }
      /*.box3{*/
      /*    clear: both;*/
      /*}*/
      .box1::after{
          content: '';
          clear: both;
          display: block;
      }
  </style>
</head>
<body>
      <div class="box1">
          <div class="box2"></div>
<!--            <div class="box3"></div>-->
      </div>

外边距重叠和高度塌陷用clearfix消除

 <title>外边距重叠和高度塌陷clearfix</title>
  <style>
      .box1{
          width: 200px;
          height: 200px;
          background-color: blue;
      }
      /*.box1::before{
          content: '';
          display: table;
      }*/
      .box2{
          width: 100px;
          height: 100px;
          background-color: red;
          margin-top: 100px;
      }
      /*
         clearfix可以解决高度塌陷和外边距重叠，当遇到这些问题时可以直接使用
       */
      .clearfix::before,.clearfix::after{
          content: '';
          display: table;
          clear: both;
      }
  </style>
</head>
<body>
  <div class="box1 clearfix">
      <div class="box2"></div>
  </div>

相对定位

  <title>相对定位</title>
  <style>
      /*
          定位（position）
             定位是一种高级的布局手段
             可以通过定位将元素摆放在页面的任意位置
             使用position来设置定位
                 static  默认值，元素静止没有开启定位
                 relative  开启相对定位
                 absolute   开启绝对定位
                 fixed   开启固定定位
                 sticky   开启粘滞定位
             相对定位
               元素的position属性设置为relative
               特点：
                   如果不设置偏移量，不会发生改变
                   相对元素定位是参照元素在文档流中的位置定位
                   相对元素定位会提升元素的层级
                   相对定位不会使元素脱离文档流
                   相对定位不会改变元素的性质，行元素还是行元素，块元素依然是块元素
                偏移量
                   top  定位元素的上边的距离
                   bottom  定位元素下边距离
                   left  定位元素左边距离
                   right  定位元素右边距离
                 注意：参照点为元素的左上角点

       */
      body{
          font-size: 30px;
      }
      .box1{
          height: 200px;
          width: 200px;
          background-color: blue;
      }
      .box2{
          height: 200px;
          width: 200px;
          background-color: red;
          position: relative;
          left: 200px;
          top: -200px;
      }
      .box3{
          height: 200px;
          width: 200px;
          background-color: gold;
      }
  </style>
</head>
<body>
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3">3</div>

绝对定位

 <title>绝对定位</title>
    <style>
        /*
            定位（position）
               定位是一种高级的布局手段
               可以通过定位将元素摆放在页面的任意位置
               使用position来设置定位
                   static  默认值，元素静止没有开启定位
                   relative  开启相对定位
                   absolute   开启绝对定位
                   fixed   开启固定定位
                   sticky   开启粘滞定位
               绝对定位
                 position属性值设置为absolute就开启了绝对定位
                   绝对定位的特点：
                     开启绝对定位后不设置偏移量，位置不发生改变
                     开启绝对定位后，元素脱离文档流
                     开启绝对定位后元素性质改变，行元素变成块元素
                     绝对定位会提高元素的层级
                     绝对定位元素是相对于其包含快进行定位

                包含快：
                 正常情况下  包含快就是最近的祖先块元素

                 绝对定位的包含快   包含快就是离他最近的开启了定位的元素，若所有元素均未开启，则为《HTML》
                   top bottom left right
                 注意： 参照物为改元素的包含快

         */
        body{
            font-size: 30px;
        }
        .box1{
            height: 200px;
            width: 200px;
            background-color: blue;
        }
        .box2{
            height: 200px;
            width: 200px;
            background-color: red;
            position: absolute;
            left: 300px;
            top: 300px;
        }
        .box3{
            height: 200px;
            width: 200px;
            background-color: gold;
        }
    </style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>

固定定位

 <title>固定定位</title>
    <style>
        /*
            定位（position）
               定位是一种高级的布局手段
               可以通过定位将元素摆放在页面的任意位置
               使用position来设置定位
                   static  默认值，元素静止没有开启定位
                   relative  开启相对定位
                   absolute   开启绝对定位
                   fixed   开启固定定位
                   sticky   开启粘滞定位
               固定定位  也是一种绝对定位
                 position属性值设置为absolute就开启了绝对定位
                   绝对定位的特点：
                     开启绝对定位后不设置偏移量，位置不发生改变
                     开启绝对定位后，元素脱离文档流
                     开启绝对定位后元素性质改变，行元素变成块元素
                     绝对定位会提高元素的层级
                     绝对定位元素是相对于其网页视口快进行定位

                 视口：
                 可见玩个有的左上角， 不会随网页的滚动条移动
                   top bottom left right
                 注意： 参照物为网页视口

         */
        body{
            font-size: 30px;
            height: 3000px;
        }
        .box1{
            height: 200px;
            width: 200px;
            background-color: blue;
        }
        .box2{
            height: 200px;
            width: 200px;
            background-color: red;
            position: fixed;
            left: 300px;
            top: 300px;
        }
        .box3{
            height: 200px;
            width: 200px;
            background-color: gold;
        }
    </style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>

粘滞定位

 <title>粘滞定位</title>
    <style>

        /*
            定位（position）
               定位是一种高级的布局手段
               可以通过定位将元素摆放在页面的任意位置
               使用position来设置定位
                   static  默认值，元素静止没有开启定位
                   relative  开启相对定位
                   absolute   开启绝对定位
                   fixed   开启固定定位
                   sticky   开启粘滞定位
               粘滞定位
                 元素的position属性设置为sticky
                 特点：
                     如果不设置偏移量，不会发生改变
                     相对元素定位是参照元素在文档流中的位置定位
                     相对元素定位会提升元素的层级
                     相对定位不会使元素脱离文档流
                     相对定位不会改变元素的性质，行元素还是行元素，块元素依然是块元素
                     这个元素会移动到某一个固定位置的时候不会再移动
                  偏移量
                     top  定位元素的上边的距离
                     bottom  定位元素下边距离
                     left  定位元素左边距离
                     right  定位元素右边距离
                   注意：参照点为元素的左上角点

         */
        body{
            font-size: 30px;
            height: 3000px;
        }
        .box1{
            height: 200px;
            width: 200px;
            background-color: blue;
        }
        .box2{
            height: 200px;
            width: 200px;
            background-color: red;
            position: sticky;
            top: 800px;
        }
        .box3{
            height: 200px;
            width: 200px;
            background-color: gold;
        }
    </style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>

绝对定位元素位置

 <title>绝对定位元素位置</title>
    <style>
        /*
           水平布局
            left+margin+padding+border+right=包含快的width
            开启绝对定位后，水平布局添加了left和right两个值
             当发生过度约束时，9个值没有auto时，自动调整right的值
             如果又auto则调整auto
             可设置auto
                margin width left  right
                  left和right默认值为auto所有不知道值的时候，不满足等式时，会自动调整这两个值
              垂直布局
               top+margin+padding+border+bottom=包含快的height

         */
        .box1{
            height: 500px;
            width: 500px;
            background-color: chartreuse;
            position: absolute;
        }
        .box2{
            height: 100px;
            width: 100px;
            background-color: red;
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>

元素层级

<title>元素层级</title>
    <style>
        /*
          对于开启定位的元素，可以通过z-index设置属性来指定元素层级
             z-index需要一个整数作为参数，值越大，层级越高，越优先显示
            如果优先级一一样优先显示下方的元素
            祖先元素层次再高，也不会高过后代元素,所以设置z-index值时，后代元素值大于祖先元素也会优先显示后代元素
         */
        body{
            font-size: 30px;
            height: 3000px;
        }
        .box1{
            height: 200px;
            width: 200px;
            background-color: blue;
            position: absolute;
            z-index: 2;
        }
        .box2{
            height: 200px;
            width: 200px;
            background-color: rgba(255,0,0,.5);
            position: absolute;
            top: 50px;
            left: 50px;
            z-index: 1;
        }
        .box3{
            height: 200px;
            width: 200px;
            background-color: gold;
            position: absolute;
            top: 100px;
            left: 100px;
            z-index: 4;
        }
        .box4{
            height: 100px;
            width: 100px;
            background-color: aqua;
            position: absolute;
            z-index: 3;
        }
    </style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3
<div class="box4">4</div></div>

字体族

 <title>字体族</title>
    <style>
        /*
        问题：
          加载速度  版权   字体格式
         */
        @font-face {
            /*指定字体名字*/
            font-family: 'myfont';
            /*指定字体路径和格式*/
            /*src: url("路径") format("类型");*/
        }
        p{
            /*
            字体相关的样式：
              color  用来指定字体颜色
              font-size  用来指定字体大小  em  当前字体大小 rem相当于根标签字体大小
               1em=1font-size   1rem=1html
              font-family  字体族（字体格式样式）
                可选值：
                   serif  衬线字体
                   sans-serif  非衬线字体
                   monospace  等宽字体
                      指定字体类别，浏览器会自动使用该类别的字体
               font-family  可以同时指定多个字体，多个字体间用‘,‘隔开
                  字体在前面的优先  字体名字间又空格的通常用单引号’‘
            */
            color: red;
            font-size: 40px;
            font-family: '微软雅黑' monospace;
            /*font-family: myfont;*/
        }
    </style>
</head>
<body>
    <p>今天天气真不错，how are you！</p>

图标字体

<title>图标字体</title>
    <link rel="stylesheet" href="../fa/css/all.css">
</head>
<body>
<!--
     图标字体
         在网页中经常需要使用一些图标，可以通过图片引入图标
           但是2图片本身比较大，并且不灵活
          使用我们可以将图标设计成字体，
             然后通过font-face的形式来引入使用图标
            这样就可以就可以通过使用字体的形式使用图标

            fontawesome 使用步骤
              下载： https://fontawesome.com
              解压：
              将css和webfonts引入项目
              使用图标
                 直接通过类名引入图标字体
                   class=“fas fabell”
                   class=“fab fa-accessible-icon”
-->
    <i class="fas fa-bell" style="font-size: 80px;color: red"></i>
    <i class="fas fa-bell-slash"></i>
    <i class="fab fa-accessible-icon"></i>
    <i class="fas fa-otter" style="font-size: 160px;color: green;"></i>

图标字体的用法

  <title>图标字体其他用法</title>
    <link rel="stylesheet" href="../fa/css/all.css">
    <style>
        li{
            list-style: none;
        }
        li::before{
            /*
              通过伪元素来设置图标字体
                 找到妖色孩子得图标，通过before和after选中
                 在content中设置字体编码
                 设置字体样式
                    fab
                    font-family: "Font Awesome 5 Brands";
                    fas
                    font-family: "Font Awesome 5 Free";
                    font-weight: 900;
            */
            content: '\f1b0';
            /*font-family: "Font Awesome 5 Brands";*/
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            color: blue;
            margin-right: 10px;
        }
    </style>
</head>
<body>
<ul>
    <li>锄禾日当午</li>
    <li>汗滴禾下土</li>
    <li>谁知盘中餐</li>
    <li>粒粒皆辛苦</li>
</ul>
<span class="fas">&#xf0f3;</span>

Iconfront 阿里图标字体

<title>iconfont</title>
    <link rel="stylesheet" href="../font/iconfont.css">
    <style>
        p::before{
            content: '\e7b8';
            font-family: iconfont;
            font-size: 100px;
        }
    </style>
</head>
<body>
    <i class="iconfont">&#xe7b3;</i>
    <i class="iconfont">&#xe7b4;</i>
    <i class="iconfont">&#xe7b5;</i>
    <i class="iconfont icon-mike"></i>
    <p>hello</p>

行高

  <title>行高</title>
    <style>
        div{
            font-size: 50px;
            border: red 1px solid;
            /*
               可以将行高和高度设置相同的值来时文字居中
            */
            height: 200px;
            /*
            行高：
               行高指文字占有的实际高度
                 可以通过line-height来设置行高
                   行高单位（px，em）
                     也可以设置一个数，表示行高是字体的指定倍数
                 行高经常还用来设置文字的行间距
                   行间距=行高-字体大小
                 字体框：
                    字体框是字体存在的个字，可以通过font-size设置，设置的大小实际就是字体框的高度
                     行高会在字体框上下平均分配
            */
            line-height: 200px;
            /*line-height: 1.33;*/
        }
    </style>
</head>
<body>
    <div>今天天气真不错，哈哈，The weather is very gorgeous today. 今天天气真不错，哈哈，
        The weather is very gorgeous today.</div>

字体样式

 <title>字体样式</title>
    <style>
        div{
            border: red 1px solid;

            /*
              font：可以设置字体的所有属性
                语法  字体加粗 字体风格 字体大小/行高 字体族
                  行高，字体加粗，字体风格可以省略 不写则为默认值normal
             */
            /*font-size: 50px;line-height: 2;*/
            /*font-family:  微软雅黑 Serif;*/
            /*font: 50px/2  微软雅黑 Serif;*/
            /*
            font-weight  字体加粗
               可选值： normal bold加粗 100-900 9个等级（一般没用）
            font-style  字体风格
               可选值： normal italic斜体
            */
            /*font-weight: bold;*/
            /*font-style: italic;*/
            font: bold italic 50px/2  微软雅黑 Serif;
        }
    </style>
</head>
<body>
    <div>今天天气真不错，哈哈，The weather is very gorgeous today.
        今天天气真不错，哈哈，The weather is very gorgeous today.
    </div>

文本水平和锤子对齐

<title>文本的水平和垂直对齐</title>
    <style>
        div{
            width: 800px;
            border: red 1px solid;
        /*
           text-align 水平对齐
              可选值：
                 left  左对齐
                 right  右对齐
                 top   上对齐
                 bottom   下对齐
        */
            font-size: 50px;
        }
        span{
            font-size: 20px;
            border: blue 1px solid;
        /*
          vertical-align  垂直对齐
            可选值：
               baseline  默认值，  基线对齐
               top 顶部对齐
               bottom  底部对齐
               middle  居中对齐
               _____px   与基线偏移多少像素
        */
            vertical-align: baseline;
        }
        p{
            border: red 1px solid;
            vertical-align: top;
        /*    使用垂直对齐是图片和边框对齐，减少对布局的影响=*/
        }
    </style>
</head>
<body>
    <div>Hello,hello,今天天气<span>真不错</span></div>
    <p>
        <img src="../images/gameover.png">
    </p>

其他文本样式

<title>其他文本样式</title>
    <style>
        .box1{
        /*
         text-decoration  文本修饰
              text-decoration: 形式 颜色 样式;
           可选值：
             none 默认  没有
             underline  下划线
             overline  上划线
             line-though  删除线
        */
            font-size: 50px;
            text-decoration: underline red dotted;
        }
        .box2{
        /*
          white-space 设置网页如何处理空白
            可选值：
              normal  正常
              nowrap  不换行
              pre  保留空白
        */
            width: 300px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        /*    设置浏览器显示300px长度的文本 多余的内容隐藏，并且不换行，在末尾显示...*/
        }
    </style>
</head>
<body>
    <div class="box1">今天天气真不错</div>
    <div class="box2">本监测系统的应变监测共10个监测点，每个监测点安装有1个监测传感器，监测数据存放在“应变监测数据.txt”文件中，该文件数据除第一列之外（监测时间），其它每列对应一个传感器的监测数据（波长），假设这10个传感器一次对应10个监测点。数据文件的数据含义如下表：</div>
</body>

背景

<title>背景</title>
    <style>
         .box1{
            width: 500px;
            height: 500px;
        /*
          background-color  设置背景颜色
        */
            background-color: chartreuse;
        /*
          background-image  设置背景图片
             可以同时设置背景颜色和图片 颜色会补充图片空白处
             如果图片小于元素，会重复，如果大于，图片显示部分
        */
            background-image: url("../images/me1.png");
        /*
          background-repeat 用来设置背景图片重复方式
             可选值
                repeat  默认值  x，y重复
                repeat-x  x轴重复
                repeat-y  y轴重复
                no-repeat  不重复
        */
            background-repeat: no-repeat;
        /*
          background-position  用来设置图片位置
             设置方式
                 通过top  left  right  bottom  center 来表示方位
                   使用时一般指定两个值，不写默认是center
                 通过偏移量来设置位置
                   两个值  第一个x轴偏移量  第二个y周偏移量

        */
            background-position: top center;
            /*background-position: 100px 100px;*/
            /*
               background-origin 设置偏移量原点
                   可选值
                     padding-box  默认值  background-position从内边距开始计算
                     content-box  背景图片从内容区开始计算
                     border-box   背景图片从外边框开始计算
                background-clip  设置背景范围
                    可选值
                      border-box  默认值，背景会出现在边框的下边
                      padding-box  背景只会出现在内容区和内边距
                      content-box   背景只会出现在内容区
            */
            border: red 1px double;
            background-origin: border-box;
            background-clip: content-box;
        /*
         background-size  设置背景图片的大小
             第一值表示宽度  第二个值表示高度
             如果只写一个值，第二个默认为auto

             cover 图片比例不变，将元素铺满
             contain  图片比例不变，将图片在元素中完整显示
        */
            background-size: 200px auto;

        }
        .box2{
            width: 300px;
            height: 1000px;
            background-image: url("../images/me2.png");
            background-repeat: no-repeat;
            background-position: 100px 100px;
        /*
          background-attachment  设置背景图片是否跟随元素移动
              可选值
                  scroll  默认值 背景图片跟随元素移动
                  fixed  背景图片不跟随元素移动
        */
            background-attachment: fixed;
        }
        .box3{
            /*
             background   设置背景简写属性
                顺序没用要求，也没有必须写的属性
                  注意：
                     background-size必须在background-position后面，用/隔开
                       background-position/background-size
                     background-origin background-clip 两个样式background-origin要在前面
            */
            width: 500px;
            height: 500px;
            border: red 1px double;
            padding: 50px;
            background: red url("../images/pause_nor.png") center center /contain border-box content-box no-repeat;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">本监测系统的应变监测共10个监测点，每个监测点安装有1个监测传感器，监测数据存放在“应变监测数据.txt”文件中，该文件数据除第一列之外（监测时间），其它每列对应一个传感器的监测数据（波长），假设这10个传感器一次对应10个监测点。数据文件的数据含义如下表：
            本监测系统的应变监测共10个监测点，每个监测点安装监测数据.txt”文件中，该文件数据除第一列之外（监测时间），其它每列对应一个传感器的监测数据（波长），假设这10个传感器一次对应10个监测点。数据文件的数据含义如下表：本监测系统的应变监测共10个监测点，每个监测点安装有1个监测传感器，监测数据存放在“应变监测数据.txt”文件中，该文件数据除第一列之外（监测时间），其它每列对应一个传感器的监测数据（波长），假设这10个传感器一次对应10个监测点。数据文件的数据含义如下表：
        </div>
    </div>
    <div class="box3"></div>

渐变

 <title>渐变</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            /*background-color: red;*/
        /*
          可以通过渐变设置一些复杂的背景，可以实现从一个颜色向另一个颜色过度
          ！！！渐变图片，需要通过background-image来设置
           线性渐变，颜色沿着一条直线渐变
            linear-gradient()
            linear-gradient(red,yellow) 红色在前，黄色在后，中间为渐变
            线性渐变的前面可以指定渐变方向
            to  left   to  right  to top left
            ————deg  表示多少度渐变  45deg
            ————turn 多少圈渐变  .5turn
            渐变可以指定多个颜色，默认平均分配 也可以指定渐变情况
            repeat-linear-gradient()  渐变重复，即平铺渐变
        */
           /*background-image: linear-gradient(red,yellow,green);*/
           /* background-image: linear-gradient(red 50px, yellow 100px,green 130px);*/
            background-image: repeating-linear-gradient(to right,red 0px, yellow 50px);
        }
        .box2{
            width: 300px;
            height: 300px;
        /*
            radial-gradient(大小（形状） at 位置，颜色 位置，颜色 位置，颜色 位置)放射性渐变
              默认情况下，渐变形状由元素形状决定
                长方形--》椭圆  正方形--》圆
                也可以指定  circle   ellipse  圆  椭圆
                        closest-side  closest-corner  farthest-side  farthest-corner
                可以可以指定渐变位置
                 top  right  center    --px --px
        */
            background-image: radial-gradient(circle at 100px 100px,red 50px,yellow 100px);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>

表格样式

<title>表格样式</title>
    <style>
        table{
            width: 50%;
            border: black 1px solid;
            margin: 0 auto;
            /*border-spacing  设置边框之间的距离*/
            border-spacing: 0px;
            /* border-collapse: collapse;  设置边框合并*/
            border-collapse: collapse;
        }
        td{
            border: black 1px solid;
            height: 100px;
        /*    默认情况下文字会在表格中垂直居中 可以通过vertical-align  text-align设置*/
            vertical-align: middle;
            text-align: center;
        }
        /*
        如果表格是通过tr设置，没用用tbody
             浏览器会自动创建一个tbody 并且将tr全部放在tbody里面
             tr 不算table的子元素
        */
        tbody>tr:nth-child(2n){
            background-color: aqua;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>1</td>
            <td>唐僧</td>
            <td>18</td>
        </tr>
        <tr>
            <td>2</td>
            <td>孙悟空</td>
            <td>20</td>
        </tr>
        <tr>
            <td>3</td>
            <td>猪八戒</td>
            <td>30</td>
        </tr>
    </table>

过渡

 <title>过渡</title>
    <style>
        .box1{
            width: 800px;
            height: 800px;
            background-color: silver;
            overflow: hidden;
        }
        .box1 div{
            width: 100px;
            height: 100px;
            margin-bottom: 100px;
        }
        .box2 {
            background-color: aqua;
            margin-left: 0;
            /*
            过渡 （transition）
              通过过渡可以指定一个属性变化的切换方式
        */
            /*
            transition-property   指定执行过渡的属性
            多个属性之间用，隔开 如果所有或者很多属性都需要过渡，用关键字all
            大部分属性都支持过渡，注意：过渡时必须从一个具体值到另外一个具体值
        */
            transition-property: all;
            /*
           transition-duration 指定过渡的时间
           单位s  ms
        */
            transition-duration: 2s;
            /*
            transition-timing-function  指定过渡的时间函数
               ease  默认值，慢速快速慢速
               linear   匀速
               ease-in   加速
               ease-out   减速
               ease-in-out   加速，减速
               cubic-bezier（）  指定时间函数
                  https://cubic-bezier.com
               steps()分布执行
               第一个值时步数，第二个值  start表示时间开始时执行  end表示时间结束时开始执行

         */
            /*transition-timing-function: cubic-bezier(.25,.1,.25,1);*/
            transition-timing-function: steps(2,start);
        }
            .box3{

                background-color: orange;
                transition-property: all;
                transition-duration: 2s;
            }
            .box1:hover div{
                width: 200px;
                height: 200px;
            }
    /*
    transition-delay   执行时间延迟
    */
        .box2{
            transition-delay: 3s;
        }
    /*
      transition  简写属性
         没有先后，如果延迟和持续时间同时写，持续时间在前，延迟时间在后
    */
        .box2{
            transition: 2s margin-left 1s;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>

动画

 <title>动画</title>
    <style>
        .box1{
            width: 800px;
            height: 800px;
            background-color: silver;
            overflow: hidden;
        }
        .box1 div{
            width: 100px;
            height: 100px;
            margin-bottom: 100px;
            margin-left: 0;
        }
        .box2{
            background-color: #bfa;
        /*
          设置动画
              animation-name  对当前元素生效的关键帧的名字
              animation-duration  动画持续时间
              animation-timing-function  动画执行的时间函数
              animation-delay  动画延时
              animation-iteration-count   动画执行次数
                   可选值：
                     次数   infinite （无限循环）
              animation-direction  动画运行的方向
                 可选值：
                    normal  默认值，从from到to 每次运行都一样
                    reverse    从to到from每次运行都一样
                    alternate   从from 向to运行， 重复执行动画时反向执行
                    alternate-reverse  从to 向from 重复执行动画时反向执行
              animation-play-state  设置动画的执行状态
                  可选值：
                     running  默认值，动画执行
                     paused  动画暂停
              animation-fill-mode  动画填充模式
                  可选值：
                     none  默认值，动画执行时回到原来状态
                     forwards  动画执行时停在结束状态
                     backwards  动画延时等待时袁术处于开始状态（from）
                     both   具有forwards和backwards的特性
             animation  简写属性和transition一样，注意：延时和持续时间书写时，持续时间在前
        */
            animation-name: text;
            animation-duration: 2s;
            animation-iteration-count: 4;
            animation-direction: alternate-reverse;

        }
        .box1:hover div{
            animation-play-state: paused;
        }
    /*
       动画：
         动画和过渡类似，都可以实现动态效果，动画动态效果自动触发
         设置动画必须先设置关键帧，关键帧设置了动画执行的每一个步骤
    */
        /*设置关键帧*/
        @keyframes text {
            /*from 表示动画开始位置   也可以用0%*/
            from{
                margin-left: 0;
            }
            /*to  表示动画的结束位置，   也可以用100%表示*/
            to{
                margin-left: 700px;
            }
        }
    </style>
</head>
<body>
    <div class="box1">
    <div class="box2"></div>
    </div>

关键帧

<title>关键帧</title>
    <style>
        .outer{
            height: 500px;
            border-bottom: 10px solid black;
            margin: 50px auto;
            overflow: hidden;
        }
        .box1{
            height: 100px;
            width: 100px;
            border-radius: 50%;
            background-color: #bbffaa;
            animation: ball 2s forwards infinite alternate;
        }
        @keyframes ball {
            from{
                margin-top: 0;
            }
            20%,60%,to{
                margin-top: 400px;
                animation-timing-function: ease-in;
            }
            40%{
                margin-top: 100px;
            }
            80%{
                margin-top: 200px;
            }
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box1"></div>
    </div>

变形平移

<title>变形平移</title>
    <style>
        body{
            background-color: silver;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bbffaa;
            margin: 0 auto;
            margin-top: 200px;
        /*
          变形
             通过css来改变元素的形状和位移
             变形不会影响页面的布局
             transform  用来设置元素变形效果
             平移
               translateX（）  x轴平移
               translateY（）  y轴平移
               translateZ（）  z轴平移
                 值可以是多少px   也可以是%
        */
            transform: translateX(100px);
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: orange;
            margin: 0 auto;
        }
        .box3{
            background-color: yellow;
            position: absolute;
        /*  要使box3居中，我们可以通过平移来完成
        不确定的一个用平移来完成

        这种方式适用于盒子大小确定的
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          margin:auto;
        */
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
        }
        .box4,.box5{
            width: 220px;
            height: 300px;
            background-color: #ffffff;
            float: left;
            margin:  0 10px;
            transition: all .3s;
        }
        .box4:hover,.box5:hover{
            transform: translateY(-4px);
            box-shadow: 0 0 10px rgba(0,0,0,.3);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
<!--    <div class="box2"></div>-->
    <div class="box3">hello</div>
    <div class="box4"></div>
    <div class="box5"></div>

Z平移

<title>Z平移</title>
    <style>
        html{
        /*    设置网页的视距，人眼与网页的距离*/
            perspective: 800px;
        }
        body{
            border: 1px solid red;
            background-color: silver;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bbffaa;
            margin: 200px auto;
        /*
           Z轴平移，调整元素在z轴的位置，正常情况是调整元素和人眼之间的距离
             距离越大，元素离人月近
           z轴平移属于立体效果，默认情况下，网页不支持透视，如果需要看键效果，必须设置网页距离

        */
            transition: 2s;
        }
        body:hover .box1{
            transform: translateZ(300px);
        }
    </style>
</head>
<body>
    <div class="box1"></div>

旋转

 <title>旋转</title>
    <style>
        html{
            /*    设置网页的视距，人眼与网页的距离*/
            perspective: 800px;
        }
        body{
            border: 1px solid red;
            background-color: silver;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bbffaa;
            margin: 200px auto;
            transition: 2s;
        }
        body:hover .box1{
        /*
        transform
           通过旋转可以使元素沿着x,y,z轴旋转指定角度
              rotateX（）
              rotateY（）
              rotateZ（）
              沿着x轴，y轴，z轴，旋转  单位  deg  turn
        */
           /*transform: rotateZ(.5turn);*/
           /* transform: rotateY(180deg) translateZ(400px);*/
            /*transform:  translateZ(400px) rotateY(180deg);*/
            transform: rotateY(180deg);
        /*    是否显示背面   hidden  不显示  visible显示*/
            backface-visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="box1"></div>

缩放

  <title>缩放</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: #bbffaa;
            transition: 2s;
            margin: 100px auto;
        /*
           变形原点 默认值center
        */
            transform-origin: center;
        }
        .box1:hover{
            /*
              对元素缩放的函数
              scale（） 双方向缩放
              scaleY（）垂直缩放
              scaleX（）水平缩放

            */
            transform: scale(2);
        }
    </style>
</head>
<body>
    <div class="box1"></div>

弹性盒子

 <title>弹性盒子简介</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 500px;
            border: 10px red solid;
        /*    将ul设置成弹性容器*/
            display: flex;
        /*
           flex-direction  指定容器中弹性元素的排列方式
              可选值：
                row  默认值，弹性元素在容器中水平排列（左向右）
                   主轴  自左向右
                row-reverse  弹性元素在容器中水平排列（右向左）
                   主轴   自右向左
                column  弹性元素在容器中竖直排列（自上向下）
                column-reverse   弹性元素在容器中竖直排列（自下向上）
                主轴  弹性元素排列的方向
                侧轴  与弹性元素垂直的方向
        */
            flex-direction: row;
        }
        li{
            width: 200px;
            height: 100px;
            background-color: #bbffaa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
        /*
           弹性元素的属性
             flex-grow  指定弹性元素的伸展系数
              当父类元素有多余空间的时候，子元素如何伸展
              父类元素剩余的空间会按照比例分配
              flex-shrink  指定弹性元素的收缩系数
                当父类元素不充足的时候，对子类元素按照比例收缩

        */
            flex-shrink: 0;
        }
        li:nth-child(1){
            flex-grow: 0;
            flex-shrink: 1;
        }
        li:nth-child(2){
            flex-grow: 2;
            background-color: orange;
        }
        li:nth-child(3){
            flex-grow: 3;
            background-color: pink;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

弹性元素样式

<title>弹性元素样式</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 800px;
            border: 10px red solid;
            /*    将ul设置成弹性容器*/
            display: flex;

        }
        li{
            width: 200px;
            height: 100px;
            background-color: #bbffaa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            /*
              flex-grow  弹性增长系数
            */
            flex-grow: 1;
        /*
         弹性缩减系数
           缩减系数计算比较复杂
           缩减多少是根据缩减系数和元素大小决定的
        */
            flex-shrink: 1;
        /*
          元素基础长度
             flex-basis  指定元素的基础长度
               如果主轴是横向的，指定的是元素宽度
               如果主轴是纵向的，指定的是元素的高度
               默认值是auto 表示参考元素自身高度和宽度
               如果传递了一个具体的数值，则以该值为准
        */
            flex-basis: 100px;
        /*
           flex  可以设置元素的三个属性
             flex 增长  缩减  基础
              initial  “flex：0 1 auto；
              auto   ”flex：1 1 auto；
              none  flex：0 0 auto  元素没有弹性
        */
            flex:initial;

        }
        li:nth-child(1){
        /*    order  指定元素的排列顺序*/
            order: 2;
        }
        li:nth-child(2){
            background-color: orange;
            order: 3;
        }
        li:nth-child(3){
            background-color: pink;
            order: 1;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

完美视口

   <meta charset="UTF-8">
<!--    设置视口大小  device-width 表示设备宽度（完美视口）-->
    <meta name="viewport" content="width=device-width ,initial-scale=1.0">
    <title>完美视口</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<!--
    移动端默认视口是980px（css像素）
      默认情况下，移动端的像素比是  980px/移动端的宽度
      如果直接再网页端编写移动端网页，比例不好，会导致网页内容非常小
      再v编写移动端网页时一定要确保有一个合理的像素比
      可以通过meta来设置视口大小
      每一款移动设备都有一个最佳的像素比，一般根据这个像素比就能得到一个较好的视觉效果，但是不同的设备有所不同
-->
    <div class="box1"></div>

VM适配

 <title>vm适配</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            /*
             网页中字体大小最小12px，不能设置比12px更小的，小于12px为12px
             0.13333333vm=1px
            */
            font-size: 5.3333vw;
        }
        .box1{
            /*
              rem
                1rem=1html字体大小

            */
            width: 18.75rem;
            height: 0.875rem;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box1"></div>

响应式布局

<title>响应式布局</title>
    <style>
        /*
         使用媒体查询
           语法，@media 查询规则（）
              媒体类型
                 all 所有设备
                 print 打印设备
                 screen  带屏幕的设备
                 speech  屏幕阅读器
                   可以使用，号连接多个媒体类型代表或者

                   可以在媒体类型前添加only表示
                     only的使用主要是未来兼容一些老版本浏览器*/
                     @media print，screen{
                       body{
                         background-color: red;
                         }
                       }

        /*@media only screen{*/
        /*    body{*/
        /*        background-color: red;*/
        /*    }*/
        /*}*/
    </style>
</head>
<body>
<!--
    响应式布局
       网页可以根据不同的设备或者窗口大小是呈现出不同的效果
       使用响应式布局，可以使用一个网页适用于所有设备
       响应式布局关键是媒体查询
       通过媒体查询可以为不同设备或者不同状态来分别设置样式
-->

媒体查询

<title>媒体查询</title>
    <style>
        /*
          媒体特性
            width  窗口的宽度
            height  视口的高度
            min-width  视口的最小宽度（视口大于指定宽度时生效）
            max-width  视口的最大宽度（视口小于指定宽度时生效）
        /*
           @media （max-width：500px）{
           body{
           background-color:red;
           }
           }
         */
    /*
      样式切换的分界点，称为断点
    */
        @media only screen and (min-width: 500px) and (max-width: 700px){
            body{
                background-color: red;
            }
        }
    </style>
</head>
<body>

</body>

总结

CSS知识点很多，需要大量的练习才能更好的理解这些知识点，我通过B站看视频学习的CSS，我刚学完不久，还有很多的地方没用理解，只是将我的笔记记录在里面了。很想感概一句CSS真的很不简单，通过CSS将一个网页渲染的协调更加困难。个人喜欢代码和知识点结合的记录方式，不喜欢纯理论记录和总结自己所学的东西。

HumbleFool

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS总结

CSSCSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。HTML是网页框架，CSS的作用就是渲染网页。CSS语法CSS选择器 <title>css</title> <!--选择器,可同时给多个标签修改 --
复制链接

扫一扫