ベース
なじみのない、注意が必要なことを大まかに記録してください。
Cssの学習では、非常に古典的なレイアウトを理解する必要があります~~~
役立つフレームワークはたくさんありますが、それを微調整するか、より制御しやすくする必要があります。
- デフォルトのdivには垂直のコードが付いているため、フローティングです。float：leftは左から水平方向に始まり、float：rightも同じです。
- マージンは、要素間の距離です。
マージン：右上、左下
マージン：上、下、左、右
マージン：上、下、左、右
- パディングパディングについてのことわざを聞いたことがありますが、それが理にかなっているかわかりません。マージンではなく、パディングによって何が解決できるかを言います。
3つの書き込み方法は上記のマージンと同じです。別のパディング：マージンは、上下左右で同じです。
注：マージンは要素のサイズを変更しませんが、パディングは元の要素自体のサイズを変更します。
- ブロック要素とインライン要素
ブロック要素：Divは最も基本的なブロック要素
です。1。幅と高さのマージン、パディングをサポートします
。2。幅はデフォルトで100％で、それ自体が行にあります。
行内元素：span 最基本的行内元素
1.内容が変わると幅と高さが変わります
2.マージン、パディングをサポートします
3. ラインを独占しないでください
ブロック要素は
インライン要素を自由にネストでき、インライン要素のみをネストできます
- ボーダーボーダー
- バックグラウンド
background-position
background座標
は2つのパラメーターを設定します。2番目のパラメーターはデフォルトで中央に設定されます。1番目のパラメーター
はx軸です
。2番目のパラメーターはy軸
です。
書体
- フォント
font-family：「フォント1」、「フォント2」、「フォント3」、「フォント4」、「フォント5」、「フォント6」
フォント1がない場合は、フォント2などになります。。。
- 私が非常に重要だと思う線の高さ
独自の内部高さ位置を設定します
line-heightのサイズが要素のサイズの場合、要素の中央になります
これで行の要素を制御できます〜
つまり、途中にdivブロック要素があると無効になります！！！
パーセンテージ、数値はサポートされていますが、パーセンテージは親から継承されます。
- フォントスタイルの斜体テキストの使用方法
イタリック=>は使用されるイタリックフォントです
oblique =>フォントをイタリックにする
- font-variant（役に立たないことは無視してください）
- フォント属性の略語（赤枠部分）
グレーの配置は常に重要です。！！！！！
配置、レイアウト、bステーションには多数のクラシックレイアウトビデオがあり、ポータルを参照できます
- ポジション
相対位置（左、右、上、下のz-index（だれの属性をカバーできるか））のz軸は、Excelなどの最上位に配置されているものの感覚に相当します。以前に会った実際のプロジェクトのアプリケーション：たとえば、子ウィンドウがポップアップしたときに、親ウィンドウにマスクを追加すると、子ウィンドウのz-indexは、マスクのz-indexが親ウィンドウよりも大きくなります）（z軸は負の数をサポートします）
相対配置は元の位置に影響せず、表示された要素は位置を変更します。。。。。。
- 絶対配置
標準フロー外
絶対配置は元の位置を離れません
絶対配置は、配置された親ノードに基づいています。
ただし、親ノードが見つからない場合は、親ノードではなく親ノードが見つかりません。注意してください。
次に、本体ノードまで常に最も外側のノードを見つけます。
- ウィンドウの配置
<!DOCTYPE html>
<html>
<head>
<title>01 PAGE</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style type="text/css">
#div1{
margin-top: 300px;
margin-left: 300px;
background-color: rosybrown;
height: 160px;
width: 160px;
position: relative;
float: left;
}
#div2{
margin-top: 30px;
margin-left: 30px;
background-color:saddlebrown;
height: 60px;
width: 60px;
position:absolute;
}
#div3{
margin-top: 0px;
margin-left: 0px;
background-color:seagreen;
height: 160px;
width: 160px;
position: fixed;
}
</style>
<script type="text/javascript">
</script>
</head>
<body style="height: 2000px;">
<div id="div3"></div>
<div id="div1">
<div id="div2"></div>
</div>
<!-- <div id="div3"></div> -->
</body>
</html>ウィンドウがスクロールすると、彼のdivは移動しますが、ウィンドウによって配置された要素は移動しません~~~
これは、以前のプロジェクトでこの実用的なアプリケーションに遭遇したことです。
これには、ウィンドウをスクロールする方法が必要です。また、商品を取得するための条件を変更するためにサブウィンドウをポップアップできるボタンも予約されています。
常に画面上の特定の位置に配置できます。
たとえば、コースの先生は、そのような広告は常に画面のどこかで中断された状態になると言いました。。。。。。
- 親の位置付け：親の位置付け、自分の位置付けは何ですか。
divにネストされた子divを継承します。継承ポジショニングメソッドが使用されている場合、親divのポジショニングはどのようになり、彼の方法はどのようになります。
例：父親はウィンドウです。スクロールしない場合、父親もウィンドウであり、スクロールしません。
父親は絶対的であり、従うでしょう、彼も絶対的であり、従います。
親も継承している場合は、親をもう一度見る必要があります。
- デフォルト値は静的な配置ではありません
表示
floatは行の要素をブロック要素に変えることができます！！！~~~
さらに、display：blockは、ブロックのような要素をプログラムするためにも使用できます。
可変ブロック要素は、設定した線の幅と高さが効果を持つことです。
- 業界での使い方がわかりません
- したがって、横方向にスイングして幅と高さをサポートすることは可能です。
- 赤と緑はdivの幅と高さですが、横に配置することはできません
- 黄色の灰色はスパンラインの要素であり、水平に配置できますが、幅と高さはサポートしていません（次の図は、インラインブロックを追加した後の効果です。追加しない場合、幅と高さはサポートされません）
- そのため、横向きに配置でき、幅と高さをサポートできるインラインブロックが誕生しました。
元素百分率単位
言い換えると、ブロック要素のデフォルトは幅であり、これはデフォルトで100％であるため、1行しか占有しませんが、高さは0であるため、設定しないと表示されません。たとえば、この時点で本文の下にdivを直接記述し、彼の高さを50％程度に設定すると、彼は表示されませんが、この場合、htmlと本文の高さを100に設定します％、作成した50％のdivを確認できます。この点に注意する必要があります。
上
