【JAVA】CSS定位与CSS3属性、渐变、CSS3字体、2D变换

1 定位

1.1 相对定位

相对定位没有脱离文档流

定位元素的显示层级比普通元素高

定位元素可以通过margin，float调整位置，但不推荐

包含块：父元素

left和right同时写，右失效

上下同时写，下失效

<head>
        <style>
         *{
                margin: 0;
                padding:0;
         }
         .outer{
                width: 500px;
                border:1px solid black;
                background-color: chocolate;
                padding: 20px;
         }
         .box{
                width: 80px;
                height: 80px;
         }
         .box1{
                background-color: aqua;
         }
         .box2{
                background-color: brown;
                position: relative;
                /* 正值离left多少距离 */
                left:100px;
                bottom:100px;
         }
         .box3{
                background-color: yellowgreen;
         }
        </style>
</head>
<body>
        <div class="outer">
                <div class="box box1"></div>
                <div class="box box2"></div>
                <div class="box box3"></div>
        </div>
</body>

在box2中加入：

float: left;

1.2 绝对定位

绝对定位脱离文档流

绝对定位+浮动：浮动失效

绝对定位+margin：可以但不推荐

包含块：第一个拥有定位的祖先元素，没有就是页面元素

子绝父相：这样父亲就可以管理儿子

子元素想在宽度上和父元素对齐，定位后left：0，right：0，全铺满，top：0，bottom：0

 <style>
      .outer{
        width: 500px;
        background-color: aqua;
        border: 1px solid red;
        padding: 20px;
        position:relative;
      }
      .box{
        width: 200px;
        height: 100px;
        font-size: 20px;
      }
      .box1{
        background-color: blue;
      }
      .box2{
        background-color: rgb(110, 238, 6);
        /* 绝对定位脱离文档流，与浮动不同，浮动是文字环绕图片或文字环绕文字，浮动会把3 t出来 */
        position:absolute;
      }
      .box3{
        background-color: rgb(248, 17, 232);
      }
      /* 鼠标碰到盒子，box2盒子往右移动显示出box3 */
      .outer:hover .box2{
        left:220px;
      }
        </style>
</head>     
<body>
       <div class="outer">
        <!-- 对box1，box3，outer是包含块 -->
        <!-- 对box2，如果outer的css里面有position:relative;那么outer是包含块，否则html是包含块 -->
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>

       </div>
</body>

1.3 固定定位

参考点：视口（红色框内部分）

position:fixed;

1.4 粘性定位

参考点：第一个有滚动机制的祖先元素

不脱离文档流

粘性定位+浮动：可以但不推荐

粘性定位+margin：可以但不推荐

<!DOCTYPE html>

<html lang="en">
<head>
        <style>
        *{
        margin: 0;
        padding: 0;
      }
      .page-header{
        height: 100px;
        background-color: orange;
        text-align: center;
        line-height: 100px;
      }
      .item{
        background-color: #ccc;
      }
      .first,.second,.third{
        background-color: skyblue;
        position: sticky;
        /* 参考点：离它最近的能滚动的祖先元素 */
        /* 此处是content的div */
        top: 0px;
      }
      .body{
        height: 2000px;
      }
      .content{
        height: 200px;
        overflow: scroll;
      }
        </style>
</head>
<body>
        <div class="page-header">头部</div>
        <div class="content">
          <div class="item">
            <div class="first">Aa      </div> 
              <h1>a1</h1>
              <h1>a2</h1>
              <h1>a3</h1>
              <h1>a4</h1>
              <h1>a5</h1>
              <h1>a6</h1>
              <h1>a7</h1>
              <h1>a8</h1>
            </div>
            <div class="item">
            <div class="first">Ab   </div>     
              <h1>b1</h1>
              <h1>b2</h1>
              <h1>b3</h1>
              <h1>b4</h1>
              <h1>b5</h1>
              <h1>b6</h1>
              <h1>b7</h1>
              <h1>b8</h1>
            </div>
              <div class="item">
            <div class="first">Ac        </div>   
              <h1>c1</h1>
              <h1>c2</h1>
              <h1>c3</h1>
              <h1>c4</h1>
              <h1>c5</h1>
              <h1>c6</h1>
              <h1>c7</h1>
              <h1>c8</h1>
            </div>
          </div>
      
</body>

</html>

效果：划完一个item内容蓝条换下一个

1.5 定位层级

//通过z-index调整该块的定位层级
z-index：n；

同级定位，后来者居上

CSS3

2 浏览器私有前缀

