おしゃれなライオンのように、先端学校2期4 Day

皆さんこんにちはAydenです
今日の勉強内容はCSSベースです.

継承と初期

ceter align
1) margin:auto2) text-align:center3) vertical-align:middle4) transform:translate(X%, Y%)

width:100%とwidth:autoの違い

行内要素およびブロックレベル要素

連結利益

選択者優先度

その他
1)CSSbackground-imageとHTML<img>の要素の違い
2) overflow:hidden3)画像マイクロ光学技術

1.継承と初期

inheritは継承とみなされる.親要素の属性値を継承して使用します.border、margin、padding、float、positionなどの属性はサブ要素に継承されません.initialは、初期化属性値とみなされます.初期化値は属性によって異なるため、MDNサイトを参照することをお勧めします.IEはサポートされていないので、使用を避けることをお勧めします.

2. Center align

中央ソートにはいろいろな方法があると思いますが、正解はありません.
以下では、通常の使い方について説明します.

1) margin:auto

ブロックレベル要素は1行1出力でなければならないため、右側の余白に自動的に入ります.内容は右揃えで、margin:autoを使用すると左右の余白が等しいので、内容は中央に置くことができます.

2) text-align:center

テキストを中央揃えにするプロパティ.ブロックレベル要素で使用します.行内要素の場合は、コンテンツのスペースのみを消費するため、位置は移動しません.しかし、上の話は少し誤解しています.ブロックレベルボックス自体を移動することなく、ブロック要素のテキストを中央に揃えます.肉色部分は<div>で、青色部分は<p>元素である.div {text-align:center} p {text-align:center}すべての結果は同じです.<p>要素は、スペース内で中央に配置されています.前述したように、<p>要素は中央揃えではなく、ブロックレベル要素のテキストです.

3) vertical-align:middle

vertical-align:middleプロパティは、行内の要素と表ボックスを垂直に整列させるために使用されます.

4) transform:translate(X%, Y%)

子要素が親要素の半分のサイズである場合は、transform:translate(50%, 50%)を水平および垂直に位置合わせできます.親要素の半分のサイズでない場合は、次の画像を参照してください.

.box1{
    width: 400px;
    height: 400px;
    background-color: aqua;
/* static 속성이 아니기 때문에 위치 조정 기준이 되는 부모 요소 */
    position: absolute; 
}
.box2{  
    position: absolute; 
    width: 100px;
    height: 100px;
    top:50%;
    left:50%;
    background-color: yellow;
    transform: translate(-50%, -50%); 
}

ソースコードbox 2の下部にtransform: translate(-50%, -50%);がない場合は、boxの左上隅に中央に位置するため、赤いボックスに移動します.box 2サイズ-50%-50%で中央揃えできます.

3.width:100%とwidth:autoの違い

width:100%およびwidth:autoは、親要素の幅に等しい.ただし、width:100%はすべてのmargin、padding、border領域を収容し、領域値が少しある場合は親要素の幅を超えます.width:auto親要素の幅を超えないでください.親要素が余白、塗りつぶし、枠線領域の幅を持っていない限り.この問題を解決するには、box-sizing:border-boxwidth、heightサイズにmargin、padding、borderを入力します.

4.inline要素とblock level要素

行内要素にはwidthとheightの概念はありません.なぜなら、コンテンツのサイズによってサイズが決まるからです.
ブロック・レベルには、要素の前後の改行が含まれ、他の要素を別の行に押し出し、独自に1行を占有します.
デフォルトでは、行内のブロック要素は、行内の要素のように前後に改行する必要がなく、他の要素と並んで1行に配置されます.ただし、行内の要素では不可能なwidthプロパティとheightプロパティ、marginプロパティとpaddingプロパティの上下の間隔を指定できます.
赤枠はブロック級要素、青枠は行内要素、緑枠は行内ブロック要素である.

div{
    width: 50px;
    height: 50px;
    background-color: red;
}
span{
    width: 100px;
    height: 100px;
    background-color: blue;
}
.inlineBlock{
    display: inline-block;
    background-color: green;
}

Inline要素spanに幅と高さを指定しましたが、変更はなく、行内ブロックレベルとブロックレベルのみが変更されました.

5.連結利益

独学は最近やっと知って、今日の授業の中で言及した内容があります.2つの隣接する要素が利益があると仮定すると、利益は1つの利益しかないように重なります.利益相殺が発生した場合は3種類ある.

1.オーバーラップエッジ方向

.box1{
    width: 200px;
    height: 200px;
    margin: 50px;
    background-color: blanchedalmond;
}
.box2{
    width: 200px;
    height: 200px;
    margin: 60px;
    background-color: royalblue;
}

上記のCSSスタイルでは、box 1margin-bottom:50px;とbox 2margin-top:60pxが重複している.隣接する2つの要素が重なると、画面により大きな境界が表示される可能性があります.ここで重要なのは、利益が少し少ないという意味ではありません.大きな利益が重なって見えず、小さな利益も適用されます.

2、親の要素と子供の要素が重なる。

.box1{
    width: 200px;
    height: 200px;
    margin: 50px;
    background-color: blanchedalmond;
}
.box2{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: aquamarine
}

box 2の10 pxの余白はbox 1の親要素の余白50 pxと重なって見えず、画面には50 pxしか表示されません.

3.利益合併問題の解決

1)親要素にoverflow:hiddenを適用します.
2)display:flow-rootを親要素に適用します.
3)border値を親要素に適用して境界を作成します.
4)親要素の表示:inline-block値の適用

6.選択者優先度

タイプ(タグ)<クラスセレクタにマウスを置くと、これらのセレクタの詳細がわかります.0、1、0はid、class、typeの順序です.

7.それ以外

1)CSS背景-画像とHTML<img>要素の違い

CSSbackground-imageは設計要素であり、<img>要素はコンテンツに必要な要素である.

2) CSS overflow:hidden

親要素から寸法のプロパティを切り取ります.親要素にoverflow:hiddenプロパティを追加します.

3）画像マイクロ光学技術

複数の画像(例えば写真)を1つの画像として管理することで、画像管理を簡素化し、ページロード時間と容量を低減することができる.
まず、画像のサイズを指定し、backgroundを使用して画像を挿入します.次に、Background-positionを使用して画像の位置を指定し、必要な画像をロードします.

width: 25px; 
height: 25px; 
background: url(/image/flower_sprites.png) no-repeat;
background-position: -100px -100px;