HTML + CSSナレッジポイント-第3週

1.ポジショニング

レイアウト方法：ドキュメントフロー、フローティング、レイヤーレイアウト（配置）

3種類のポジショニング：相対ポジショニング、絶対ポジショニング、固定ポジショニング

ポジショニングエレメントのレベル設定：ポジショニングを設定したエレメントは、z-index属性で調整できます。デフォルト値は0です。数値が大きいほどレベルが高くなります。数値は同じです。レベルはタグの順序に関連します。タグが低いほど、レベルが高くなります。高

1.相対的な位置付け（息子はもはや父親ではありません）

位置：相対;
ドキュメントフローを離れず、ドキュメント内の元の位置を保持します
オフセット参照位置：ドキュメントフロー内の要素自体の元の位置

2.絶対ポジショニング

位置：絶対;
ドキュメントフローから抜け出し、ドキュメント内の元の位置を保持しないでください
オフセット基準位置（親の配置）：絶対位置の要素に最も近い位置属性を持つ祖先要素。そのような要素がない場合は、本体を基準にして配置されます。

3.固定ポジショニング

位置：固定;
固定配置要素はドキュメントフローから分離され、ドキュメントフローの元の位置は保持されません。
オフセット参照位置：ブラウザの表示領域

定位偏移属性偏移属性：

   left  :   正右,负左

   right ：  正左,负右

   top   ：  正下,负上

   bottom：  正上,负下

left/top和right/bottom通常使用一个，如果同时使用left/top生效

脱离文档流的元素不会自动占满一行，宽度默认是由内容撑开

4.静的ポジショニング

位置：静的;
ポジショニングなし、オフセット属性が無効です（左/右/上/下）
レベル（z-index）も無効です

第二に、フィレット

1.省略形の属性

   border-radius:10px;  四个角圆角半径统一

   border-radius:10px 20px;  左上和右下   右上和左下

   border-radius:10px 20px 30px;  左上   右上和左下   右下

   border-radius:10px 20px 30px 40px;  左上   右上   右下  左下  

   border-radius:50%;---是个圆

2.分解属性

   border-top-left-radius: 20px;

   border-top-right-radius: 40px;

   border-bottom-left-radius: 60px;

   border-bottom-right-radius: 80px;

3、変形変換

   简写属性
   transform:rotate(-30deg) scale(0.5,2);

1.回転する

   transform:rotate(30deg); 正数顺时针，负数逆时针

2.ズーム

   transform:scale(n);  水平和垂直同时缩放 n 取值 0-1之间缩小 , n>1 就是放大
   
   transform:scale(n-x,n-y);  n-x：水平方向的缩放值,n-y垂直缩放值

4、キーフレームアニメーション

1.アニメーションのキーフレームを定義します

   @keyframes move-动画名称{
        0%{}
        
        25%{}

        50%{}

        75%{}

        100%{}
   }

2.アニメーションを呼び出す

   简写属性
   animation: move 3s linear infinite alternate;

   动画属性
   animation: animation-name animation-duration animation-iteration-count  animation-timing-function  animation-delay  animation-direction;

アニメーション名：呼び出されたアニメーションの名前
アニメーション時間：アニメーションプロセス全体に必要な時間s（秒）/ ms（ミリ秒）
Animation-iteration-count：アニメーションが実行された回数n /無限（無制限の回数）
アニメーション-タイミング-機能：アニメーション速度曲線
- イーズスロー-ファスト-スロー
- 線形均一速度
- イーズインスローファスト
- イーズアウトファストスロー
- イーズインアウトスロー-ファスト-スロー
- 立方ベジエ（.08、.73、.42、.93）ベジェ曲線https://cubic-bezier.com/
アニメーション遅延：アニメーション遅延時間s / ms
アニメーション方向：アニメーションの方向が交互になります（順番が逆になります）
アニメーション-塗りつぶしモード：アニメーションの最後で転送します（最後で停止します）

5、トランジションアニメーション

トランジション使用シーン：通常、要素が通常の状態にあり、マウスの状態（：hover）プロパティが変更されたときにスムーズなトランジション効果に使用されます

   动画属性
   transition:transition-property transition-duration transition-timing-function transition-delay;

遷移プロパティ：遷移プロパティ名、すべて（変更されたすべてのプロパティが遷移されます）
遷移時間：遷移時間s / ms
遷移タイミング機能：遷移速度曲線、値はキーフレームアニメーションと同じです
遷移遅延：遷移遅延時間s / ms

   多个属性过渡
   transition: width 2s linear,height 4s ease,...;

