CSSボックスモデル例の説明と分析-CSSチュートリアル-php.cn

ボックスはCSSの基本概念であり、要素の外観とドキュメント全体のレイアウトを構成するために使用する必要があります。

1. 要素にパディングを適用する

パディングを適用すると、要素のコンテンツと余白の間に空白が追加されます。コンテンツボックスの各端に個別にパディングを設定することも、パディング短縮プロパティを使用して 1 つの宣言ですべての値を設定することもできます。

CSSボックスモデル例の説明と分析

パーセンテージ値を使用してパディングを指定する場合、パーセンテージは常に含まれるブロックの幅を基準にし、高さは考慮されません。以下のコードは、要素にパディングを適用する方法を示しています。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        p {   
            border:10px double black;   
            background-color: lightgray;   
            background-clip: content-box;   
            width: 380px;   
            padding-top: 0.5em;   
            padding-bottom: 0.3em;   
            padding-left: 0.8em;   
            padding-right: 0.6em;   
        }   
    </style>
</head>
<body>
<p>
    <p>
        15岁的时候再得到那个5岁的时候热爱的布娃娃，65岁的时候终于有钱买25岁的时候热爱的那条裙子，又有什么意义。   
        什么都可以从头再来，只有青春不能。   
        那么多事情，跟青春绑在一起就是美好，离开青春，就是傻冒。   
    </p>
</p>
</body>
</html>

ログイン後にコピー

このコードでは、ボックスの両側に異なるパディングが適用されています。その効果は、以下のレンダリングで確認できます。さらに、パディング領域に背景色が表示されないように、background-clip プロパティが設定されているため、パディングの効果が強調されます。

CSSボックスモデル例の説明と分析

パディング短縮属性を使用して、宣言の 4 つの辺にパディングを設定することもできます。この属性には 1 ～ 4 個の値を指定できます。 4 つの値が指定された場合、それらはそれぞれ上、右、下、左のパディングを表します。値を省略した場合、最適な組み合わせは次のとおりです。左側の値が省略された場合は右側の値がデフォルトで使用され、下の値が省略された場合は上部の値がデフォルトで使用されます。。値が 1 つだけ指定された場合、4 辺すべてのパディングがこの値になります。

次のコードリストは、パディング短縮属性の使用方法を示しています。この例では、丸い境界線も追加し、パディングを使用して境界線が要素のコンテンツの上に出ないようにする方法を示しています。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        p {   
            border:10px solid black;   
            background: lightgray;   
            width: 380px;   
            border-radius:1em 4em 1em 4em;   
            padding: 5px 25px 5px 40px;   
        }   
    </style>
</head>
<body>
<p>
    <p>
        15岁的时候再得到那个5岁的时候热爱的布娃娃，65岁的时候终于有钱买25岁的时候热爱的那条裙子，又有什么意义。   
        什么都可以从头再来，只有青春不能。   
        那么多事情，跟青春绑在一起就是美好，离开青春，就是傻冒。   
    </p>
</p>
</body>
</html>

ログイン後にコピー

効果は下の図に示されており、コードで指定された丸い境界線とパディングがブラウザーでどのように表示されるかを示しています。

CSSボックスモデル例の説明と分析

パディングが設定されていない場合、テキスト上に境界線が描画されます。パディングを設定すると、コンテンツと境界線の間に十分なスペースが確保されるため、このような事態は発生しません。

2. 要素にマージンを適用する

マージンは、ページ上の要素の境界線とその周囲のすべての間の空白です。それを囲むものには、他の要素とその親要素が含まれます。

CSSボックスモデル例の説明と分析

padding プロパティと同様に、パディングが上端と下端に適用される場合でも、パーセンテージ値は、含まれるブロックの幅に相対的です。次のコードリストは、要素にマージンを追加する方法を示しています。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        img{   
            border: 4px solid black;   
            background: lightgray;   
            width: 150px;   
        }   
        #second img { margin: 4px 20px;}   
    </style>
</head>
<body>
<p>
    <p id="first">
        <img src="imgs/banana.png" alt="small banana">
        <img src="imgs/banana.png" alt="small banana">
    </p>
    <p id="second">
        <img src="imgs/banana.png" alt="small banana">
        <img src="imgs/banana.png" alt="small banana">
    </p>
</p>
</body>
</html>

ログイン後にコピー

このコードでは、以下の 2 つの img 要素の上端と下端に 4 ピクセル、左端と右端に 20 ピクセルのマージンが適用されています。ピクセル単位の余白。以下のレンダリングでは、要素の周囲にマージンによって作成された空白領域が確認できます。上の 2 つの img 要素と下の 2 つの img 要素は、マージンを設定する前と後の img 要素を部分的に示しています。

CSSボックスモデル例の説明と分析

