CSSの絶対と相対について

CSSの絶対と相対について

冒頭にこう書かれています:

アブソリュートは言った。「親戚よ、私はあなたを私の人生で見たくない!」

なぜ?彼らがとても愛し合っていて、切っても切れない関係であることは明らかです。彼らの間には、絶対的な憎しみをこれほど相対化させるような、どんな知られざる物語があったのでしょうか?

あなたの質問の答えを見つけるには、私に従ってください。 。 。

相対的なものと絶対的なものの限界の一つ

絶対、上、右、下、左の4つのスキルがあれば、これからは空は高く鳥が飛べ、海は広く魚が跳べ、どこへでも自由に行け、人生はとても美しい。

ある日、帰り道で親戚に出会いました。その親戚は飛び降りてきて、「この山を切り開いて、この木を植えたのは私だ。ここを通りたいなら、通行料を払って行かなければならない!」と叫びました。

すると、私たちの愛らしい絶対的な子供は従順に降伏しました。

しかし、悪徳な親族は給付金を受け取った後も書類の開示を拒否し、絶対的な通行を拒否した。 。 。まあ、それが物語です。 。 。誰もが理解していると信じています。 。 。

さて、デモを書いてみましょう。こちらをご覧ください:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html >   
  2. <html>   
  3.      <ヘッド>   
  4.          <メタ 文字セット= "utf-8" >   
  5.          < title >絶対 1 に対する相対的な制限</ title >   
  6.          <スタイル>   
  7. 。箱 {
  8. 幅:500ピクセル;
  9. 高さ:250px;
  10. 背景色: ピンク;
  11. マージン:30px 自動50px;
  12. 行の高さ: 250px;
  13. テキスト配置:中央;
  14. }
  15.   
  16. .box p {
  17. 表示: インラインブロック;
  18. 垂直位置合わせ: 中央;
  19. 幅:300ピクセル;
  20. フォントサイズ: 16px;
  21. 行の高さ: 1.5;
  22. テキスト配置: 左;
  23. }
  24.   
  25. .box2 p {
  26. 左マージン: 30px;
  27. }
  28.   
  29. .box 画像 {
  30. 位置: 絶対;
  31. 左:0;
  32. トップ:0;
  33. }
  34.   
  35. .box2 {
  36. 位置: 相対的;
  37. }
  38.   
  39.          </スタイル>   
  40.      </ヘッド>   
  41.      <本文>   
  42.          < div  クラス= "ボックス box1" >   
  43.              <画像 出典: http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg   alt = "写真"  スタイル= "幅:100px;高さ:150px"   />   
  44.              < p >今日、絶対は遊びに出かけ、left:0;top:0;のスキルの組み合わせを発動し、すべてが順調に進み、地平線に到達しました。 </p>   
  45.          </div>   
  46.   
  47.          < div  クラス= "ボックス box2" >   
  48.              <画像 出典: http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg   alt = "写真"  スタイル= "幅:100px;高さ:150px"   />   
  49.              < p >今日も絶対は遊びに出かけ、left:0;top:0;のスキルの組み合わせを発動しました。しかし、天気が悪く、外に出るとすぐに悪い親戚に遭遇したので、親戚の家に立ち寄りました。 </p>   
  50.          </div>   
  51.      </本文>   
  52. </html>   

相対的なものが絶対的なものに及ぼす第二の制限

前回は、上、右、下、左の4技能を使って遊びに出かけようとした時に、絶対が相対に止められたという話をしました。

今回、absolute の友達は教訓を学び、それらの 4 つのスキルを使わなくなりました。彼は margin negative value スキルを使用し、それでも外出して遊ぶことができました。

素晴らしい!家の周りにはオーバーフロー:隠し魔法バリアがありますが、私たちの絶対的な子供はそれを無視して平然と通り抜けました。拍手しましょう! ! !

でも、でも、でも、あの悪徳親戚がまた来たのよ。

幸いにも、幸いにも今回は余裕のマイナス技だったので、絶対小僧は見事に相対限界を突破して駆け抜けた。 。 。

えっと、何かおかしいようです。 。 。

