css:position、float、displayなど

4647 ワード

CSS FE-School LIKELION テキストリンク

1.補充位置

相対

:自分がいるべき位置を基準にして

absolute:静的ではなく、最も近い親基準で、体以外の親がいなければ、元の位置に戻ります.

sticky: position: -webkit-sticky; 書いてこそSafariで使えるようになり、ウィルではまだ申請していないようです.最新の属性だそうです.

2. float

親は浮かぶ子を知らない.
elementsにfloatプロパティを与えると、サイズ値は消えます.
兄弟レベルでclearを使用するとfloatを認識できます.
親にfloatを認識させる方法

display: inline-block;

overflow: hidden;

clear fix

selector::after {
   display: block;
   content: "";
   clear:both;
}

float実習:NAVERログインウィンドウの作成

オリジナル

インプリメンテーション

できるだけ似ているように、開発者ツールを使用して分析と作成を行いました.ログインボタンのフォントソートはちょっと残念だと思います.
解決策かいほう:垂直位置合わせすいちょくいちあわせ

3. display:

inline-block

水平位置揃え可能
改行すると、少し利潤があるわけでもなく、ダウンジャケットの空白でもないので使いにくいです.

解決方法1:改行せずに、一字書きます.

解決方法2:親font-sizeを0に変更します.

flex

のコンテンツは、空間のCSS属性のセットを並べ替えたり分割したりすることができる.

Blockクラス要素の性質を持ち、主に親の属性によって子供を制御する.

親はFlex container、子供はFlex itemと呼ばれています.

flex-conainerは直系子孫にのみ影響します.

flex-directionプロパティ

アイテムのソート順を決定します.

/* The direction text is laid out in a line */
flex-direction: row;

/* Like <row>, but reversed */
flex-direction: row-reverse;

/* The direction in which lines of text are stacked */
flex-direction: column;

/* Like <column>, but reversed */
flex-direction: column-reverse;

/* Global values */
flex-direction: inherit;
flex-direction: initial;
flex-direction: revert;
flex-direction: unset;

ソース：MDN

justify-コンテンツプロパティ

axis(軸)に基づいて配列の位置を制御したり、物品間の間隔を設定したりすることができる.

/* Positional alignment */
justify-content: center;     /* Pack items around the center */
justify-content: start;      /* Pack items from the start */
justify-content: end;        /* Pack items from the end */
justify-content: flex-start; /* Pack flex items from the start */
justify-content: flex-end;   /* Pack flex items from the end */
justify-content: left;       /* Pack items from the left */
justify-content: right;      /* Pack items from the right */

/* Baseline alignment */
/* justify-content does not take baseline values */

/* Normal alignment */
justify-content: normal;

/* Distributed alignment */
justify-content: space-between; /* Distribute items evenly
                                   The first item is flush with the start,
                                   the last is flush with the end */
justify-content: space-around;  /* Distribute items evenly
                                   Items have a half-size space
                                   on either end */
justify-content: space-evenly;  /* Distribute items evenly
                                   Items have equal space around them */
justify-content: stretch;       /* Distribute items evenly
                                   Stretch 'auto'-sized items to fit
                                   the container */

/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;

/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: revert;
justify-content: unset;

ソース：MDN