【フロントエンド】就活に必須の知識4-CSS：フレックス、隠し要素（7つのメソッド）、ユニット

フレックス

フレックスの略語：

flex-grow と flex-shrink がflex プロパティで指定されていない場合、それらは 1 になり、flex-basis は 0% になります。

flex:n;
/* 等同于: */
flex-grow :n;
flex-shrink :1;
flex-basis :0%;

flex:n1 n2;
/* 等同于: */
flex-grow :n1;
flex-shrink :n2;
flex-basis :0%;

flex:L;
/* 等同于: */
flex-grow :1;
flex-shrink :1;
flex-basis :L;

flex:n L;
/* 等同于: */
flex-grow:n;
flex-shrink:1;
flex-basis:L;

フレックスベース

flex-basis:0

ここに画像の説明を挿入

flex:1 1 0%アイテムが縮小される場合、アイテムのサイズは、それ自体のコンテンツのサイズ (つまり、ボックスを拡張するコンテンツのサイズ) に応じて決定されます。

ここに画像の説明を挿入

display:none

设置height width为0

要素ボックスモデルに影響するプロパティを 0 に設定します。要素内に子要素またはコンテンツがある場合は、overflow:hiddenその子要素を非表示にするように設定する必要があります。

position:absolute

visibility:hidden

opacity:0

color: rgba(0,0,0,0);
background-color: rgba(0,0,0,0);

R は赤、G は緑、B は青を意味し、3 つの色の値は正の整数またはパーセントになります。A はアルファ透明度を意味します。値は不透明度と同様に 0 ～ 1 の間です。

rgba()透明性を実現できますがopacity、最大の違うはい：

transform: scale(0,0)

px % em の 3 つの単位は、ほとんどのプロジェクトの開発に適用でき、互換性が良好です。

絶対単位
ここに画像の説明を挿入
相対単位

ここに画像の説明を挿入

よく使用される要約は次のとおりです。

px: 固定ピクセル単位。1 ピクセルは端末画面に表示できる最小領域を表します。
% : 要素の幅と高さは、応答性を実現するためにブラウザの変更に応じて変更される可能性があり、一般的な子要素の割合は直接の親要素に対する相対的なものになります。
em :font-size単位として使用する場合は父元素的字体大小比例計算値を表し、其他属性単位として使用する場合は相対自身字体大小按比例計算値を表します。

例:

.parent {
    
     font-size: 32px;}
/** child字体为16px **/
.child {
    
     font-size: 0.5em; width: 2em; 
/* 32 * 0.5 * 2 */}

html {
    
     font-size: 20px;}
/* 作用于非根元素，相对于根元素字体大小，所以为40px */
p {
    
     font-size: 2rem;}

ここに画像の説明を挿入