css最重要的是盒子模型，盒子組成一切
盒子構成：
首先可以直接設定各個區域
.box
（當width和height為預設時，即auto，這時內邊距不會影響可見框的大小，而是會自動修改width和height，以適應內邊距，即一變大一變小，父元素內容區未指定資料也是預設被內容撐開的）
介紹乙個建立div的快捷方式（div.box$*10:建立10個div，類名從box1到box10）
為乙個元素設定邊框必須指定三個樣式（至少有樣式才能看到邊框，因為大部分瀏覽器會為顏色和寬度備有預設值，而邊框樣式預設值是none，即無）：
分別指定四個邊不同樣式：例如：border-width:10px 20px 30px 40px
順序為：（順時針）上 右 下 左
當只寫三個引數時：上 左右 下
只寫兩個引數時：上下 左右
也可使用：border-***-width: 30px;(其他什麼顏色風格都一樣，內邊距外邊距是一樣道理)。例子：border-left-width:40px;設定左邊框寬度。
***值有：top ; right ; bottom ; left
其他示例：border-***-style：double；
常用樣式：
簡寫模式：border: red solid 30px;三個元素無順序區分，都可以，不會有影響。但是border不能分別指定四個邊，只能同時指定四個邊。
所以還可以使用：border-***:red solid 30px;僅僅指定一條邊；
但只設定三條邊時，為了簡單還可以----先用border設定所有邊，然後取消掉一條邊的樣式。
border:red solid 30px;
border-right:none;
盒子內容區與盒子邊框之間的距離叫內邊距；
四個方向內邊距設定：
盒子可見框的寬度=width + padding-left + padding-right + border-left-width + border-right-width；可見框高度同理；
外邊距是指當前盒子與其他盒子之間的距離，它不會影響可見框的大小，但是會影響當前盒子的位置。
盒子有四個方向的外邊距：
屬性margin可同時設定四個方向的值：margin:20px 30px 40px 10px;與border一樣。
注意：兩相鄰盒子垂直外邊距之間會重疊，比如乙個處於上面的盒子下邊距為100px，下面盒子的上邊距為100px，那麼他們的距離為100px，而不是200px；兄弟元素的相鄰外邊距只會取最大值不會求和。（要點：相鄰，垂直方向外邊距）
如果父子元素的垂直外邊距相鄰了，那麼子元素的外邊距會設定給父元素。
解決方法 ：
.p1:before
內邊距：可以設定水平與垂直方向內邊距，但是垂直內邊距設定後不會影響頁面布局。只會覆蓋其他盒子。
邊框：可以設定邊框，但垂直方向同樣不能影響布局，水平會。
外邊距：水平方向上可以正常設定，但是與相鄰元素不是重疊而是求和。內聯元素不支援垂直方向外邊距設定。
display可以改變元素的型別（主要就是內聯元素和塊級元素）；
display:block;
常見可選值：
子元素預設是存在于父元素的內容區中，理論上子元素最大應該和父元素一樣大。但子元素大小超出父元素的內容區時，超出的內容會在父元素以外的位置顯示。超出父元素的內容稱為溢位的內容。即父元素預設將溢位內容顯示在外面。
而overflow就可以設定父元素如何處理溢位的元素，
可選值：
Web前端 CSS盒子模型
2.內邊距 3.盒陰影 4.盒模型概念 5.標籤最終尺寸的計算 盒子模型分別由外邊距 邊框 內邊距和標籤內容組成。屬性 margin 作用 調整標籤與標籤之間的距離 特殊 1 margin 0 取消預設外邊距 2 margin 0 auto 左右自動外邊距，實現標籤在父標籤範圍內水平居中 3 mar...
web前端 CSS 盒子模型 010
所有html元素可以看作盒子，在css中，box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了盒子模型 box model 不同部分的說明...
css盒子模型 前端系列 css盒子模型
1 盒子模型 下圖中可以看到，在設定width的時候，標準的盒子模型是不包括border和padding的，而在ie瀏覽器中是包括這兩項的。盒模型是有兩種標準的，乙個是標準模型，乙個是ie模型。標準模型中，盒模型的寬高只是內容 content 的寬高，預設正是w3c標準盒模型。而在ie模型中盒模型的...