先祝大家新年快樂～～其實(shí)年前已經(jīng)看完了老版視頻的，但因?yàn)閮?nèi)容比較多事情也比較多總結(jié)就耽擱了，后來看到新版的教程，想鞏固一遍再總結(jié)，結(jié)果發(fā)現(xiàn)新增的css3很多全新的內(nèi)容，比如動畫、簡單的過渡動效，一下子也難以吸收，就還是盡早把已學(xué)的做個鞏固吧，并且我會將新版教程的相關(guān)內(nèi)容也總結(jié)其中。
這一周信息量比較大，涉及到了css很重要的內(nèi)容，主要是盒子模型，一些重要屬性，另外還有表格表單等，所以還是分上下進(jìn)行整理。
在總結(jié)主要內(nèi)容前先總結(jié)下html的兩種元素類型特點(diǎn)和區(qū)別，塊元素和行內(nèi)元素。
塊元素（block element）：獨(dú)占一行，即它下面的元素自動換行顯示，可以用css設(shè)置塊元素的寬和高
行內(nèi)元素（inline element）:只占自身大小，不會占用一整行，不可以設(shè)置寬和高
一般來說，可以用塊元素嵌套行內(nèi)元素和塊元素，行內(nèi)元素不能包含塊元素，
但是塊元素<p>不可以包含任何塊元素；行內(nèi)元素<a>可以包含任何元素，除了它本身。
一.盒子模型（框模型）
css處理網(wǎng)頁時會把每一個元素看作是一個盒子，網(wǎng)頁布局其實(shí)就是擺放一個個盒子，在盒子里擺放元素就會涉及幾個概念，可以想象現(xiàn)實(shí)生活中，大盒子里放小盒子，小盒子間有距離，小盒子里裝的東西之間也有距離，在css中就是外邊距（margin）、內(nèi)邊距（padding），還有盒子本身的邊框（border），以及小盒子里容納東西的地方為內(nèi)容區(qū)（content）。
1.內(nèi)容區(qū)Content
元素是盛放在內(nèi)容區(qū)中的，塊元素可以設(shè)置height、width來控制大小，行內(nèi)元素可以通過display屬性轉(zhuǎn)換為塊元素或行內(nèi)塊元素來設(shè)置寬和高。
2.內(nèi)邊距Padding
內(nèi)邊距是盒子內(nèi)容區(qū)與邊框之間的距離，會影響可見框的大小。有四個方向分別是padding-top、padding-right、padding-bottom、padding-left，可以給指定方向的padding設(shè)置距離，簡寫屬性padding可以指零到四個值：
指定四個值，方向按順時針即上右下左的順序指定；
指定三個值，分別設(shè)置給 上 左右均分 下；
指定兩個值，分別設(shè)置給 上下均分 左右均分；
指定一個值，則四個方向均設(shè)置為這個值。
框模型的padding、border和margin都按照這個規(guī)則指定值。
3.邊框Border
邊框是當(dāng)前盒子的邊界，會影響可見框的大小。設(shè)置元素border有三個屬性：
border-width，設(shè)置元素邊框?qū)挾?/p>
border-color，設(shè)置元素邊框顏色
border-style，設(shè)置元素邊框樣式，常用可選值有
（1）none? 默認(rèn)值，無邊框
（2）solid? 實(shí)線
（3）dotted? 點(diǎn)狀邊框
（4）dashed? 虛線
（5）double? 雙線
簡寫border屬性時，邊框的三個屬性：寬度、顏色、樣式的值都要寫，每個屬性用空格隔開，沒有順序要求。
4.外邊距Margin
外邊距是指當(dāng)前盒子和其他盒子之間的距離，不會影響可見框的大小，會影響到盒子的位置。
使用簡寫屬性margin，左右的外邊距可以設(shè)置成auto：
-如果只指定左或者右外邊距為auto，則會將外邊距設(shè)置為最大值；
-垂直方向外邊距如果設(shè)置為auto，則外邊距默認(rèn)為0（一般不會設(shè)置給垂直方向）；
-如果左右外邊距同時設(shè)置為auto，則會將兩側(cè)外邊距設(shè)置為相同的值，就可以使元素在父元素中水平居中，即margin：0 auto??
5.水平方向
在盒子模型中水平方向必須滿足一個等式：
其父元素內(nèi)容區(qū)的寬度=
子元素的margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
如果設(shè)置的值不滿足這個等式則瀏覽器會自動調(diào)整未設(shè)置的值，使其滿足等式，默認(rèn)調(diào)整margin-right的值，如果margin-left 、margin-right? 、width中有值設(shè)置了auto，則：
-一個值設(shè)為auto，則調(diào)這個值使等式成立；
-寬度和一個外邊距設(shè)為auto，則寬度會調(diào)整到最大，設(shè)置為auto的那個外邊距會自動為0；
-兩個外邊距設(shè)為auto，寬度固定，則外邊距設(shè)為相同的值（水平居中）
6.垂直方向
子元素都是在父元素的內(nèi)容區(qū)排列的，默認(rèn)情況下，父元素的高度會被子元素?fù)伍_，如果父元素也設(shè)置了高度，而子元素大小超出了父元素，則超出部分就會從父元素中溢出。
針對溢出部分內(nèi)容，css中可以用overflow屬性來處理，用overflow-x可以單獨(dú)處理水平方向的溢出內(nèi)容，overflow-y單獨(dú)處理垂直方向的溢出內(nèi)容。該屬性可選值有：
-visible 默認(rèn)值，默認(rèn)不做處理任憑溢出
-hidden 溢出內(nèi)容會被修剪，不會顯示
-scroll 增加滾動條，通過拖動滾動條查看溢出內(nèi)容，但是該屬性無論有無內(nèi)容溢出，都會增加水平垂直兩方向的滾動條
-auto 根據(jù)內(nèi)容，按需求自動添加滾動條（推薦）
7.行內(nèi)元素的盒子模型
正如一開始總結(jié)的那樣，元素類型有塊元素和行內(nèi)元素，它們有明顯的區(qū)別，對應(yīng)的盒子模型也有些許不同：
-內(nèi)聯(lián)元素不能設(shè)置width和height，他的高度和寬度由內(nèi)容決定，被內(nèi)容撐開
-padding：可以設(shè)置水平方向內(nèi)邊距padding-left，padding-right；可以設(shè)置垂直方向內(nèi)邊距，有顯示效果，但是不會影響頁面布局（溢出的不顯示）
-border：可以設(shè)置水平方向的border；垂直邊框不會影響頁面布局
-margin：可以設(shè)置水平方向margin，并且相鄰的不會重疊（相加）；垂直外邊距同樣不會影響頁面布局。
8.屬性display和屬性visibility
（1）屬性display
通過該屬性可以修改元素類型，可選值有：
-block：可將一個元素轉(zhuǎn)換為塊元素顯示
-inline：可以將一個元素轉(zhuǎn)換為行內(nèi)元素顯示
-inline-block：可以將一個元素轉(zhuǎn)換為行內(nèi)塊元素，即一個元素既有行內(nèi)元素特點(diǎn)又有塊元素特點(diǎn)，既可以設(shè)置寬高，又不會獨(dú)占一行（比如img標(biāo)簽），盡量避免使用
-table：可以將一個元素設(shè)置為表格顯示
-none：不顯示元素，并且元素不會在頁面中占有位置，可以用來設(shè)置下拉菜單
（2）屬性visibility
用來設(shè)置元素的隱藏和顯示狀態(tài)，可選值：
-visible：默認(rèn)值，元素會默認(rèn)顯示
-hidden：元素會被隱藏，但仍會占據(jù)位置
9.可見框大小
默認(rèn)情況下可見框的大小是由內(nèi)容區(qū)、內(nèi)邊距、邊框共同決定的，屬性box-sizing可以用來設(shè)置盒子尺寸的計(jì)算方式，可選值有：
-content-box? 默認(rèn)值，設(shè)置的高度和寬度作用于內(nèi)容區(qū)，
-border-box? 寬度和高度作用于整個盒子的可見框大小，自動調(diào)整內(nèi)容區(qū)的大小，使整個可見框的大小等于設(shè)置的寬度和高度。
10.float屬性
元素默認(rèn)是在文檔流中排列，其特點(diǎn)有：
-塊元素從上至下排列，獨(dú)占一行，默認(rèn)寬度是父元素的全部，即撐滿父元素，默認(rèn)高度被內(nèi)容撐開；
-內(nèi)聯(lián)元素自左向右水平排列，只占自身大小，寬度和高度被內(nèi)容撐開，不可設(shè)置；
-文檔流的層級處于最底層。
因此要靈活設(shè)置布局，需要使元素脫離文檔流，可以設(shè)置float屬性來使元素脫離文檔流，塊元素將水平并排，可選值：
-none 默認(rèn)值，元素默認(rèn)在文檔流中排列
-left 元素會立即脫離文檔流，向頁面左側(cè)浮動
-right 元素會立即脫離文檔流，向頁面右側(cè)浮動
當(dāng)為一個元素設(shè)置浮動以后：
（1）元素會立即脫離文檔流，該元素下邊的元素會向上移動，元素浮動以后會盡量向頁面左上或右上漂浮，直到遇到父元素的邊框或者其他浮動元素為止；
（2）如果浮動元素上邊為塊元素，則浮動元素不會超過塊元素；
（3）浮動元素不會超過它上邊的兄弟元素；
（4）浮動元素不會蓋住文字，文字自動環(huán)繞在浮動元素周圍，可以通過浮動設(shè)置文字環(huán)繞圖片效果；
（5）當(dāng)元素設(shè)置浮動后，會完全脫離文檔流，沒有塊元素和內(nèi)聯(lián)元素區(qū)別，都變成塊元素；
（6）塊元素脫離文檔流后，高度和寬度都會被內(nèi)容撐開；
（7）內(nèi)聯(lián)元素脫離文檔流后，會變成塊元素，寬度高度可以設(shè)置，都被內(nèi)容撐開。
11.垂直外邊距折疊和高度塌陷問題
（1）垂直外邊距折疊
原因：相鄰的垂直方向外邊距會發(fā)生重疊現(xiàn)象
1）兄弟元素之間的相鄰?fù)膺吘?，如果都設(shè)置了，一般不會相加：
-都是正值，會取一個較大值
-特殊情況：一正一負(fù)，取和；兩負(fù)值，取絕對值大的
兄弟元素之間外邊距的重疊，一般不需要處理。
2）父子元素間的相鄰?fù)膺吘啵?b>子元素上外邊距會傳遞給父元素，會影響頁面整體布局，必須進(jìn)行處理。
3）解決方式
讓父子元素不相鄰，選擇父元素before偽類，添加空內(nèi)容，再用display將其轉(zhuǎn)換成塊元素，值選擇table，這樣既轉(zhuǎn)換為了塊元素，也不增加距離，結(jié)構(gòu)上也沒有增添內(nèi)容以，此使兩個元素不相鄰，解決高度折疊問題。
（2）浮動元素高度塌陷問題
原因：在文檔流中，父元素一直適應(yīng)子元素高度，但是當(dāng)子元素浮動，因?yàn)槲臋n流層級最低，所以子元素高度不會撐開父元素，導(dǎo)致父元素高度塌陷，由于父元素的高度塌陷了，所有該父元素下的子元素都會向上移動，導(dǎo)致布局紊亂
解決方式：通過after偽類，選中高度塌陷的父元素后邊，添加一個空內(nèi)容，用display轉(zhuǎn)換為一個塊元素，再用clear清除浮動，幾乎沒有副作用，完美解決
ps：clear屬性來清除其他浮動元素對當(dāng)前元素的影響，可選值：
（1）none 默認(rèn)值不清除浮動
（2）left 清除左側(cè)浮動元素對當(dāng)前元素的影響
（3）right 清除右側(cè)浮動元素對當(dāng)前元素的影響
（4）both 清除兩側(cè)中對他影響最大的浮動元素對當(dāng)前元素的影響
（3）解決垂直外邊距折疊和高度塌陷問題的代碼
既可以解決高度塌陷又可以確保父元素和子元素的垂直外邊距不會重疊：
.clearfix::before,
.clearfix::after{
content:"";
display:table;
clear:both;}
在出現(xiàn)問題的父元素中增添這個clearfix類名即可。
