CSS3 の詳細な注意事項 - 非常に詳細 - シンプルで理解しやすい

CSS	住所
CSSの基礎知識(1)	CSS ノート ～超詳しい～基礎ゼロ～シンプルで分かりやすい (1)_ddddddyu のブログ - CSDN ブログ
CSSの基礎知識(2)	CSS ノート ～超詳しい～基礎ゼロ～シンプルでわかりやすい (2)_ddddddyu のブログ - CSDN ブログ
CSSの基礎知識(3)	CSS ノート - 超詳細 - 基礎ゼロ - 簡潔でわかりやすい (3)_ddddddyu のブログ - CSDN ブログ
CSS3 の詳細な注意事項	CSS3 Advanced Notes - 超詳細 - 簡潔でわかりやすい_ddddddyu のブログ-CSDN ブログ

1 セレクターを追加する

• 属性セレクター
• 構造体擬似クラスセレクター
• 擬似要素セレクター

属性セレクター

クラスや ID ではなく、要素の属性によって選択します

構造体擬似クラスセレクター

要素は主に文書構造に基づいて選択されます。

ul li:first-child {
  background-color: lightseagreen;
}

ul li:last-child {
  background-color: lightcoral;
}

ul li:nth-child(3) {
  background-color: aqua;
}

nth-child(n)パラメータnの詳細説明

• n には数値、キーワード、数式を指定できます
• nが数字の場合、n番目の子要素を選択することになり、中の数字は1から始まります
• n にはキーワードを指定できます:偶数、 奇数、奇数
• n は数式にすることができます。一般的な数式は次のとおりです (n が数式の場合、0 から計算されますが、0 番目の要素またはそれ以降の要素数は無視されます)

公式	価値
2n	偶数（偶数に相当）
2n+1	奇数（奇数に相当）
5n	5 10 15 ... (5の倍数)
n+5	第5回（第5回を含む）から最後まで
-n+5	最初の 5 件 (5 番目を含む)

nth-child与nth-of-type区别

• nth-child  タイプに関係なく、親要素内の子要素の数を選択します
• nth-of-type  指定したタイプの要素を選択する

  div :nth-child(1) {
    background-color: lightblue;
  }

  div :nth-child(2) {
    background-color: lightpink;
  }

  div span:nth-of-type(2) {
    background-color: lightseagreen;
  }

  div span:nth-of-type(3) {
    background-color: #fff;
  }

擬似要素セレクター

予防：

• before 属性がafter 必要  です content

• before コンテンツの前、コンテンツの後

• beforeafter 要素を作成しますが、これはインライン要素 です 

• 作成された要素は Dom には見つからないため、疑似要素と呼ばれます

• 疑似要素の重みはラベル セレクターと同じで、重みは 1 です。

    div::after,
    div::before {
      width: 20px;
      height: 50px;
      text-align: center;
      display: inline-block;
    }
    div::after {
      content: '德';
      background-color: lightskyblue;
    }

    div::before {
      content: '道';
      background-color: mediumaquamarine;
    }

2 2D変換を追加

• 2D変換とは、ラベルの2次元平面上での位置や形状を変更することです。

• 移動: 移動

• 回転：回転

• ズーム: スケール

トランスレートの2D変換

  transform: translate(x, y)
  transform: translateX(n)
  transfrom: translateY(n) 

 注意点：

• 2D の動きとは主に水平方向と垂直方向の動きを指します。

• 翻訳の最大の利点は、他の要素の位置に影響を与えないことです。

• 移動の 100% 単位は、その幅と高さを基準にして計算されます。

• インラインタグは効果がありません

ボックスを水平方向と垂直方向の中央に配置する

div {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: pink;
    /* 1. 我们tranlate里面的参数是可以用 % */
    /* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */
    /* 这里的 50% 就是 50px 因为盒子的宽度是 100px */
    /* transform: translateX(50%); */
}
        
p {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background-color: purple;
    /1.* margin-top: -100px;
    margin-left: -100px; */
  
    /2.* translate(-50%, -50%)  
      盒子往上走自己高度的一半   */
    transform: translate(-50%, -50%);
}
        
span {
    /* translate 对于行内元素是无效的 */
    transform: translate(300px, 300px);
}

回転の2D変換

2D 回転とは、2 次元平面内で要素を時計回りまたは反時計回りに回転することを指します。

/* 单位是：deg */
img:hover {
  transform: rotate(360deg)
}

回転構文:

• rotate 内側と度、単位は deg

• 角度が正の場合は時計回り、角度が負の場合は反時計回り

• デフォルトの回転中心点は要素の中心点です。

回転中心を設定する

/* xy可以是百分数，像素，方位词 */
transform-origin: x y;

2D変換スケール

要素のズームインとズームアウトを制御するために使用されます

transform: scale(x,y);

知識ポイント:

• x と y はカンマで区切られていることに注意してください

• transform: scale(1, 1)：幅と高さが2倍になり、拡大しないのと同じになります。

• transform: scale(2, 2): 幅と高さを 2 倍にします

• transform: scale(2): パラメータが 1 つだけ記述されている場合、2 番目のパラメータは最初のパラメータと同じです

• transform:scale(0.5, 0.5)： ズームアウトする

• scale 最大の利点: 変換中心点をスケールに設定できます。デフォルトでは中心点によってスケールされ、他のボックスには影響しません。

2D変換総合書き方と順序問題

• 複数の変換を同時に使用すると、形式は次のようになります。 transform: translate() rotate() scale()

• 順序は変換の効果に影響します (最初に回転すると座標軸の方向が変わります)。

• 位置や他の属性を同時に持つ場合は、ディスプレイスメントを前に置く必要があります

3 アニメーションを追加する（アニメーション）