逃げたら体の一部が消えたのはなぜですか?

デモはこちらです:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html >   
  2. <html>   
  3.      <ヘッド>   
  4.          <メタ 文字セット= "utf-8" >   
  5.          < title >絶対 2 に対する相対的な制限</ title >   
  6.          <スタイル>   
  7. 。箱 {
  8. 幅:500ピクセル;
  9. 高さ:250px;
  10. 背景色: ピンク;
  11. マージン:50px 自動 50px;
  12. オーバーフロー: 非表示;
  13. }
  14.   
  15. .box p {
  16. マージン: 20px 30px 20px 120px;
  17. テキスト配置: 左;
  18. }
  19.   
  20. .box 画像 {
  21. 位置: 絶対;
  22. 左マージン:-30px;
  23. 上マージン: -45px;
  24. }
  25.   
  26. .box2 {
  27. 位置: 相対的;
  28. }
  29.   
  30.          </スタイル>   
  31.      </ヘッド>   
  32.      <本文>   
  33.          < div  クラス= "ボックス box1" >   
  34.              <画像 出典: http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg   alt = "写真"  スタイル= "幅:100px;高さ:150px"   />   
  35.              < p >今日、小さな絶対君が遊びに出かけました。 </p>   
  36.              < p >前回、上下左右のスキルを使ったときに相対に遭遇し、抜け出すのが難しくなったことを考慮して、今日はマージンマイナスのスキルを使用しました。 </p>   
  37.              < p >家の周りにはoverflow:hiddenが設定されているにもかかわらず、この強力な子供はまだ逃げ出しました。 </p>   
  38.          </div>   
  39.   
  40.          < div  クラス= "ボックス box2" >   
  41.              <画像 出典: http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg   alt = "写真"  スタイル= "幅:100px;高さ:150px"   />   
  42.              < p >今日も絶対は遊びに出かけ、彼もマージンマイナスのスキルを使いました。 </p>   
  43.              < p >家の周りにも overflow:hidden 属性が設定されていますが、この強力な子供はそれでも逃げてしまいました。 </p>   
  44.              < p >ねえ、何が起こっているの?家の外にある私の体の部分はどこにあるの? </p>   
  45.              < p >あらまあ、親戚さん、いつ来たの? </p>   
  46.          </div>   
  47.      </本文>   
  48. </html>   

この二つの事件の後、アブソリュートはリラティブを憎むようになりました。ありきたりな言い方をすれば、「二度と会いたくない!」ということです。

絶対的な自由を与えてください

絶対的な子供は飛ぶ能力を持って生まれます。上、右、下、左を使って好きなところへ行けます。

絶対子は、正確な位置決めのために負のマージン値を使用することもできるので、好きなように遊ぶことができます。

子供たちは本当にかわいいです。信じられないなら、見てください:

こんなに可愛くて愛らしいのに、なぜ制限されなければならないのでしょうか? 赤ちゃんは空と自由を切望しているのです!ああ!ああ!ああ!ああ!

アブソリュートは言った。「親戚よ、二度とあなたに会いたくない!」

しかし、理想は満ち溢れ、現実は乏しい。 。 。

absolute では望むことを実現することは不可能です。位置決めをする際には relative を使って absolute をある程度制限します。結局 absolute は汎用性が高いので避けられません。

しかし、制限は制限であり、これはあくまでも相対と絶対の間の恨みであり、他の花や植物に影響を与えてはなりません。

したがって、相対 + 絶対配置を使用する場合は、相対的な影響を最小限に抑えるという原則に従う必要があります。

