昨晚凌晨的那一刻——00:00瑰枫，意味著新的一年的到來踱葛，讓我們?nèi)ビ鲆姼玫淖约骸２还艽蠹?017年過得怎樣光坝，我們終將會(huì)跟他說“分手”尸诽，說再見，再也不見吧盯另！那些好的性含、壞的只會(huì)停留在2017年，我們將瀟灑地向前走鸳惯，一切歸零商蕴，重新出發(fā)，從心出發(fā)芝发，行動(dòng)出發(fā)而不是說說而已绪商，加油ヾ(?°?°?)??。
進(jìn)入正題：
最近在惡補(bǔ)前端的一些小知識辅鲸，開始學(xué)習(xí)前端知識的時(shí)候格郁，心中覺得不就是幾個(gè)標(biāo)簽嘛，可是越到后來才發(fā)覺還是有點(diǎn)小難度的独悴，能夠合理運(yùn)用各個(gè)標(biāo)簽的屬性例书，牢記他們的作用，需要實(shí)際操作滴刻炒。
（一）CSS的盒子模型
屬性名：content 决采、 padding 、border 坟奥、margin
形象的比喻：
1.content—— 盒子里面所裝的內(nèi)容
2.padding —— 為了保護(hù)物品所添加的填充材料
3.border——盒子本身
4.margin——盒子之間需要通風(fēng)的間隙
CSS盒子具有彈性织狐，里面的東西大過盒子本身最多把它撐大，但不會(huì)損壞
（二）標(biāo)簽分類：行內(nèi)元素筏勒、塊元素移迫，替換元素、非替換元素管行；
- 替換元素與非替換元素
替換元素是瀏覽器根據(jù)其標(biāo)簽的元素與屬性來判斷顯示具體的內(nèi)容厨埋。
比如：<input type="text" />，這是一個(gè)文本輸入框捐顷，換一個(gè)其他的時(shí)候荡陷，瀏覽器顯示就不一樣
HTML中的<img>雨效、<input>、<textarea>废赞、<select>徽龟、<object>都是替換元素，這些元素都沒有實(shí)際的內(nèi)容唉地。
非替換元素：
HTML 的大多數(shù)元素是不可替換元素据悔，他們將內(nèi)容直接告訴瀏覽器，將其顯示出來耘沼。比如<p>wanmei.com</p>极颓，瀏覽器將把這段內(nèi)容直接顯示出來。
- 內(nèi)聯(lián)元素（行內(nèi)元素）與塊元素
塊元素：最明顯的特征就是獨(dú)自占領(lǐng)一行群嗤，自動(dòng)充滿父級元素的內(nèi)容區(qū)域菠隆，絕不會(huì)讓別人“侵略”（當(dāng)然可以通過其他方式去改變他）。
- 常見的有：div狂秘，p..等等骇径；
- 通過CSS設(shè)定了浮動(dòng)（float屬性，可向左浮動(dòng)或向右浮動(dòng)）以及設(shè)定顯示（display）屬性為“block”或“l(fā)ist-item”的元素都是塊級元素者春。這個(gè)地方浮動(dòng)是一個(gè)比較特殊的情況破衔，可以詳查浮動(dòng)這個(gè)知識
- 塊級元素的width/height/margin/padding都是有效的；
行內(nèi)元素：
上面說塊及元素獨(dú)自占領(lǐng)一行碧查，行內(nèi)元素就沒這么霸道了运敢，他可以左右都允許有元素，最常見的就是<a></a>忠售，通過display:'inline'設(shè)置以后都會(huì)變成行內(nèi)元素传惠。
3.行內(nèi)非替換元素：
對行內(nèi)非替換元素如a元素、span元素等稻扬，
- 設(shè)置寬度width 無效卦方、設(shè)置高度height無效，可以通過line-height來設(shè)置泰佳。
- 設(shè)置margin只有左右margin有效盼砍，上下無效。（這就是span的margin-top無效的原因）
- 設(shè)置padding只有左右padding有效逝她，上下則無效浇坐。
- 外邊距
- 行內(nèi)元素的padding-top，padding-bottom和margin-top,margin-bottom是真的是無效黔宛；并且近刘，左右外邊距不會(huì)合并，不過要注意一點(diǎn)，對于豎直方向的內(nèi)邊距該行內(nèi)元素的內(nèi)容范圍是增大了觉渴，不過只是表象介劫，對周圍元素?zé)o任何影響。
- 塊級元素的垂直相鄰?fù)膺吘鄷?huì)合并
（三）Box-sizing
在CSS中案淋，你設(shè)置一個(gè)元素的 width 與 height 只會(huì)應(yīng)用到這個(gè)元素的內(nèi)容區(qū)座韵。如果這個(gè)元素有任何的 border 或 padding ，繪制到屏幕上時(shí)的盒子寬度和高度會(huì)加上設(shè)置的邊框和內(nèi)邊距值踢京。這意味著當(dāng)你調(diào)整一個(gè)元素的寬度和高度時(shí)需要時(shí)刻注意到這個(gè)元素的邊框和內(nèi)邊距誉碴。當(dāng)我們實(shí)現(xiàn)響應(yīng)式布局時(shí)，這個(gè)特點(diǎn)尤其煩人漱挚。
box-sizing 屬性可以被用來調(diào)整這些表現(xiàn):在CSS中翔烁，你設(shè)置一個(gè)元素的 width 與 height 只會(huì)應(yīng)用到這個(gè)元素的內(nèi)容區(qū)渺氧。如果這個(gè)元素有任何的 border 或 padding 旨涝，繪制到屏幕上時(shí)的盒子寬度和高度會(huì)加上設(shè)置的邊框和內(nèi)邊距值。這意味著當(dāng)你調(diào)整一個(gè)元素的寬度和高度時(shí)需要時(shí)刻注意到這個(gè)元素的邊框和內(nèi)邊距侣背。當(dāng)我們實(shí)現(xiàn)響應(yīng)式布局時(shí)白华，這個(gè)特點(diǎn)尤其煩人。
box-sizing 屬性可以被用來調(diào)整這些表現(xiàn):
- content-box 是默認(rèn)值贩耐。如果你設(shè)置一個(gè)元素的寬為100px弧腥，那么這個(gè)元素的內(nèi)容區(qū)會(huì)有100px寬，并且任何邊框和內(nèi)邊距的寬度都會(huì)被增加到最后繪制出來的元素寬度中潮太。
- border-box 告訴瀏覽器去理解你設(shè)置的邊框和內(nèi)邊距的值是包含在width內(nèi)的管搪。也就是說，如果你將一個(gè)元素的width設(shè)為100px,那么這100px會(huì)包含其它的border和padding铡买，內(nèi)容區(qū)的實(shí)際寬度會(huì)是width減去border + padding的計(jì)算值更鲁。大多數(shù)情況下這使得我們更容易的去設(shè)定一個(gè)元素的寬高。
值
content-box
默認(rèn)值奇钞，標(biāo)準(zhǔn)盒子模型澡为。 width 與 height 只包括內(nèi)容的寬和高， 不包括邊框（border）景埃，內(nèi)邊距（padding）媒至，外邊距（margin）。注意: 內(nèi)邊距, 邊框 & 外邊距 都在這個(gè)盒子的外部谷徙。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在瀏覽器中的渲染的實(shí)際寬度將是370px;
尺寸計(jì)算公式：width = 內(nèi)容的寬度拒啰，height = 內(nèi)容的高度。寬度和高度都不包含內(nèi)容的邊框（border）和內(nèi)邊距（padding）完慧。
border-box
width 和 height 屬性包括內(nèi)容谋旦，內(nèi)邊距和邊框，但不包括外邊距。這是當(dāng)文檔處于 Quirks模式 時(shí)Internet Explorer使用的盒模型蛤织。注意赴叹，填充和邊框?qū)⒃诤凶觾?nèi) , 例如, .box {width: 350px; border: 10px solid black;} 導(dǎo)致在瀏覽器中呈現(xiàn)的寬度為350px的盒子。內(nèi)容框不能為負(fù)指蚜，并且被分配到0乞巧，使得不可能使用border-box使元素消失。
這里的維度計(jì)算為：
width = border + padding + 內(nèi)容的 width摊鸡，
height = border + padding + 內(nèi)容的 height绽媒。<dt>content-box</dt>
幸福是奮斗出來的！Ｃ饣是辕！
