【WEB基礎】HTML & CSS 基礎入門（9）CSS盒子

時間 2019-11-18

標籤 WEB基礎 html css 基礎入門盒子欄目 HTML 简体版

原文原文鏈接

網頁上的元素辣麼多，我該用什麼辦法讓它們排列整齊、間距合理呢。常幹家務的朋友們就容易理解了，用收納盒呀！css

因此用CSS作網頁佈局就涉及一個盒子的概念，簡單理解，咱們能夠把頁面上的全部HTML元素看做一個個的盒子，網頁上所展現出來的具體內容，如：文字、圖片等均可以理解爲內容，是放在盒子裏面的東西。html

這些裝着內容的盒子排列在網頁上，盒子與盒子存在着必定的間隙，咱們稱爲外邊距，佈局

每一個盒子都有邊框，每條邊框均可以設置本身的樣式，邊框與內容之間也能夠存在必定的間隙，咱們稱爲內邊距。ui

外邊距、邊框、內邊距按順時針方向又均可以分爲上、右、下、左四個部分，注意，這四個部分咱們都是能夠單獨設置其樣式的喲！spa

有圖有真相，下圖：code

由上述可知，盒子由外到內能夠列出如下四個屬性：xml

♐外邊距margin和內邊距paddinghtm

外邊距margin和內邊距padding以邊框爲分界線，它們分四個方向能夠分別設置四個不一樣的值，按順時針方向分別是上、右、下、左，以下：blog

🅰 外邊距：margin-top（上）、margin -right（右）、margin -bottom（下）、margin -left（左）圖片

🅱 內邊距：padding-top（上）、padding-right（右）、padding-bottom（下）、padding-left（左）

具體寫法有三種，分別以下所示（margin和padding寫法相似，以padding爲例）：

♐Border（邊框）

Border(邊框)有三個屬性值須要設置，分別爲邊框的寬度（border-width）、邊框的樣式（border-style）、邊框的顏色（border-color）。

♐寬度width和高度height

元素的寬度width和高度height是針對內容而言的，不包括內邊距（padding），可參看上面的圖示。另外，只有塊元素能設置width和height，行內元素沒法設置width和height。

示例代碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
    #div1
    {
        display:inline-block;/*將DIV轉換爲inline-block元素*/
        border:1px solid green;/*設置外層DIV的邊框樣式*/
    }
    #div2
    {
        display:inline-block; /*將DIV轉換爲inline-block元素*/
        padding:40px 80px;/*設置內邊距上下爲40px,左右爲80px*/
        margin-top:40px;/*設置外邊距上爲40px*/
        margin-right:60px;/*設置外邊距右爲60px*/
        margin-bottom:80px;/*設置外邊距下爲80px*/
        margin-left:100px;/*設置外邊距左爲100px*/
        /*另外一寫法：margin:40px 60px 80px 100px;順時針方向*/
        border:5px dotted red;/*DIV的邊框寬度爲5px、樣式爲點線、顏色爲紅*/
        background-color:#FCE9B8;/*設置背景色*/
    }
    span{border:1px solid blue;background-color:#C5FCDF;}
</style>
</head>
<body>
    <div id="div1">
        <div id="div2"><span>CSS盒子模型</span></div>
    </div>
</body>
</html>