Can I use... Support tables for HTML5, CSS3, etc查浏览器能不能支持css3和h5新特性

Chrome、Edge、Safari浏览器内核：-webkit-

eg：-webkit-border-radius：20px

3 长度单位

rem:根元素字体大小倍数

10vm：视口宽度的10%

10vh：视口高度的10%

4 盒子属性

4.1 怪异盒模型

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

4.2 resize

<head>
        <style>
        .box1{
          width: 200px;
          height: 200px;
          padding: 100px;
          background-color: aqua;
          /* 水平方向上可以调,也可垂直方向：vertical */
          resize: horizontal;
          /* resize属性起作用必须有overflow */
          overflow: hidden;
        }
        </style>
</head>
<body>
        <div class="box1"></div>
</body>

4.3 box-shadow

        <style>
        .box1{
          width: 200px;
          height: 200px;
          background-color: aqua;
          margin: 200px;
          /* 阴影1，水平|垂直 
          box-shadow:10px 10px; */
          /* 阴影2 
          box-shadow: 20px 20px red; */
          /* 阴影3 ,5px为模糊程度
          box-shadow: 20px 20px 5px red; */
          /* 阴影4
          box-shadow: 20px 20px 5px; */
          /* 阴影5 100px为外延值 
           box-shadow: 20px 20px 5px 100px red ; */
           /* 阴影6，inset为内阴影
           box-shadow: 20px 20px 5px 100px red inset; */
           position: relative;
           top: 0;
           left: 0;
           transition: 1s linear all;
        }
          .box1:hover{
            box-shadow: 20px 20px 5px  red ;
            top: -1px;
            left: 0;
          }
        </style>
</head>
<body>
        <div class="box1"></div>
</body>

4.4 opacity

<head>
        <style>
        .box2{
          position: relative;
          width: 150px;
        }
        span{
          /* 把文字放到图片上面 */
          position: absolute;
          /* 左上角 */
          top: 0;
          left: 0;
          color: red;
          width: 100%;
          background-color: white;
          opacity: 0.5;
        }
        .box2 img{
          width: 150px;
          height: 150px;

        }
        </style>
</head>
<body>
        <diV class="box2">
          <img src="./image/favicon.ico">
          <span>彭于晏</span>
        </diV>
</body>

5 背景属性

5.1 background-origin

5.2 background-clip

<head>
        <style>
        .box1{
          width: 500px;
          height: 500px;
          background-color: aqua;
          background-image: url('./image/landscape.png');
          font-size: 100px;
          background-clip: text;
          /* background-clip: text;生效必需条件 */
          color:transparent
        }
        
        
        </style>
</head>
<body>
        <div class="box1">盒子测试</div>
</body>

<head>
        <style>
        .box1{
          width: 500px;
          height: 500px;
          background-color: aqua;
          padding: 50px;
          background-image: url('./image/landscape.png');
          font-size: 100px;
          /* 只留下content内容区的图片 */
          background-clip:content-box;
          border:5px dotted red;
        }
        </style>
</head>
<body>
        <div class="box1">盒子测试</div>
</body>

5.3 background-size

<head>
        <style>
        .box1{
          width: 500px;
          height: 500px;
          background-color: aqua;
          background-image: url('./image/landscape.png');
          /* 1.background-size: 400px 400px; */
          /* 2.background-size: 100% 100%;参考父辈的宽高 */
          /* 3.background-size: auto;默认 */
          background-repeat: no-repeat;
          /* contain为等比缩放，让图片的宽或高与容器的宽或高相等，可能不能铺满 */
          background-size:contain;
          /* 全铺满 
          background-size:cover; */
        }
        </style>
</head>
<body>
        <div class="box1"></div>
</body>

5.3 复合属性

应用：多背景图

<head>
        <style>
        .box1{
          width: 500px;
          height: 500px;
          border: 2px red solid;
          background:url('./123.gif') no-repeat ,
          url('./favicon.ico') no-repeat right top;
        }
        </style>
</head>
<body>
        <div class="box1"></div>
</body>

6 边框属性

6.1 边框圆角

/* 宽或高的50% */
          border-radius: 20%;
          /* 圆角，半径为30px */
          border-radius: 30px;

6.2 边框外轮廓

 /* 边框外轮廓 */
          outline-offset: 5px;
          outline-color: blue;
          outline-width: 20px;
          outline-style: dotted;

7 文本属性

7.1 文本阴影

<head>
        <style>
        h1{
          text-shadow: 50px 50px red;
          font-size: 100px;
          color: rgb(104, 247, 9);
        }
        </style>