特定のマージン属性の値を設定しても、マージンが表示されない場合があります。たとえば、表示属性がインラインに設定されている要素にマージンを適用すると、上下のマージンは表示されません。

3. 要素のサイズを制御する

ブラウザは、ページ上のコンテンツの流れに基づいて要素のサイズを設定します。サイズを割り当てる際にブラウザーが従わなければならない詳細なルールがいくつかあります。これらの動作は、サイズ関連のプロパティを使用してオーバーライドできます。

CSSボックスモデル例の説明と分析

最初の 3 つの属性のデフォルト値は auto です。これは、ブラウザーが要素の幅と高さを設定することを意味します。長さの値とパーセント値を使用して寸法を明示的に指定することもできます。パーセンテージ値は、含まれるブロックの幅に基づいて計算されます (処理される要素の高さもこの幅に基づきます)。次のコードリストは、要素の寸法を設定する方法を示しています。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        p { width:75%; height: 100px; border: thin solid lightseagreen;}   
        img { background: lightgray; border: 4px solid blueviolet; margin: 2px; height: 50%;}   
        #first { box-sizing: border-box; width: 50%;}   
        #second { box-sizing: content-box;}   
    </style>
</head>
<body>
    <p>
        <img id="first" src="imgs/banana.png" alt="small banana">
        <img id="second" src="imgs/banana.png" alt="small banana">
    </p>
</body>
</html>

ログイン後にコピー

上記のコード例には 3 つの重要な要素があり、1 つの p 要素には 2 つの img 要素が含まれています。次の表示は、ブラウザーがこれらの要素をどのように表示するかを示しています。

CSSボックスモデル例の説明と分析

p元素是body元素的子元素。当将p元素的宽度表示为75%的时候，意思是告诉浏览器将p的宽度设置为包含块（此处是body内容盒）宽度的75%，而不论其具体值是多少。如果用户调整了浏览器窗口，body元素也会相应被调整，以确保p元素的宽度总是body内容盒宽度的75%。

3.1 设置一定尺寸的盒子

前面示例中两个img元素设置了相同的高度值（50%），但两个图片的高度在屏幕上看起来不一样。这是因为使用box-sizing属性改变了其中一个元素应用尺寸属性的区域。

默认情况下，宽度和高度是需要计算的，之后才能应用到元素的内容盒。这里说的是如果设置了元素的高度属性是100px，那么屏幕上的真实高度就是100px，这也算上了顶边和底边的内边距、边框和外边距的值。box-sizing属性允许指定尺寸样式应用到元素盒子的具体区域，也就是不需要自己计算某些值。

3.2 设置最小和最大尺寸

可以使用最小和最大相关属性为浏览器调整元素尺寸设置一定的限制。这让浏览器对于如何应用尺寸调整属性有了一定的自主权。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        img {   
            background: lightgray;   
            border: 4px solid blueviolet;   
            margin: 2px;   
            box-sizing: border-box;   
            min-width: 100px;   
            width: 50%;   
            max-width: 200px;   
        }   
    </style>
</head>
<body>
    <p>
        <img id="first" src="imgs/banana.png" alt="small banana">
    </p>
</body>
</html>

ログイン後にコピー

在代码中，为一个img元素应用了mix-width 和 max-width属性，并将其出事宽度设置为包含块的50%。这样浏览器就有了一定灵活性来调整图像尺寸，使其在代码中定义的最大尺寸和最小尺寸范围内保持50%的关系。浏览器会利用这种灵活性保留图像的高宽比，如下面的显示效果所示：

CSSボックスモデル例の説明と分析

PS:浏览器对box-sizing属性的支持情况各不相同。

4. 处理溢出内容

如果尝试改变元素的尺寸，很快就会到达某一个点：内容太大，已经无法完全显示在元素的内容盒中。这时的默认处理方式是内容溢出，并继续显示。下面的代码清单创建了一个固定尺寸的元素，由于尺寸太小，无法显示其中的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        p {width: 200px;  height: 100px; border:medium double black;}   
    </style>
</head>
<body>
<p>
    你的特别不是因为你在创业，不是因为你进了牛企，不是因为你的牛offer，而是因为你就是你，坚信自己的特别，坚信自己的内心，勇敢做自己。   
    IT DOESN&#39;T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE.   
</p>
</body>
</html>

ログイン後にコピー

代码中为p元素的width 和 height 属性指定了绝对值，最终显示在浏览器中的显示效果如下图所示：

CSSボックスモデル例の説明と分析

可以使用 overflow 属性改变这种行为，下表列出了相关的 overflow 属性。

CSSボックスモデル例の説明と分析

overflow-x 和 overflow-y 属性分部设置水平方向和垂直方向的溢出方式，overflow 简写属性可在一条声明中声明两个方向的溢出方式。下表展示了这三个属性可能的取值。

