おしゃれなライオンのように、フロント第2期11 Day

皆さんこんにちはAydenです
CSS floatとログインページの課題について議論します.

float

課題

1. float

floatは、オフセット要素によってソートされるプロパティです.float: left;float:right;程度で揃えることができます.浮動小数点ソートのフィーチャーでは、次の2つの問題が発生します.


🤔 1.最初の写真のように、子要素がすべてfloat属性の場合、親は子要素の高さを認識できません!
🤔 2.2枚目の写真のように、兄弟要素の間でfloatを認識できません!
注意:兄弟要素がfloatの場合、1番の親要素は子要素の高さを認識できません.兄弟要素の1つがfloatとして指定され、もう1つの要素がない場合、2番目の問題が発生します.
もちろん、解決策はあります.
😊 1-1. 親要素にoverflow:hidden;を追加します.
😊 1-2. 親要素の高さを指定します.
😊 1-3. 親要素に仮想要素clear:both;を追加します.

.wrap::after {
        content: "";
        display: block;
        clear: both;
      } 

😊 2-1. 兄弟要素の1つの要素はinline-block;に指定されます.
😊 2-2. 兄弟要素にclear:both;を追加します.

2.課題

初めてピグマ制作の結果を通じて、授業中の報告と感じを教えてくれました.

flex-boxは使用しないでください.
†flex boxの場合は、親ボックスでソートする必要があります.
並べ替え用の親ボックスが新しく作成されたため、効率が低下します.
⟆状況に応じて適宜使用する

レイアウトを実装する場合、使用場所を回避します.
後で追加する要素に影響を与える可能性があります.
上部と左側などの位置値を指定する必要があります.

フィグマ値を参照
「幅」、「高さ」、「スタイル」のプロパティ値を参照してください.
位置に関連する属性値を適切に無視します.
「フィグマ」では、小数点値は参照されません.各ブラウザでは、小数点を切り捨てたり、小数点を切り捨てたりします.

シンボルタグ
e「もっと便利なビニブへようこそ.」タイトルだと思ったらh1ラベルもぴったりです.
タイトルでない場合は2479142ラベルを単独で作成し、IRテクノロジーを使用すると、ウェルカム語は2479142であるべきです.

レベルのネーミング
クラスをすべてのe要素に割り当てた後、必要なクラスのみを使用して、使用しないクラスをHTMLから削除します.
仕事が見つかったら、会社の会議について名前をつけます.
学習の中で自分の規則を制定しなければならない.(形式-意味=txt-login)