</head>

        <h1>你学废了么</h1>
</body>

7.2 文本换行

<head>
        <style>
        h1{
          width:400px;
          height: 400px;
          border: 1px red solid;
          /* white-space: pre;按原文显示 */
          white-space: pre-wrap;
          /* white-space: pre-line;与white-space: pre-wrap;作用相同，但忽略文章前后的空格 */
          /* white-space: nowrap;不换行 */
        }
        </style>
</head>
<h1>路上只我一个人，背着手踱着。这一片天地好像是我的;我也像超出了平常旳自己，到了另一世界里。我爱热闹，也爱冷静;爱群居，也爱独处。像今晚上，一个人在这苍茫旳月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。 </h1>
</body>

7.3 文本溢出

在7.2代码中加入

overflow: hidden;
          /* text-overflow生效，overflow不能为visible */
          text-overflow:ellipsis;

text-overflow:clip

7.4 文本修饰

<head>
        <style>
        h1{
          width:420px;
          height: 400px;
          text-decoration: dashed  overline;
          text-decoration-color: greenyellow;
          
        }
        </style>
</head>
<body>
  <h1>路上只我一个人，背着手踱着。</h1>
</body>

7.5 文本描边

<head>
        <style>
        h1{
          font-size: 100px;
          -webkit-text-stroke:  rgb(246, 154, 6) 10px;
          color: transparent;
        }
        </style>
</head>
<body>
  <h1>路上只我一个人，背着手踱着。</h1>
</body>

8 渐变

<!DOCTYPE html>

<html lang="en">
<head>
        <style>
        .box{
          width: 300px;
          height: 200px;
          border: 1px solid black ;
          float: left;
          margin-right: 50px;
        }
        /* box1-box5线性渐变 */
        .box1{
          background-image: linear-gradient(red,yellow,green);
        }
        .box2{
          background-image: linear-gradient(to top right,red,yellow,green);
        }
        .box3{
          /* 逆时针20° */
          background-image: linear-gradient(20deg,red,yellow,green);
        }
        .box4{
          /* height: 200px;,0-50px纯红，50-100px变黄，100px-150px变绿 */
          background-image: linear-gradient(red 50px,yellow 100px,green 150px);
        }
        .box5{
          background-image: linear-gradient(red 50px,yellow 100px,green 150px);
          font-size: 80px;
          text-align: center;
          line-height: 200px;
          color: transparent;
          background-clip: text;
        }
        /* box6-box10 是径向渐变 */
        .box6{
          /* 从圆心（盒子中心点）开始，向外是红色黄色绿色 */
          background-image: radial-gradient(red,yellow,green);
        }
        .box7{
          /* 圆心在右上角 */
          background-image: radial-gradient(at right top,red,yellow,green);
        }
        .box8{
          /* 200px是横向的 */
          background-image: radial-gradient(at 200px 50px,red,yellow,green);
        }
        .box9{
          /* 10px是半径，从圆心向外算距离，10px以内都是红色 */
          background-image: radial-gradient(red 10px,yellow 100px,green 200px);
        }
        .box10{
          /* 150px 50px表示长半径，短半径，椭圆 */
          background-image: radial-gradient(150px 50px at 200px 50px,red,yellow,green);
        }
        .box11{
          /* 重复渐变：在没有发生渐变的区域，重新开始渐变 */
          /* 参考box4 */
          background-image: repeating-linear-gradient(red 50px,yellow 100px,green 150px);
        }
        .box12{
          background-image:  repeating-radial-gradient(red 10px,yellow 100px,green 200px);;
        }
        .box13{
          background-image: repeating-linear-gradient(transparent 0,transparent 29px,gray 30px);
        }
        .box14{
          width: 200px;
          height: 200px;
          border-radius: 50%;
          background-image:radial-gradient(at 80px 80px,white,gray);
        }

        </style>
</head>
<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
  <div class="box box4"></div>
  <div class="box box5">你学废了么</div>
  <div class="box box6"></div>
  <div class="box box7"></div>
  <div class="box box8"></div>
  <div class="box box9"></div>
  <div class="box box10"></div>
  <div class="box box11"></div>
  <div class="box box12"></div>
  <div class="box box13"></div>
  <div class="box box14"></div>
</body>
</html>

9 字体

9.1 web字体

在网上下载一个字体，导入代码文件夹中

