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つの方法についての簡単な説明

推薦する

HTML でフォーム入力やその他のテキスト ボックスを読み取り専用にして編集不可にする方法

場合によっては、フォーム内のテキスト ボックスを読み取り専用にして、ユーザーがその中の情報を変更でき...

Python ベースの MySQL レプリケーション ツールの詳細な説明

目次1. はじめに2回目の練習2.1 インストールと設定2.2 コアクラスの紹介2.3 使い方は? ...

CSSプリコンパイル言語とその違いの詳細な説明

1. 何ですか マークアップ言語として、CSSは比較的シンプルな構文とユーザーに対する要件が低いが、...

JavaScript ECharts の使用方法の説明

以前、プロジェクトを行う際に ECharts を使用しました。今日はそれをメモとして整理し、より多く...

Html+CSS 描画三角形アイコン

まずはレンダリングを見てみましょう: XML/HTML コードコンテンツをクリップボードにコピー&l...

曇り空のアイコン効果を実現する純粋な CSS

効果効果は以下のとおりです​実装のアイデアbox-shadow プロパティを使用して、複数の灰色の円...

Tomcat Nativeを使用してTomcat IO効率を向上させる方法の詳細な説明

目次導入Tomcatへの接続方法APR と Tomcat ネイティブtomcat で APR を使用...

Alibaba Cloud Centos7のインストールとSVNの設定

1. SVNサーバーをインストールする yum でサブバージョンをインストール2. SVNバージョン...

今日、私は非常に奇妙なクリックの問題に遭遇し、自分で解決しました

...こんな感じで、今日はポップアップウィンドウを作ろうと思ったのですが、バックエンド PHP によ...

Mysql 中国語ソートルールの説明

MySQL を使用する際、フィールドをソートしたりクエリしたりすることがよくあります。通常は、中国語...

Linuxのtimeコマンドの使い方の詳しい説明

1. コマンドの紹介時間は、コマンドの実行に費やされた時間や関連するシステム リソース、その他の情報...

1つの記事でNavicat for MySQLの基本を理解する

目次1. データベース操作2. データ型3. バックアップとリカバリ3. 操作4. 上級5. 知識補...

Linux ディスク領域解放問題の概要

IDC のサーバーの /partition 使用率がいっぱいです。 100% に到達しました!確認し...