アニメーション使用

• 最初にアニメーションを定義します

• 次に、定義されたアニメーションを呼び出します

/*1. 定义动画*/
@keyframes 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px
}

/*2. 使用动画*/
div {
 /* 调用动画 */
  animation-name: 动画名称;
  /* 持续时间 */
  animation-duration: 持续时间；
}

アニメーションシーケンス

• 0% はアニメーションの開始、100% はアニメーションの完了、このようなルールがアニメーション シーケンスです。

• @keyframsで特定のCSSスタイルを指定すると、アニメーション効果が現在のスタイルから新しいスタイルに徐々に変化します

• アニメーションは、要素をあるスタイルから別のスタイルに徐々に変更する効果であり、任意の数のスタイルを何度でも変更できます。

• 変化がいつ起こるかを指定するにはパーセンテージを使用するか、  0% と 100% に相当するfrom sum を使用します。to

共通のアニメーション プロパティ

アニメーションプロパティの省略表現

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

animation: myfirst 5s linear 2s infinite alternate;

• 省略表現属性には、animation-play-state が含まれません。
• アニメーションの一時停止:animation-play-state:puased;マウスの移動などと組み合わせてよく使用されます。
• アニメーションをジャンプして戻るのではなく歩いて戻るようにしたい: アニメーションの方向: 代替
• ボックスアニメーションが終了したら、終了位置で停止します:animation-fill-mode : forwards

速度曲線animation-timing-function

アニメーションのスピード カーブを指定します。デフォルトはイーズです。

4 3D変換を追加

3D 機能: 近くの大きなものと遠くにある小さなもの、目に見えないオブジェクトと表面のオクルージョン

3D 知識ポイント、2D と比較して、より多くの Z 軸方向があります

• 3D 変位:translate3d(x, y, z)

• 3D 回転：rotate3d(x, y, z)

• 透视 ：perspctive

• 3D現在 transfrom-style

3Dモバイルtranslate3d

transform: translateX(100px)：仅仅是在 x 轴上移动
transform: translateY(100px)：仅仅是在 y 轴上移动
transform: translateZ(100px)：仅仅是在 z 轴上移动
transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离
注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充

遠近法

遠近感は視距離とも呼ばれ、いわゆる視距離は人間の目から画面までの距離です。

知識ポイント:

• パースペクティブは検査対象の要素の親ボックスに記述する必要があります

• d: 視聴距離であり、人間の目から画面までの距離を指します。

• z: これは z 軸です。z 軸が大きいほど (正の値)、見えるオブジェクトが大きくなります。

body {
  /*透视需要写在被视察元素的父盒子上面 */
  perspective: 1000px;
}

translateZ与perspective的区别

• perspecitve 親要素の表示距離を設定し、translateZ 子要素に異なるサイズを設定します

• 遠近法を使用すると、translateZ によって引き起こされた変化を確認できます。

3D回転rotateX

语法
transform: rotateX(45deg)  -- 沿着 x 轴正方向旋转 45 度
transform: rotateY(45deg) -- 沿着 y 轴正方向旋转 45 度
transform: rotateZ(45deg) -- 沿着 z 轴正方向旋转 45 度
transform: rotate3d(x, y, z, 45deg)  -- 沿着自定义轴旋转 45 deg 为角度

transform: rotate3d(x, y, z, deg) -- 沿着自定义轴旋转 deg 为角度
x, y, z 表示旋转轴的矢量，是标识你是否希望沿着该轴进行旋转，最后一个标旋转的角度
transform: rotate3d(1, 1, 0, 180deg) -- 沿着对角线旋转 45deg
transform: rotate3d(1, 0, 0, 180deg) -- 沿着 x 轴旋转 45deg

回転方向は左手の法則です

3D レンダリング トランスフォーム スタイル

• サブ要素が 3D 環境を開くかどうかを制御します

• transform-style: flat3D 子要素がデフォルトの 3 次元空間  を開かないことを表します。 

• transform-style: preserve-3d サブ要素は 3 次元空間を開きます

• コードは親に書き込まれますが、子ボックスに影響します

5 トランジショントランジションを追加する

Transition トランジションは、次の 4 つを含む複合プロパティです。

• transition-property: 遷移プロパティ (デフォルト値は all)
• transition-duration: 遷移期間 (デフォルト値は 0 秒)
• transition-timing-function: 遷移関数 (デフォルトはイーズ関数)
• 遷移遅延: 遷移遅延時間 (デフォルト値は 0 秒)

.test{
    height: 100px;
    width: 100px;
    background-color: pink;
    transition-duration: 3s;
/*     以下三值为默认值，稍后会详细介绍 */
    transition-property: all;
    transition-timing-function: ease;
    transition-delay: 0s;
}    
.test:hover{
    width: 500px;
}
~~~html
<div class="test"></div>

スペースで区切って省略可能、duration 属性は 0 ではなく必須、その他はオプション

遅延のデフォルトは 0、プロパティのデフォルトはすべて、関数のデフォルトはイーズ

ease: 开始和结束慢，中间快。
linear: 匀速。
ease-in: 开始慢。
ease-out: 结束慢。
ease-in-out: 和ease类似，但比ease幅度大。

6 CSS3の新しいボックスモデル

box-sizingでボックスのモデルを指定します。値は 2 つあります: content-box、border-box

主に計算ボックスのサイズを変更するためのもので、次の 2 つの場合に分けられます。

• box-sizing: content-boxボックスのサイズは幅 + パディング + 境界線です (以前のデフォルト)
• box-sizing: border-boxボックスのサイズは幅です

ボックス モデルを box-sizing: border-box に変更すると、パディングとボーダーは大きなボックスをサポートしなくなります (パディングとボーダーが幅 width を超えない場合)。