html頁面中的布局元素看作是乙個矩形的盒子，也就是乙個盛裝內容的容器。
屬性作用
border-width
定義邊框粗細，單位是px
border-style
邊框的樣式
border-color
邊框顏色
border
: 1px solid red; 沒有順序
上邊框下邊框
左邊框右邊框
border-top:寬度 樣式 顏色;
border-bottom:寬度 樣式 顏色;
border-left:寬度 樣式 顏色;
border-right:寬度 樣式 顏色;
table, td
屬性作用
padding-left
左內邊距
padding-right
右內邊距
padding-top
上內邊距
padding-bottom
下內邊距
值的個數
表達意思
1個值padding：上下左右內邊距;
2個值padding: 上下內邊距 左右內邊距 ；
3個值padding：上內邊距 左右內邊距 下內邊距；
4個值padding: 上內邊距 右內邊距 下內邊距 左內邊距 ； 順時針方向
盒子的實際的大小 = 內容的寬度和高度 + 內邊距 + 邊框
問題：
會撐大原來的盒子
解決：
通過給設定了寬高的盒子，減去相應的內邊距的值，維持盒子原有的大小
如果沒有給乙個盒子指定寬度， 此時，給這個盒子指定padding， 則不會撐開盒子。
控制盒子和盒子之間的距離
屬性作用
margin-left
左外邊距
margin-right
右外邊距
margin-top
上外邊距
margin-bottom
下外邊距
*
解決方案：
可以為父元素定義上邊框
可以為父元素定義上內邊距
可以為父元素新增overflow:hidden
讓乙個正方形變成圓
border-radius
: 50%;
box-shadow:水平陰影 垂直陰影 模糊距離（虛實） 陰影尺寸（影子大小） 陰影顏色 內/**影；
box-shadow
: 0 15px 30px rgba
(0, 0, 0, .4)
;
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
css之盒子模型
一 前言 盒子模型，英文即box model。無論是div span 還是a都是盒子。但是，表單元素一律看作是文字，它們並不是盒子。這個很好理解，比如說，一張裡並不能放東西，它自己就是自己的內容。盒子中的區域 乙個盒子中主要的屬性就5個 width height padding border mar...
css盒子模型 說說css盒子模型
引用mdn官方的解釋 當對乙個文件進行布局 lay out 的時候，瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型 css basic box model 將所有元素表示為乙個個矩形的盒子 box css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...