CSSボックスモデル例の説明と分析

下面代码展示了溢出属性的用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        p {width: 200px;  height: 100px; border:medium double black;}   
        p:first-child { overflow: hidden;}   
        p:last-child { overflow: scroll;}   
    </style>
</head>
<body>
<p>
    你的特别不是因为你在创业，不是因为你进了牛企，不是因为你的牛offer，而是因为你就是你，坚信自己的特别，坚信自己的内心，勇敢做自己。   
    IT DOESN&#39;T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE.   
</p>
<p>
    你的特别不是因为你在创业，不是因为你进了牛企，不是因为你的牛offer，而是因为你就是你，坚信自己的特别，坚信自己的内心，勇敢做自己。   
    IT DOESN&#39;T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE.   
</p>
</body>
</html>

ログイン後にコピー

CSSボックスモデル例の説明と分析

5. 控制元素的可见性

可以使用 visibility 属性控制元素的可见性。这个属性跟Javascript一起使用能创建一些比较复杂的效果。其取值如下：

CSSボックスモデル例の説明と分析

下面的代码展示了如何使用JavaScript和几个按钮元素改变元素的可见性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        tr > th { text-align: left; background: gray; color: white;}   
        tr > th:only-of-type { text-align: right; background: lightgray; color: gray;}   
    </style>
</head>
<body>
<table>
    <tr>
        <th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
    </tr>
    <tr id="firstchoice">
        <th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td>
    </tr>
    <tr>
        <th>2nd Favorite</th><td>Oranges</td><td>Orange</td><td>Large</td>
    </tr>
</table>
<p>
    <button>Visible</button>
    <button>Collapse</button>
    <button>Hidden</button>
</p>
<script>
    var buttons = document.getElementsByTagName("button");   
    for(var i = 0;i < buttons.length; i++){   
        buttons[i].onclick = function(e){   
            document.getElementById("firstchoice").style.visibility = e.target.innerHTML;   
        }   
    }   
</script>
</body>
</html>

ログイン後にコピー

CSSボックスモデル例の説明と分析

collapse 值只能应用到表相关元素，如tr 和 td。

6. 设置元素的盒类型

display 属性提供了一种改变元素盒类型的方式，这想要会改变元素在页面上的布局方式。下表列出了display 属性允许的取值。

CSSボックスモデル例の説明と分析

6.1 认识块级元素

将 display属性设置为block值会创建一个块级元素。块级元素会在垂直方向跟周围元素有所区别。通常在元素前后放置换行符也能达到这种效果，在元素和周围元素之间制造分割的感受，就像文本中的段落。p元素表示段落，其默认样式约定中就包括 display 属性取 block 值。不过block 值可应用到所有元素，其用法如下面代码所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        p { border: medium solid black;}   
        span { display: block; border: medium double black; margin: 2px;}   
    </style>
</head>
<body>
<p>
你的特别不是因为你在创业，不是因为你进了牛企，不是因为你的牛offer，而是因为你就是你，坚信自己的特别，坚信自己的内心，勇敢做自己。   
<span>IT DOESN&#39;T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE.</span>
</p>
</body>
</html>

ログイン後にコピー

可以从下图看到span 元素的 display属性是否设置为 block 值的差别。

CSSボックスモデル例の説明と分析

6.2 认识行内元素

将 display 属性设置为 inline 值会创建一个行内元素，它在视觉上跟周围内容的显示没有区别。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        p { display: inline;}   
        span { display: inline; border: medium double black; margin: 2em; width: 10em; height: 2em;}   
    </style>
</head>
<body>
<p>
你的特别不是因为你在创业，不是因为你进了牛企，不是因为你的牛offer，而是因为你就是你，坚信自己的特别，坚信自己的内心，勇敢做自己。   
<span>IT DOESN&#39;T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE.</span>
</p>
</body>
</html>

ログイン後にコピー

在上述代码中，为p元素和span元素同时使用了inline值，从下面的效果图可以看出应用样式后的效果：p元素和 span元素中的文本跟剩余文本没有分开，都显示在一起。

CSSボックスモデル例の説明と分析

使用 inline 值的时候，浏览器会忽略某些值，如 width、height 和margin 。上面的示例代码中，为span 元素定义的这三个属性的值都没有应用到页面布局中。

6.3 认识行内-块级元素

将display 属性设置为 inline-block 值会创建一个其盒子混合了块和行内特性的元素。盒子整体上作为行内元素显示，这意味着垂直方向上该元素和周围的内容并排显示，没有区别。但盒子内部作为块级元素显示，这样，width、height 和 margin 属性都能应用到盒子上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        p { display: inline;}   
        span { display: inline-block; border: medium double black; margin: 2em; width: 10em; height: 2em;}   
    </style>
