BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】cssプロパティ width デフォルト値 width: auto と width: 100% の違いを解説。

2022-02-02 19:41:13

幅：自動

  • 子要素（content+padding+border+marginを含む）は、親要素のコンテンツ領域全体を満たした状態になります。
  • 子要素がmargin、border、paddingを持つ場合、子要素のコンテンツ領域に対応する幅の値を減算する
  • 親要素の内容 = 子要素 (内容 + パディング + ボーダー + マージン )

幅：100

  • 子要素の内容領域が親要素の内容領域を埋めるように強制します。
  • 子要素にマージン、ボーダー、パディングがある場合、子要素のコンテンツエリアの幅を変更するのではなく、親ボックスをオーバーフローさせて元の値を保持する
  • 親要素の内容 = 子要素の内容

百聞は一見に如かず。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;padding: 0;
        }
        body {
            background: #dcdcdc;
        }
        .box {
            width: 400px;
            border: 3px solid red;
            padding: 0 50px;
        }
        .box1 {
            width: auto;
            height: 100px;
            background: pink;
            padding: 0 50px;
            margin: 0 50px;
            border-width: 0 50px;
            border-style: solid;
            border-color: green;
        }
        .box2 {
            width: 100%;
            height: 100px;
            background: gold;
            padding: 0 50px;
            margin: 0 50px;
            border-width: 0 50px;
            border-style: solid;
            border-color: green;
        }
        .box3 {
            width: 100px;height: 100px;background: orange;
        }
        .box4 {
            float: left;
            width: 50px;height: 50px;background: pink;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
</body>
</html>

注：画像のサブ幅はサブコンテンツに変更されました。

この記事は、cssプロパティwidthのデフォルト値幅：自動と幅：100％の違いは、このに導入され、より関連するcssの幅：自動と幅：100％の内容は、スクリプトハウスの過去の記事を検索するか、次の関連記事を閲覧を続けてください、あなたは将来的に多くのスクリプトハウスをサポートしています願っています

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します