盒模型

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

內(nèi)、外邊距的屬性

內(nèi)邊距：padding
外邊距：margin
邊框：border

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

所以從外到內(nèi)的順序是：外邊距、邊框、內(nèi)邊距、元素內(nèi)容

在使用的時候：
外邊距不在邊框內(nèi)，主要用于元素整體位置調(diào)整
內(nèi)邊距在邊框內(nèi)，主要用于元素在邊框內(nèi)的位置調(diào)整

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

語法格式：

效果樣式：

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

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

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

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

邊框的屬性

邊框，主要設(shè)置的就是邊框?qū)挾取⑦吙蝾伾⑦吙驑邮健A角。

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

語法用例：
圓角：border-radius: 50%;
邊框?qū)挾?#xff1a;border-width: 20px;
邊框顏色：border-color: red;
邊框樣式：border-style: solid;

常用簡寫：border：1px solid red

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。