2018，你好

昨晚凌晨的那一刻——00:00，意味著新的一年的到來，讓我們?nèi)ビ鲆姼玫淖约?。不管大?017年過得怎樣，我們終將會跟他說“分手”，說再見，再也不見吧！那些好的、壞的只會停留在2017年，我們將瀟灑地向前走，一切歸零，重新出發(fā)，從心出發(fā)，行動出發(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盒子具有彈性，里面的東西大過盒子本身最多把它撐大，但不會損壞

（二）標(biāo)簽分類：行內(nèi)元素、塊元素，替換元素、非替換元素；

1. 替換元素與非替換元素

替換元素是瀏覽器根據(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)容直接顯示出來。

2. 內(nèi)聯(lián)元素（行內(nèi)元素）與塊元素

塊元素：最明顯的特征就是獨(dú)自占領(lǐng)一行，自動充滿父級元素的內(nèi)容區(qū)域，絕不會讓別人“侵略”（當(dāng)然可以通過其他方式去改變他）。

• 常見的有：div，p..等等；
• 通過CSS設(shè)定了浮動（float屬性，可向左浮動或向右浮動）以及設(shè)定顯示（display）屬性為“block”或“l(fā)ist-item”的元素都是塊級元素。這個(gè)地方浮動是一個(gè)比較特殊的情況，可以詳查浮動這個(gè)知識
• 塊級元素的width/height/margin/padding都是有效的；
  行內(nèi)元素：
  上面說塊及元素獨(dú)自占領(lǐng)一行，行內(nèi)元素就沒這么霸道了，他可以左右都允許有元素，最常見的就是<a></a>，通過display:'inline'設(shè)置以后都會變成行內(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有效，上下則無效。

4. 外邊距

• 行內(nèi)元素的padding-top，padding-bottom和margin-top,margin-bottom是真的是無效；并且，左右外邊距不會合并，不過要注意一點(diǎn)，對于豎直方向的內(nèi)邊距該行內(nèi)元素的內(nèi)容范圍是增大了，不過只是表象，對周圍元素?zé)o任何影響。
• 塊級元素的垂直相鄰?fù)膺吘鄷喜?/li>

（三）Box-sizing
在CSS中，你設(shè)置一個(gè)元素的 width 與 height 只會應(yīng)用到這個(gè)元素的內(nèi)容區(qū)。如果這個(gè)元素有任何的 border 或 padding ，繪制到屏幕上時(shí)的盒子寬度和高度會加上設(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 只會應(yīng)用到這個(gè)元素的內(nèi)容區(qū)。如果這個(gè)元素有任何的 border 或 padding ，繪制到屏幕上時(shí)的盒子寬度和高度會加上設(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ū)會有100px寬，并且任何邊框和內(nèi)邊距的寬度都會被增加到最后繪制出來的元素寬度中。
• border-box 告訴瀏覽器去理解你設(shè)置的邊框和內(nèi)邊距的值是包含在width內(nèi)的。也就是說，如果你將一個(gè)元素的width設(shè)為100px,那么這100px會包含其它的border和padding，內(nèi)容區(qū)的實(shí)際寬度會是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>

幸福是奮斗出來的！?。?/p>