w3c盒，怪異盒子，彈性盒子
#5.29-2
##def不再贅述
border邊框
有三個要素：寬、樣式、顏色，統稱「邊框三要素」。
三要素書寫的時候一般如下順序
border：寬度 樣式 顏色
border: 1px solid red;
樣式：點狀dotted 實線solid
雙線double （ 需要最起碼設定為3畫素，不然顯示不下）
虛線dashed 無邊框none
margin外邊距
會在元素外建立額外的空白區域 外邊距是透明的
簡寫：margin:value(四個方向相同) ;
margin: value(上下) value(左右);
margin: value(上) value(左右) value(下);
margin: value(上) value(右) value(下) value(左);
###外邊距合併###
當兩個垂直外邊距相遇時，他們將形成乙個外邊距，成為外邊距合併
合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者
margin設定元素外邊距的寬度，它有這麼幾個特點：
1. 塊級元素的垂直相鄰外邊距會合併
2. 行內元素實際上不佔上下外邊距。行內元素的的左右外邊距不合併
3. 浮動元素的外邊距也不會合併
4. 允許指定負的外邊距值，不過使用時要小心
padding內邊距
內容區域和邊框之間的空間 會擴大元素邊框所占用的區域
ie的盒子模型，ie的盒子模型也被叫怪異盒子。
和標準盒子模型不同的是：ie 盒子模型的寬，包含了 border 和 pading。
怪異盒子：
組成部分： content+padding+border+margin
實際寬度：width+margin (width包含padding+border)
用box-sizing進行定義：
box-sizing屬性允許你以「w3c的盒模型」或「ie盒模型」來定義元素，以適應區域。
它有兩個值
content-box（標準）
padding和border不被包含在width和height內，元素的實際大小為寬高+border+padding，此為標準模式下的盒模型。
border-box（怪異）
padding和border被包含在定義的width和height中，元素實際的大小為你定義了多寬就是多寬。此屬性為怪異模式下的盒模型。
伸縮盒模型也叫彈性盒模型，或flexbox。它決定乙個盒子在其它盒子中的分布，以及如何處理可用的空間。使用該模型，可以輕鬆的建立「自適應」瀏覽器視窗的流動布局。
——for移動端
目的：在瀏覽器視窗變化時，盒子相應改變大小。
要開啟彈性盒模型，只需要設定display的屬性值 flex，因為它是css3中為display新新增的值型別。
設定了彈性盒模型後，float，clear和vertical-align在flex中不起作用。
設定方法：
父容器屬性：
display: flex; 申明為彈性盒子，預設子容器水平布局
flex-direction:column; //子容器垂直布局
justify-content:center; 子專案水平對齊方式
align-items:center; 子專案垂直對齊方式
子容器屬性：
flex-grow: number; 該子專案佔的比重1/2/3···
最基本的瀏覽器核心有如下四種，其它的核心都是基於此四種進行再研發的。
1.gecko核心 字首為-moz- 火狐瀏覽器
2.webkit核心字首為-webkit-也叫谷歌核心，chrome瀏覽器最先開發使用，safari瀏覽器也使用該核心。國內很多瀏覽器也使用了webkit核心，如360極速、世界之窗、獵豹等。
3.trident核心 字首為-ms- 也稱ie核心
4.presto核心 字首-o- 目前只有opera採用
e.g.1.webkit核心背景切割-webkit-background-clip
text 從文字區域開始實現背景
border-box 從邊框開始實現背景
content-box 從內容區域開始實現背景
padding-box 從padding區域開始實現背景
e.g.2.transition
包容。
前端 CSS基礎理論總結（九）
css3圓角 陰影 rgba css3陰影 rgba 新的顏色值表示法 css3 transition動畫 transition delay 設定動畫的延遲 transition property duration timing function delay 同時設定四個屬性 舉例 css3 tra...
前端 HTML基礎理論總結（一）
一 什麼是b s 二 軟體開發流程 三 網頁三要素 四 html 五 html基本結構 六 標籤 標籤名 標籤內容七 元素上邊的h1我們稱為元素 我是乙個段落 p也是乙個元素，em是p的子元素，p是em的父元素 內容 body也是乙個元素，body是p和em的祖先元素，p和em是body的後代元素 ...
前端 JS基礎理論總結（一）
特點 js的編寫位置 js的注釋 js中嚴格區分大小寫 js中每一條語句以分號 結尾 js中會忽略多個空格和換行，所以我們可以利用空格和換行對 進行格式化 字面量和變數 識別符號 資料型別 string 字串 number 數值 boolean 布林值 null 空值和undefined 未定義 強...