<head>
        <style>
        @font-face{
          font-family: "这是什么字体";
          src: url('./font1/HeFengShuDaoZhaoHeFeiLongTi-Shan\(GEETYPE-FeilongGBT-Flash\)-2.ttf');
        }
        h1{
          font-size: 100px;
          font-family: "这是什么字体"; 
        }
        </style>
</head>
<body>
  <h1>沿着荷塘，是一条曲折的小煤屑路。</h1>

缺点;字体占用空间大

iconfont-webfont平台

将下列文件放入代码font文件夹：

打开demo.html

将@font-face{}复制到style标签中

更改url，路径前加font文件夹路径

<head>
        <style>
        @font-face{
          font-family: "这是什么字体";
          src: url('./font1/HeFengShuDaoZhaoHeFeiLongTi-Shan\(GEETYPE-FeilongGBT-Flash\)-2.ttf');
        }
       /* 高兼容性写法 */
        @font-face {
    font-family:"webfont123";
    font-display: swap;
    src: url('./font2/webfont.eot'); /* IE9 */
    src: url('./font2/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./font2/webfont.woff2') format('woff2'),
    url('./font2/webfont.woff') format('woff'), /* chrome、firefox */
    url('./font2/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('./font2/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
        h1{
          font-size: 100px;
          font-family: "这是什么字体"; 
        }
        h2{
          font-family: "webfont123";
          font-size: 100px;
        }
        h3{
          font-size: 100px;
        }
        </style>
</head>
<body>
  <h1>沿着荷塘，是一条曲折的小煤屑路。</h1>
  <h2>执子之手，将子拖走!子若不走，拍晕了继续拖走!</h2>
  <h3>执子之手，将子拖走!子若不走，拍晕了继续拖走!</h3>
</body>

9.2 字体图标

iconfont-阿里巴巴矢量图标库点击icon

10 2D变换

10.1 位移

<head>
        <style>
       .outer{
        width: 200px;
        height: 200px;
        border: 2px black solid;
        margin: 0 auto;
        margin-top: 200px;
        position: relative;
       }
       .inner{
        width: 60px;
        height: 60px;
        background-color: aqua;
        /* 50%是自身width的50% */
         /* 水平位移 
        transform: translateX(50%); */
        /* /垂直位移 
        transform: translateY(50%); */
        /* 只有后者transform: translateY(50%); 有效果
        transform: translateX(50%);
        transform: translateY(50%);  */
        /* 水平+垂直位移 
        transform: translate(20px,20px); */
        position: absolute;
        /* 此时50%相对于父元素的50% */
        top:50%;
        left:50%;
        /* 基于上面代码垂直居中法一：
        margin-left: 30px;
        margin-top: 30px; */
        /* 位移百分比说的是自己 */
        /* 基于上面代码垂直居中法二 */
        transform:translate(-50%,-50%)
       }
        </style>
</head>
<body>
  <div class="outer">
    <div class="inner"></div>
  </div>
</body>

10.2 缩放

/* ()中数值>1放大，<1缩小，1表示不缩放 */
        transform: scale();
        transform: scaleX();
        transform: scaleY();

10.3 旋转

/* 2D旋转，30deg顺时针旋转30° */
        /* transform: rotate(30deg)写一个值相当于transform: rotateZ(30deg) */
        transform: rotate(30deg)

10.4 多重变换

基本代码：

<head>
        <style>
       .outer{
        width: 200px;
        height: 200px;
        border: 2px black solid;
        margin: 0 auto;
        margin-top: 200px;
       }
       .inner{
        width: 200px;
        height: 200px;
        background-color: aqua;
       }
        </style>
</head>
<body>
  <div class="outer">
    <div class="inner"></div>
  </div>
</body>

inner{}中添加：

transform: translate(100px,100px) scale(0.5);

transform: scale(0.5) translate(200px,200px) ;

可以理解为缩放0.5，位移也减少0.5倍，实际移动的是100px

 transform: translate(100px,100px) rotate(30deg);

transform: rotate(30deg) translate(100px,100px) ;

坐标系发生变化

10.5 改变旋转原点

 /* 旋转原点在左上角 */
        transform-origin: left top;
        /* 离盒子左上角各50px */
        transform-origin:50px 50px;
        /* 25%指的是父元素宽高的25% */
        transform-origin:25% 25%;
        /* 原点只在左上角x轴变化50px */
        transform-origin:50px;
        /* 绕盒子左边中点转 */
        transform-origin:left;
        /* 改变原点对位移没有影响，对放缩有影响 */
        transform-origin: left top;
        /* 原点在左上，原点不动，缩小放大以对角线形式靠近或远离原点 */
        transform:scale();