-配置

29745 ワード

HTML/CSSレッスンが始まってから1週間が経ちました.午前中の授業はJSP、午後の授業はスクリーン実装(HTML/CSSなど)で、確かに午前中の授業は難易度が高く、ついていけません.(1時間も増えたからか…?)
だから午前の授业より午后の授业のほうがついてきやすくて、もっと面白いです.難しい授業にもっと時間をかけるべきだったのに...難しいことほど、遅らせたり避けたりしたいのはなぜでしょうか…?
元気を出して、今週末を利用して、この間習った内容をブログにまとめて、単独で勉強します!✌
💢今日の勉強内容はCSSの位置づけです!
CSSはダイナミックなキャラクターなのか、実際にHTMLドキュメント化された内容を修飾しているので、ちょっと触ってみる楽しみがあります.
いつか私たちがもっと熟知して、頭の中で想像した内容を実現するように努力したいと思っています.

Positionプロパティ

固定:固定座標

相対座標

:相対座標

absolute:絶対座標/この属性を書き込むには、親位置を静的(静的:デフォルト)

にすることはできません.

表示方法
position : relative;
position : fixed;

まずタグにtitle名を書き、<tyle>タグにcss言語文法に合致する内容を書きます.<li>*CSSの利点:htmlのみを使用してコンテンツを記述するよりも、コンテンツが簡単で、メンテナンスが容易で、読み取りがより良い(すなわち、重複データの除去!/適用する材料が1億部に達すると、より効果的)<img src="https://s1.md5.ltd/image/9f48bc503c55b3f2b55a9de9bb2b9478.png"/> タブ・セレクタ.AAはクラスAAを表し、AAはID AAを表す </li>位置決めプロパティを以下の方法でカスタマイズします. <img src="https://s1.md5.ltd/image/eb20e56df8d9f4bfc3a04bff148e8ab7.png"/> <style>タグを終了し、<body>タグにclassを作成し、上記の位置決め属性に適用したい属性を追加します. <img src="https://s1.md5.ltd/image/fa6057ec3d0f6ffaca982bba7330112a.png"/> 出力は次のとおりです. <img src="https://s1.md5.ltd/image/94c2e08020501746da927f0e10320635.png"/> <h2>비슷한 예제로 직접연습</h2> <li> <h4>기본 코드</h4> </li> <pre><code class="language-null"><style> #main { position: relative; height: 200px; width: 200px; border: 1px solid black; } #center { position: relative; left: 50px; top: 50px; border: 1px solid black; width: 100px; height: 100px; } .box { height: 50px; width: 50px; } .blue { background-color: lightblue; position: absolute; top: 0; left: 0; } .green { background-color: lightgreen; position: absolute; top: 0; right: 0; } .yellow { background-color: yellow; position: absolute; right: 0; bottom: 0; } .red { background-color: lightpink; position: absolute; left: 0; bottom: 0; } </style></code></pre><li>の上のコードを元に、そのまままたは変形して練習しましょう.</li> <li> My work! </li>このように出力するために作成するコード(答えは以下の通り)<pre><code class="language-null"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>포지션 연습</title> <style> #main { position: fixed; left: 40%; top: 30%; height: 200px; width: 200px; border: 1px solid black; background-color: honeydew; } #center { position: relative; left: 50px; top: 50px; border: 1px solid black; width: 100px; height: 100px; } .box { height: 50px; width: 50px; } .blue { background-color: lightblue; position: absolute; top: 0; left: 0; } .green { background-color: lightgreen; position: absolute; top: 0; right: 0; } .yellow { background-color: yellow; position: absolute; right: 0; bottom: 0; } .red { background-color: lightpink; position: absolute; left: 0; bottom: 0; } </style> </hea <body> <div id="main"> <div id="center"> <div class="box blue"></div> <div class="box green"></div> <div class="box yellow"></div> <div class="box red"></div> </div> <div class="box blue"></div> <div class="box green"></div> <div class="box yellow"></div> <div class="box red"></div> </div> </body></code></pre> <pre><code class="language-null"> </code></pre>

Reference

この問題について(-配置), 我々は、より多くの情報をここで見つけました https://velog.io/@kshee1001/CSS-포지셔닝

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

[programmers]2021 KAKAO BLIND RECRUITMENT-タクシー運賃

Linux manとinfoコマンド