【CSS】【7】CSS的盒子模型
這裡單獨地把一個盒子拿出來,就會發現由外邊距、邊框、內邊距和內容四部分構成:
這裡面紅線所標識的為外邊距(margin)、再向裡灰色的標識為邊框(border)、藍色線所標識的為內邊距(padding)、再向裡是具體的內容(content),是否與照片非常相似?此時也可以認為盒子模型中的盒子就是一個塊(div),它是由相片框、相片及相片框與外面牆的距離、相片框和相片之間的距離所構成。
二、舉例:
1、
div
{
margin:3px 5px 6px;
padding:4px 6px;
border-width:6px;
border-color:black;
width:500;
heigth:300;
}
這段CSS定義描述了這麼一個盒子:
它的外邊距與頂部的距離為3畫素、外邊距與左右部的距離為5畫素,外邊距為底部的距離為6畫素;
它的邊框寬度為6畫素,邊框顏色為黑色;
它的內邊距與上下邊框的距離為4畫素,與左右邊框的距離為6畫素;
照片的大小為500*300
2、盒子預設值的說明,以margin為例:
margin:4px;
表示盒子與上右下左邊距的距離均為4畫素;
margin:4px 6px;
表示盒子與上下邊距的距離為4畫素,右左邊距的距離為6畫素;
margin:4px 5px 6px;
表示盒子與上邊距的距離為4畫素,與右左邊距的距離為5畫素,與下邊距的距離為6畫素;
margin:4px 5px 6px 7px;
表示盒子與上邊距的距離為4畫素,與右邊距的距離為5畫素,與下邊距的距離為6畫素,與左邊距的距離為7畫素;
3、瞭解了盒子的概念之後,自己再實現一遍《【CSS】【6】CSS學習的一些前提》。
本文轉自qingkechina 51CTO部落格,原文連結:http://blog.51cto.com/qingkechina/1261738,如需轉載請自行聯絡原作者
相關文章
- CSS盒子模型CSS模型
- CSS 盒子模型CSS模型
- CSS之盒子模型CSS模型
- CSS盒子模型詳解CSS模型
- css學習-盒子模型CSS模型
- 關於 CSS 盒子模型CSS模型
- CSS佈局-盒子模型CSS模型
- css盒子模型與盒模型的浮動CSS模型
- 總是記不住的css盒子模型CSS模型
- css內聯樣式的盒子模型CSS模型
- css盒子模型的屬性介紹CSS模型
- CSS盒子CSS
- css 盒子模型和position總結CSS模型
- Html/CSS03(盒子模型傳參)HTMLCSS模型
- CSS 小結筆記之盒子模型CSS筆記模型
- CSS學習筆記(一) 盒子模型CSS筆記模型
- 【Hello CSS】第二章-CSS的邏輯屬性與盒子模型CSS模型
- css盒模型以及如何計算盒子的寬度CSS模型
- css選擇器,盒子模型,定位,動畫CSS模型動畫
- css實現盒子模型的各種居中方式CSS模型
- CSS 盒子的邊距塌陷CSS
- 【靜態頁面架構】CSS之盒子模型架構CSS模型
- 總結一下css中的盒子模型和position定位CSS模型
- css 盒子溢位問題CSS
- 【WEB基礎】HTML & CSS 基礎入門(9)CSS盒子WebHTMLCSS
- CSS——把“可以動的盒子”更優雅地展示:② “居中”盒子CSS
- CSS的基本屬性,行級、塊級、行級塊標籤,盒子模型CSS模型
- css 盒模型CSS模型
- CSS盒模型CSS模型
- CSS——讓“盒子”動起來:① 浮動CSS
- CSS——CSS 基本視覺格式化:② “行內盒子”格式化CSS視覺
- Css規範整理:2、css盒模型CSS模型
- CSS——CSS 給盒子、背景、連結、列表、表單、表格等加樣式CSS
- CSS的兩種盒模型CSS模型
- CSS 屬性篇(四):Flex彈性盒子CSSFlex
- css3系列之彈性盒子 flexCSSS3Flex
- 精通CSS盒模型CSS模型
- CSS盒模型深入CSS模型
- css之盒模型CSS模型