其實，css就三個大模組：盒子模型、浮動、定位，其餘的都是細節。要求這三部分，無論如何也要學的非常精通。
所謂盒子模型就是把html頁面中的元素看作是乙個矩形的盒子，也就是乙個盛裝內容的容器。每個矩形都由元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。
看透網頁布局的本質
把網頁元素比如文字等等，放入盒子裡面，然後利用css擺放盒子的過程，就是網頁布局。
css 其實沒有太多邏輯可言 ， 類似我們小時候玩的積木,我們可以自由的，隨意的擺放出我們想要的效果。
盒子邊框（border）
語法：
border : border-width || border-style || border-colornone：沒有邊框即忽略所有邊框的寬度（預設值）
solid：邊框為單實線(最為常用的)
dashed：邊框為虛線
dotted：邊框為點線
double：邊框為雙實線
設定內容 樣式屬性 常用屬性值
上邊框 border-top-style:樣式;
border-top-width:寬度;
border-top-color:顏色;
border-top:寬度 樣式 顏色;
下邊框 border-bottom-style:樣式;
border-bottom-width:寬度;
border-bottom-color:顏色;
border-bottom:寬度 樣式 顏色;
左邊框 border-left-style:樣式;
border-left-width:寬度;
border-left-color:顏色;
border-left:寬度 樣式 顏色;
右邊框 border-right-style:樣式;
border-right-width:寬度;
border-right-color:顏色;
border-right:寬度 樣式 顏色;
樣式綜合設定 border-style:上邊 [右邊 下邊 左邊]; none無（預設）
solid單實線
dashed虛線
dotted點線
double雙實線
寬度綜合設定 border-width:上邊 [右邊 下邊 左邊]; 畫素值
顏色綜合設定 border-color:上邊 [右邊 下邊 左邊]; 顏色值
#十六進製制
rgb(r,g,b)
rgb(r%,g%,b%)
邊框綜合設定 border:四邊寬度 四邊樣式 四邊顏色;
border-top: 1px solid red; /*上邊框*/
border-bottom: 2px solid green; /*下邊框*/
border-left: 1px solid blue;
border-right: 5px solid pink;
border: 1px solid red;
以前學過的html**邊框很粗，這裡只需要css一句話就可以美觀起來。 讓我們真的相信，css就是我們的白馬王子（白雪公主）。
table collapse單詞是合併的意思
border-collapse:collapse; 表示相鄰邊框合併在一起。
圓角邊框(css3)：
從此以後，我們的世界不只有矩形。radius 半徑（距離）
語法格式：
border-radius: 50%;padding屬性用於設定內邊距。是指邊框與內容之間的距離。
padding-top:上內邊距
padding-right:右內邊距
padding-bottom:下內邊距
padding-left:左內邊距
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
css之盒子模型
一 前言 盒子模型，英文即box model。無論是div span 還是a都是盒子。但是，表單元素一律看作是文字，它們並不是盒子。這個很好理解，比如說，一張裡並不能放東西，它自己就是自己的內容。盒子中的區域 乙個盒子中主要的屬性就5個 width height padding border mar...
html盒子模型 jquery盒子模型
最近學了jquery的盒子模型之後，感覺真的顛覆我之前對盒子模型的看法，我在最初以為盒子模型只存在於html,我們就來看看他們有何區別。1.html盒子模型 如果說js裡面萬物皆是物件，那麼html裡面的萬物皆是盒子。不是盒子的我們也可以用dispiay block 變成盒子。那他的盒子是怎麼計算的...