作為一名經(jīng)常接觸網(wǎng)站，并且寫過網(wǎng)站的人來(lái)說(shuō)遥巴，css可以說(shuō)是既熟悉又陌生分飞。熟悉是因?yàn)殂参瘢旧蠜]有搞網(wǎng)站的人不知道css的，陌生是因?yàn)楹芏嗳瞬粫?huì)去花很大的精力鉆研css譬猫，基本上是大概了解讯檐。CSS看似簡(jiǎn)單直接，實(shí)則有很多細(xì)節(jié)有待回味染服，而這些細(xì)節(jié)和瀏覽器的CSS解釋器邏輯緊密相關(guān)别洪。
CSS在這個(gè)層面上，和正則表達(dá)式柳刮，對(duì)于非專業(yè)前端網(wǎng)絡(luò)工程師是差不多的挖垛。是個(gè)工具，但是總不太愿意花很多時(shí)間在這兩個(gè)技術(shù)的鉆研上秉颗。我就是如此痢毒，所以以此，作為對(duì)css在使用中涉及的相關(guān)知識(shí)進(jìn)行總結(jié)站宗。
這里非常推薦這個(gè)網(wǎng)站學(xué)習(xí)css布局學(xué)習(xí)CSS布局
塊與內(nèi)聯(lián)
元素分類
塊級(jí)元素按照其應(yīng)用于結(jié)構(gòu)還是內(nèi)容分為三種：結(jié)構(gòu)化塊狀元素闸准，終端塊狀元素，多目標(biāo)塊狀元素梢灭。
具體各個(gè)分類請(qǐng)參考 html塊狀元素夷家、內(nèi)聯(lián)元素
塊元素
塊元素(block element) 通常作為其它元素的容器，它可以容納內(nèi)聯(lián)元素和其它塊元素敏释。 默認(rèn)情況下库快，塊元素會(huì)順序以每次另起一行的方式往下排，而通過CSS控制其樣式钥顽，我們可以改變這種默認(rèn)布局模式义屏，把塊元素?cái)[放到你想要的位置上去。需要指出的是，table標(biāo)簽也是塊元素的一種闽铐，基于table表格和基于CSS+DIV的布局蝶怔，在使用者看來(lái)除了頁(yè)面載入速度的差別（table在所有內(nèi)容元素加載完成后才顯示），沒有其它的差別。但是從頁(yè)面的源代碼來(lái)看，這種差異就非常大了故源。基于良好結(jié)構(gòu)理念設(shè)計(jì)的CSS布局源碼沐悦，至少能讓沒有 web開發(fā)經(jīng)驗(yàn)的用戶很容易找到連續(xù)的頁(yè)面內(nèi)容。從這個(gè)角度來(lái)說(shuō)五督，CSS layout code應(yīng)該有更好的美學(xué)體驗(yàn)藏否。 我們可以把模塊化的DIV想象成一個(gè)個(gè)box，然后把它們按自己的意愿排列組成完整的內(nèi)容充包，網(wǎng)頁(yè)布局設(shè)計(jì)就是遵循了同樣的模式
塊級(jí)元素(block)特性
- 總是獨(dú)占一行副签，表現(xiàn)為另起一行開始，而且其后的元素也必須另起一行顯示
- 寬度(width)误证、高度(height)继薛、內(nèi)邊距(padding)和外邊距(margin)都可控制;
內(nèi)聯(lián)元素
內(nèi)聯(lián)元素(inline element) 一般都是基于語(yǔ)義級(jí)(semantic)的基本元素，只能容納文本或者其它內(nèi)聯(lián)元素
內(nèi)聯(lián)元素(inline)特性
- 和相鄰的內(nèi)聯(lián)元素在同一行
- 高度愈捅，行高以及頂、底邊距不可改變
- 寬度就是它所容納的文字或圖片的寬度慈鸠，不可改變
以上是對(duì)塊和inline的簡(jiǎn)單說(shuō)明蓝谨，這個(gè)和定位有關(guān)。同時(shí)還有inline-block青团，有待研究
CSS定位
靜態(tài)定位
各個(gè)元素按照inline和block的自然方式排列譬巫。
此時(shí)的left和top無(wú)效
position：static
相對(duì)定位
元素基于靜態(tài)定位的常規(guī)位置，進(jìn)行偏移
此時(shí)
postion： relative
top和left用來(lái)控制偏移
** 注意 **：top督笆，left這類控制偏移的屬性指的是芦昔，上邊和左邊距離常規(guī)位置的距離。如果值為百分比娃肿，指的是相對(duì)于當(dāng)前元素寬度的百分比長(zhǎng)度咕缎。
絕對(duì)定位
postion：absolute
絕對(duì)定位是以整個(gè)網(wǎng)頁(yè)的視區(qū)為基準(zhǔn)的。
固定定位
postion：fixed料扰；
固定定位是以用戶的當(dāng)前視區(qū)為基準(zhǔn)的凭豪。所謂的滾動(dòng)跟隨就是用fixed實(shí)現(xiàn)的。
浮動(dòng)
參考以下效果晒杈，很明顯看出img被文字包圍了嫂伞。
正常顯示應(yīng)該是圖片正下方是文字，而這里文字像流水一樣float到了圖片的空檔處。
如果設(shè)置float：left|right帖努。那么該元素會(huì)浮動(dòng)到左邊界或者右邊界撰豺。可以設(shè)置為none拼余，那么則無(wú)float效果污桦。
如果float，則在空檔位置會(huì)被其他元素包圍姿搜。
clear
clear屬性可以用來(lái)清除元素的float效果寡润，所謂清除是指，該元素本身舅柜，不會(huì)由于其他相鄰元素設(shè)置了float之后梭纹，自身需要去float元素的空檔補(bǔ)位。簡(jiǎn)單說(shuō)致份，就是clear后就不去補(bǔ)位变抽，呆在自己的位置上。并不是清除自身的float這個(gè)屬性的值氮块！
注意 ：float會(huì)導(dǎo)致元素脫離文檔流绍载，也就是說(shuō)float元素本身不被算在常規(guī)位置的block體內(nèi)，而是上浮了滔蝉，所以叫做float呢击儡。
這個(gè)部分很繞，但是找到了這個(gè)經(jīng)驗(yàn)分享：CSS浮動(dòng)(float,clear)通俗講解
弄清楚float蝠引，很重要阳谍，因?yàn)楹芏嗖⑿械呐虐娑ㄎ痪褪强縡loat才能得以實(shí)現(xiàn)哦。
參考文檔：
html塊狀元素螃概、內(nèi)聯(lián)元素
學(xué)習(xí)CSS布局
經(jīng)驗(yàn)分享：CSS浮動(dòng)(float,clear)通俗講解
