盒模型

盒模型是CSS中最最重要的概念之一了，這個概念比較抽象，它規定了元素框處理元素內容、外邊距、內邊距、邊框的方式。

內、外邊距的屬性

內邊距：padding
外邊距：margin
邊框：border

簡單的說，把頁面的每一個元素，想象成一個盒子，最中心最里面的就是元素內容，元素內容被內邊距包裹起來，而邊框又包含了內邊距，最后最外面是外邊距

所以從外到內的順序是：外邊距、邊框、內邊距、元素內容

在使用的時候：
外邊距不在邊框內，主要用于元素整體位置調整
內邊距在邊框內，主要用于元素在邊框內的位置調整

tip：內邊距的空間也會受到元素的屬性影響，比如背景顏色

語法格式：

效果樣式：

在這里，可能不太容易看的出來，我們可以調出控制臺再看，就比較容易：

看背景顏色，我們的內邊距也算在背景顏色里了，也就是說內邊距也算是元素主體內容的一部分。

在margin和padding中都是一樣屬性賦值：
如果賦值四個數字（帶單位，空格間隔），那就是依次對（上、右、下、左）四個方向設置
如果賦值三個數字（帶單位，空格間隔），那就是依次對（上、左右、下）三個方向設置
如果賦值兩個數字（帶單位，空格間隔），那就是依次對（上下、左右）兩個方向設置
如果賦值一個數字（帶單位），那就是同時對（上、右、下、左）四個方向設置

當然，也可以單獨設置某個方向的margin或者padding
語法舉例：margin-top:;、padding-right:;

邊框的屬性

邊框，主要設置的就是邊框寬度、邊框顏色、邊框樣式、圓角。

當然，對于我這種懶人來說，最常用的還是簡寫，直接寫border
，就可以設置寬度、樣式、顏色，簡單便捷。

語法用例：
圓角：border-radius: 50%;
邊框寬度：border-width: 20px;
邊框顏色：border-color: red;
邊框樣式：border-style: solid;

常用簡寫：border：1px solid red

注：圓角的50%，效果就是一個圓

總結

以上是生活随笔為你收集整理的HTML+CSS+JavaScript复习笔记持更（九）——CSS3常用属性之盒模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。