Box Model模型關係

Posted on Edited on In Views: Disqus:

 

我想CSS中有一個重要的東西就是Box Model

Box Model表示了一個元素的邊界、線條、填充(補丁)、內容的相對關係

 

直接看範例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <style>
        img {
            margin: 50px;
            border: 10px solid blue;
            padding: 10px;
            background: red;
        }

        .d1 {
            margin: 50px;
            border: 10px solid blue;
            padding: 10px;
            background: red;
        }

        .d2 {
            margin: 50px;
            border: 10px solid blue;
            padding: 10px;
            background: red;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>margin is Transparent</li>
            <li>border is blue</li>
            <li>padding and background is red</li>
            <li>content is picture</li>
        </ul>
    </div>
    <img src="http://i.imgur.com/15tcM0q.jpg?1">

    <div class="d1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>

    <div class="d2">
        <p>123</p>
        <a href="https://www.google.com.tw/">google</a>
        <h1>abc</h1>
    </div>
</body>
</html>

JS Bin

其中特別要注意的是border，

如果要使用border則必須要指定邊線樣式如：border:solid;，

如果沒指定則視為無邊線。