次に例を示します。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html >   
  2. <html>   
  3.      <ヘッド>   
  4.          <メタ 文字セット= "utf-8" >   
  5.          < title >相対的な影響を最小限に抑える</ title >   
  6.          <スタイル>   
  7. * {
  8. マージン:0;
  9. }
  10.   
  11. .wraper{
  12. 幅:800ピクセル;
  13. マージン:50px 自動;
  14. 背景色: #ccc;
  15. 境界線: 3px 緑;
  16. }
  17.   
  18. 。箱 {
  19. 幅:500ピクセル;
  20. マージン:50px 自動;
  21. 背景色: オレンジ;
  22. 境界線: 3px 黒一色;
  23. }
  24.   
  25. 画像 {
  26. border:1px 青一色;
  27. マージン:10px;
  28. }
  29.   
  30. p {
  31. パディング左:10px;
  32. マージン:10px;
  33. }
  34.   
  35. 。絶対 {
  36. 位置: 絶対;
  37. }
  38.   
  39. .box2 .絶対 {
  40. 左マージン: -3px;
  41. 上マージン: -3px;
  42. }
  43.   
  44. .box3 .絶対 {
  45. 上マージン:-3px;
  46. 左マージン:450px;
  47. }
  48.   
  49. .box4 .相対 {
  50. 位置: 相対的;
  51. border:2px 赤一色;
  52. }
  53.   
  54. .box4 .絶対 {
  55. 上:-10px;
  56. 右:-10px;
  57. }
  58.          </スタイル>   
  59.      </ヘッド>   
  60.      <本文>   
  61.          < div  クラス= "ラッパー" >   
  62.              < div  クラス= "ボックス box1" >   
  63.                  <画像  src = "http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg"   alt = "写真"  スタイル= "幅:50px;高さ:30px"   />   
  64.                  <画像 出典: http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg   alt = "写真"  スタイル= "幅:100px;高さ:150px"   />   
  65.                  <画像 出典: http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg   alt = "写真"  スタイル= "幅:100px;高さ:150px"   />   
  66.                  <画像 出典: http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg   alt = "写真"  スタイル= "幅:100px;高さ:150px"   />   
  67.                  < p >これは、配置なしの通常のフローの外観です。 </p>   
  68.                  < p >フォローアップ。 。 。 </p>   
  69.              </div>   
  70.          </ div > <!--ラップを閉じる-->   
  71.          < div  クラス= "ラッパー" >   
  72.              < div  クラス= "ボックス box2" >   
  73.                  <画像 クラス= "絶対"   src = "http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg"   alt = "写真"  スタイル= "幅:50px;高さ:30px"   />   
  74.                  <画像 出典: http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg   alt = "写真"  スタイル= "幅:100px;高さ:150px"   />   
  75.                  <画像 出典: http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg   alt = "写真"  スタイル= "幅:100px;高さ:150px"   />   
  76.                  <画像 出典: http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg   alt = "写真"  スタイル= "幅:100px;高さ:150px"   />   
  77.                  < p >画像を黒い枠の左上隅に配置したい場合はどうすればよいでしょうか? </p>   
  78.                  < p >とても簡単です。絶対的な位置決め、オフセットなし、マージンによる微調整、完了です。 </p>   
  79.              </div>   
  80.          </ div > <!--ラップを閉じる-->   
  81.          < div  クラス= "ラッパー" >   
  82.              < div  クラス= "ボックス box3" >   
  83.                  <画像 クラス= "絶対"   src = "http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg"   alt = "写真"  スタイル= "幅:50px;高さ:30px"   />   
  84.                  <画像 出典: http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg   alt = "写真"  スタイル= "幅:100px;高さ:150px"   />   
  85.                  <画像 出典: http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg   alt = "写真"  スタイル= "幅:100px;高さ:150px"   />   
  86.                  <画像 出典: http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg   alt = "写真"  スタイル= "幅:100px;高さ:150px"   />   
  87.                  < p >画像を黒い枠の右上隅に配置したい場合はどうすればよいでしょうか? </p>   
  88.                  < p >最初の方法は、前と同じように絶対位置指定を使用し、次にマージンを使用して調整することです。
  89. この方法では、シフトするピクセル数を計算するために脳細胞が必要になります。 </p>   
  90.              </div>   
  91.          </ div > <!--ラップを閉じる-->   
  92.          < div  クラス= "ラッパー" >   
  93.              < div  クラス= "ボックス box4" >   
  94.                  < div  クラス= "相対" >   
  95.                      <画像 クラス= "絶対"   src = "http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg"   alt = "写真"  スタイル= "幅:50px;高さ:30px"   />   
  96.                  </div>   
  97.                  <画像 出典: http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg   alt = "写真"  スタイル= "幅:100px;高さ:150px"   />   
  98.                  <画像 出典: http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg   alt = "写真"  スタイル= "幅:100px;高さ:150px"   />   
  99.                  <画像 出典: http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg   alt = "写真"  スタイル= "幅:100px;高さ:150px"   />   
  100.                  < p > 2 番目の方法は、誰もが好む相対 + 絶対配置です。 </p>   
  101.                  < p >しかし、絶対は相対をとても嫌うので、相対はそれをいじめるだけで、他の花や植物に影響を与えないようにする必要があります。 </p>   
  102.                  < p >具体的には、配置する必要のある画像に div レイヤーを追加し、相対的に設定して、この相対が絶対的に配置する必要のある要素にのみ影響するようにします。 </p>   
  103.                  < p >相対的な影響を最小限に抑えます。 </p>   
  104.              </div>   
  105.          </ div > <!--ラップを閉じる-->   
  106.      </本文>   
  107. </html>   