</head>
<body>
<p>
    15岁的时候再得到那个5岁的时候热爱的布娃娃，65岁的时候终于有钱买25岁的时候热爱的那条裙子，又有什么意义。   
    什么都可以从头再来，<span>只有青春不能。</span>那么多事情，跟青春绑在一起就是美好，离开青春，就是傻冒。   
</p>
</body>
</html>

ログイン後にコピー

CSSボックスモデル例の説明と分析

6.4 认识插入元素

display 属性设置为run-in 值会创建一个这样的元素：其盒子类型取决于周围元素。

下面代码展示了一个相邻兄弟元素为块级元素的插入元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        p { display: block;}   
        span { display:run-in; border: medium double black;}   
    </style>
</head>
<body>
<p>
    By the time we add the countless types of apples, oranges, and other well-know fruit, we are faced with thousands of choices.   
</p>
<span>
    There are lots of different kinds of fruit - there are over 500 varieties of banana alone.   
</span>
<p>Hello </p>
</body>
</html>

ログイン後にコピー

CSSボックスモデル例の説明と分析

下面代码展示了一个相邻兄弟元素为行内元素的插入元素，修改上面p的CSS代码：

 p { display: inline;}

ログイン後にコピー

CSSボックスモデル例の説明と分析

6.5 隐藏元素

将display属性设置为none值就是告诉浏览器不要为元素创建任何类型的盒子，也就是说元素没有后代元素。这时元素在页面布局中不占据任何空间。

7. 创建浮动盒

可以使用 float 属性创建浮动盒，浮动盒会将元素的左边界或者右边界移动到包含块或另一个浮动盒的边界。

CSSボックスモデル例の説明と分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        p.toggle {   
            float: left;   
            border: medium double green;   
            width: 40%;   
            margin: 2px;   
            padding: 2px;   
        }   
    </style>
</head>
<body>
<p class="toggle">
    15岁的时候再得到那个5岁的时候热爱的布娃娃，65岁的时候终于有钱买25岁的时候热爱的那条裙子，又有什么意义。   
    什么都可以从头再来，只有青春不能。那么多事情，跟青春绑在一起就是美好，离开青春，就是傻冒。   
</p>
<p>
    你的特别不是因为你在创业，不是因为你进了牛企，不是因为你的牛offer，而是因为你就是你，坚信自己的特别，坚信自己的内心，勇敢做自己。   
    IT DOESN&#39;T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE.   
</p>
<button>Left</button>
<button>Right</button>
<button>None</button>
<script>
    var buttons = document.getElementsByTagName("button");   
    for (var i = 0; i <buttons.length; i++){   
        buttons[i].onclick = function(e){   
            var elements = document.getElementsByClassName("toggle");   
            for(var j = 0; j < elements.length; j++){   
                elements[j].style.cssFloat = e.target.innerHTML;   
            }   
        }   
    }   
</script>
</body>
</html>

ログイン後にコピー

CSSボックスモデル例の説明と分析

阻止浮动元素堆叠

如果设置了多个浮动元素，默认情况下，它们会一个挨着一个的堆叠在一起。使用clear属性可以阻止出现这种情况。clear属性可以指定浮动元素的一个编辑或者两个编辑不能挨着另一个浮动元素。

CSSボックスモデル例の説明と分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        p.toggle {   
            float: left;   
            border: medium double green;   
            width: 40%;   
            margin: 2px;   
            padding: 2px;   
        }   
        p.clear {clear: left;}   
    </style>
</head>
<body>
<p class="toggle">
    15岁的时候再得到那个5岁的时候热爱的布娃娃，65岁的时候终于有钱买25岁的时候热爱的那条裙子，又有什么意义。   
</p>
<p class="toggle clear">
    什么都可以从头再来，只有青春不能。那么多事情，跟青春绑在一起就是美好，离开青春，就是傻冒。   
</p>

<p>
    你的特别不是因为你在创业，不是因为你进了牛企，不是因为你的牛offer，而是因为你就是你，坚信自己的特别，坚信自己的内心，勇敢做自己。   
    IT DOESN&#39;T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE.   
</p>
<button>Left</button>
<button>Right</button>
<button>None</button>
<script>
    var buttons = document.getElementsByTagName("button");   
    for (var i = 0; i <buttons.length; i++){   
        buttons[i].onclick = function(e){   
            var elements = document.getElementsByClassName("toggle");   
            for(var j = 0; j < elements.length; j++){   
                elements[j].style.cssFloat = e.target.innerHTML;   
            }   
        }   
    }   
</script>
</body>
</html>

ログイン後にコピー

这里的代码示例是对前一个例子的简单扩展，只是添加了一个新的样式，为第二个p元素清除了左边界的浮动元素。从下面的效果图可以看出这个设置引起了页面布局的改变。（现在两个元素都浮动在包含块的左边界）

CSSボックスモデル例の説明と分析