使用例

情况1
   .box{
        width: 100px;
        transition:all 0.5s linear;<!-- 鼠标脱离时的过渡 -->
   }
   .box:hover{
        width: 200px;
        transition:all 2s linear;  <!-- 鼠标悬停时的过渡 -->
   }
情况2
   .box{
        width: 100px;
            <!-- 鼠标脱离时没有过渡效果 -->
   }
   .box:hover{
        width: 200px;
        transition:all 2s linear;  <!-- 鼠标悬停时的过渡 -->
   }

情况3
   .box{
        width: 100px;
        transition:all 0.5s linear;<!-- 鼠标悬停和脱离时都有过渡，并且效果相同 -->
   }
   .box:hover{
        width: 200px;
   }

キーフレームアニメーションとトランジションアニメーションの違い

キーフレームアニメーション	トランジションアニメーション
アニメーションは複数の状態に設定できます	アニメーションには2つの状態（開始と終了）しかありません
複数回実行可能（無制限）	一度トリガーして一度実行する
自動的に実行することはできません。疑似クラスによってトリガーする必要があります	繰り返し実行されません

六、影

1.ボックスシャドウ

   属性
   box-shadow:x-shadow y-shadow blur spread color inset;

   - x-shadow : 必需，水平阴影位置 ，正数向右偏移，负数向左偏移

   - y-shadow : 必需，垂直阴影位置 ，正数向下偏移，负数向上偏移

   - blur :  可选，阴影的模糊距离

   - spread: 可选，阴影的扩展尺寸

   - color:  可选，阴影的颜色

   - inset:  可选，不设置表示外阴影，设置inset表示内阴影 

   多组阴影
   box-shadow:x-shadow y-shadow blur spread color inset,x-shadow y-shadow blur spread color inset, ... ;

2.テキストシャドウ

   text-shadow:x-shadow y-shadow blur color;

   - x-shadow : 必需，水平阴影位置 ，正数向右偏移，负数向左偏移

   - y-shadow : 必需，垂直阴影位置 ，正数向下偏移，负数向上偏移

   - blur: 可选，阴影的模糊距离

   - color:可选，阴影的颜色 默认和文字颜色相同

   多组阴影：x-shadow y-shadow blur color,x-shadow y-shadow blur color,...;

セブン、三角形と矢印

1.小さな三角形

実現のアイデア：ボックスの幅と高さを0に設定し、1つの境界線の色を維持し、他の境界線を透明に設定します

   .box{
       width: 0px;
       height: 0px;
       border: 50px solid;
       border-color: red transparent transparent;
    }

2.小さな矢印

実現のアイデア：2つの三角形を実現し、配置によって2つの三角形を部分的にオーバーラップさせ、前の三角形の色を背景と同じ色に設定します。

<div class="arrow1"></div>
   .arrow1{
           position: relative;
           width: 0px;
           height: 0;
           border: 50px solid;
           border-color: red transparent transparent;
           margin-top: 10px;
    }
   .arrow1::after{
           position: absolute;
           left: -50px;
           top: -55px;
           content: '';
           width: 0px;
           height: 0px;
           border: 50px solid;
           border-color: #fff transparent transparent;
   }

8.透明で互換性があります

1. rgba（）モードの色：テキストと背景の色を設定できます（IEの下位バージョンとは互換性がありません）

要素の背景を透明に設定すると、内部のコンテンツには影響しません

2.不透明度：0-1; 0完全に透明、1不透明、0.X半透明（以前のIEバージョンとは互換性がありません）

要素全体が透明で、要素自体と内部のコンテンツがすべて透明です

3. filter：alpha（opacity = 50）IE低バージョンブラウザの特別な透明フィルター。効果は不透明度属性と同等です。0は完全に透明、100は不透明を意味します。

9つのセンタリングスキル

1.親のサイズは不明であり、子の要素のサイズは既知です

   .outer{
        position:relative;  /*父元素相对定位*/
   }
   .inner{
        width:300px;
        height:200px;
        position:absolute;  /* 子元素绝对定位*/
        left:50%;   /*盒子偏右*/
        top:50%;    /*盒子偏下*/
        margin-left:-150px;   /* 设置为子元素宽度的一半（负值），往左移*/
        margin-top:-100px;  /* 设置为子元素高度的一半（负值），往上移*/
  }

2.親サイズと子要素サイズの両方が不明な場合があります

  .outer{
        position:relative;  /*父元素相对定位*/
  }
  .inner{
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        width:300px;
        height:200px;
  }

10.フローティングとポジショニングの比較