CSS 基礎教程
- CSS 介紹
- CSS 入門
- CSS 語法
- CSS 選擇器
- CSS Color(顏色)
- CSS Background(背景)
- CSS Fonts(字體)
- CSS Text(文本)
- CSS Links(鏈接)
- CSS Lists(列表)
- CSS Tables(表格)
- CSS Outline(輪廓)
- CSS Cursors(光標)
- CSS Overflow(溢出)
- CSS Dimension(尺寸)
- CSS Units(單位)
- CSS 視覺格式模型
- CSS Display(顯示)
- CSS Visibility(可見性)
- CSS Position(定位)
- CSS Layers(層級)
- CSS Float(浮動)
- CSS Alignment(元素對齊)
- CSS Pseudo-classes(偽類 )
- CSS Pseudo-elements(偽元素)
- CSS @media(媒體)
- CSS Sprites(精靈圖)
- CSS Opacity(透明度)
- CSS 屬性選擇器
- CSS line-height(行高)
- CSS vertical-align(垂直對齊)
- CSS white-space(空白)
- CSS word-wrap(自動換行)
- CSS Counter(計數(shù)器)
- css Layout(網(wǎng)頁布局)
- CSS 實例大全
CSS 盒子模型
CSS3基礎教程
- CSS3 教程
- CSS3 簡介
- CSS3 邊框(Border)
- CSS3 顏色(Color)
- CSS3 背景(Background)
- CSS3 漸變(Gradients)
- CSS3 文本溢出(Text Overflow)
- CSS3 陰影(Shadows)
- CSS3 2D 轉換
- CSS3 3D 轉換
- CSS3 過渡效果
- CSS3 動畫(Animations)
- CSS3 多列布局
- CSS3 框大小(box-sizing)
- CSS3 彈性盒子布局
- CSS3 濾鏡(Filters)
- CSS3 媒體查詢
- CSS3 其他
CSS 參考手冊
- CSS 屬性大全手冊（按功能）
- ?CSS @規(guī)則(At-rules)
- CSS 動畫屬性
- CSS 顏色值
- CSS 合法顏色名稱
- CSS 網(wǎng)頁安全字體
- CSS 聽覺參考手冊
- CSS 十六進制值顏色
- CSS 選擇器大全
- CSS 函數(shù)(Functions)
- CSS 屬性大全(按字母)
CSS @規(guī)則(RULES)
CSS Box(盒子模型)
CSS框模型描述了如何在網(wǎng)頁上直觀地布局元素。
什么是盒子模型
可以顯示的每個元素都包含一個或多個矩形框。CSS框模型通常描述如何在網(wǎng)頁上布置這些矩形框。這些框可以具有不同的屬性，并且可以以不同的方式彼此交互，但是每個框都有一個內容區(qū)域以及可選的周圍邊距，邊距和邊框。
下圖演示了margin，padding和border CSS屬性如何確定元素在網(wǎng)頁上可占用的空間。
元素的寬度和高度
通常，當您使用CSS width和height屬性設置元素的寬度和高度時，實際上，您只是在設置元素內容區(qū)域的寬度和高度。元素框的實際寬度和高度取決于幾個因素。
元素框可能占用的實際空間是這樣計算的：
| 箱體尺寸 | CSS屬性 |
|---|---|
| 總寬度 | width+ padding-left+ padding-right+ border-left+ border-right+ margin-left+margin-right |
| 總高度 | height+ padding-top+ padding-bottom+ border-top+ border-bottom + margin-top+margin-bottom |
在接下來的章節(jié)中給出的不同屬性的用法。
注意：在CSS盒子模型中；元素框的內容區(qū)域是顯示文本，圖像，列表，表格，表單，視頻等的區(qū)域。