CSS の絶対と相対について私が言いたいことは以上です。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

オリジナルURL: http://www.cnblogs.com/cc156676/archive/2016/07/20/5688949.html

<<:  HTML ページの先頭に戻るいくつかの実装の概要

>>:  スペース均等互換性の問題を解決する2つの方法についての簡単な説明

推薦する

コンテンツ領域の周囲を回転する CSS 動的グラデーション ボーダーの効果 (サンプル コード)

レンダリング ネットで関連情報を調べたところ、現在のダイナミックグラデーションボーダーの実装方法のほ...

CSS3 で作成した本のページめくり効果

結果:実装コード: html <!-- よろしければハートを付けてください! --> &...

CSSトランジションは高さを変更することで要素を拡大したり縮小したりします。

一般的な開発ニーズとして、要素の一部を必要になるまで折りたたんでおきたいことが挙げられます。 Boo...

Docker を使用してフロントエンド アプリケーションをデプロイする方法

Dockerはますます普及しています。環境を軽量かつ柔軟に分離し、容量を拡張し、運用保守管理を容易に...

JS で Websocket ベースのマルチターミナル ブリッジング プラットフォームを実装する方法

目次1. デバッグ対象2. WebSocketの機能3. ソケット接続を確立する3.1 部屋の作成方...

Vue コンポーネントはどのように解析され、レンダリングされるのでしょうか?

序文この記事では、Vue コンポーネントがどのように解析され、レンダリングされるかを説明します。 V...

JTAを実装するためにAtomikosと組み合わせたTomcatについて

最近、プロジェクトは環境を切り替え、WebLogic を Tomcat に置き換えました。途中で発生...

NavicatがLinuxサーバー上のMySQLに接続できない問題を解決する

最初は悲しい気持ちになりました。スクリーンショットは以下の通りです。 少し苦労しましたが、解決策は次...

MySQLは間違ったパスワードを入力する試行回数を制御します

1. 本番環境でMySQLのデッドロックを監視し、デッドロックの可能性を減らす方法まず、デッドロック...

スタートアップ企業が丹念に作り上げた優れたウェブデザイン17選

スタートアップ企業は、型破りな仕事のやり方、ユニークなビジネスモデル、特徴的な製品やサービス、パーソ...

Dockerバッチコンテナオーケストレーションの実装

導入Dockerfile ビルドの実行は、単一のコンテナの手動操作です。マイクロサービス アーキテク...

よく使われるJavaScript配列メソッド

目次1. フィルター() 2. 各() 3. いくつか() 4. すべて() 5. 減らす() 6....

Vmwareでディスクを追加する方法:ディスクを拡張する

この記事では、ディスクを追加または拡張して、Vmare で有効にする方法について説明します。シナリオ...

Linux での MySQL 5.6 バイナリのインストール プロセス

1.1 バイナリインストールパッケージをダウンロードするhttps://dev.mysql.com/...

Vue は PDF.js を統合して PDF プレビューを実装し、透かしを追加する手順を実行します。

目次成果を達成する利用可能なプラグインの紹介ニーズに応じてプラグインを選択するプラグインのインストー...