最近在git上看到了這樣一個(gè)文件https://github.com/chokcoco/iCSS可都，關(guān)于css實(shí)現(xiàn)的一些很不錯(cuò)的樣式，所以準(zhǔn)備自己總結(jié)一下自己項(xiàng)目中用到的一些樣式殿遂。
一涣楷、css中可以繼承與不可以繼承的一些屬性
無繼承性的屬性
1凿将、display：規(guī)定元素應(yīng)該生成的框的類型
2寻行、文本屬性：
vertical-align：垂直文本對(duì)齊
text-decoration：規(guī)定添加到文本的裝飾
text-shadow：文本陰影效果
white-space：空白符的處理
unicode-bidi：設(shè)置文本的方向
3、盒子模型的屬性：width感凤、height、margin 粒督、margin-top陪竿、margin-right屠橄、margin-bottom族跛、margin-left、border锐墙、border-style礁哄、border-top-style、border-right-style溪北、border-bottom-style桐绒、border-left-style、border-width之拨、border-top-width茉继、border-right-right、border-bottom-width蚀乔、border-left-width烁竭、border-color、border-top-color吉挣、border-right-color派撕、border-bottom-color、border-left-color睬魂、border-top终吼、border-right、border-bottom氯哮、border-left衔峰、padding、padding-top蛙粘、padding-right垫卤、padding-bottom、padding-left
4出牧、背景屬性：background穴肘、background-color、background-image舔痕、background-repeat评抚、background-position豹缀、background-attachment
5、定位屬性：float慨代、clear邢笙、position、top侍匙、right氮惯、bottom、left想暗、min-width妇汗、min-height、max-width说莫、max-height杨箭、overflow、clip储狭、z-index
6互婿、生成內(nèi)容屬性：content、counter-reset辽狈、counter-increment
7擒悬、輪廓樣式屬性：outline-style、outline-width稻艰、outline-color懂牧、outline
8、頁面樣式屬性：size尊勿、page-break-before僧凤、page-break-after
9、聲音樣式屬性：pause-before元扔、pause-after躯保、pause、cue-before澎语、cue-after途事、cue、play-during
有繼承性的屬性
1擅羞、字體系列屬性
font：組合字體
font-family：規(guī)定元素的字體系列
font-weight：設(shè)置字體的粗細(xì)
font-size：設(shè)置字體的尺寸
font-style：定義字體的風(fēng)格
font-variant：設(shè)置小型大寫字母的字體顯示文本尸变，這意味著所有的小寫字母均會(huì)被轉(zhuǎn)換為大寫，但是所有使用小型大寫字體的字母與其余文本相比减俏，其字體尺寸更小召烂。
font-stretch：對(duì)當(dāng)前的 font-family 進(jìn)行伸縮變形。所有主流瀏覽器都不支持娃承。
font-size-adjust：為某個(gè)元素規(guī)定一個(gè) aspect 值奏夫，這樣就可以保持首選字體的 x-height怕篷。
2、文本系列屬性
text-indent：文本縮進(jìn)
text-align：文本水平對(duì)齊
line-height：行高
word-spacing：增加或減少單詞間的空白（即字間隔）
letter-spacing：增加或減少字符間的空白（字符間距）
text-transform：控制文本大小寫
direction：規(guī)定文本的書寫方向
color：文本顏色
3酗昼、元素可見性：visibility
4廊谓、表格布局屬性：caption-side、border-collapse麻削、border-spacing蒸痹、empty-cells、table-layout
5碟婆、列表布局屬性：list-style-type电抚、list-style-image惕稻、list-style-position竖共、list-style
6、生成內(nèi)容屬性：quotes
7俺祠、光標(biāo)屬性：cursor
8公给、頁面樣式屬性：page、page-break-inside蜘渣、windows淌铐、orphans
9、聲音樣式屬性：speak蔫缸、speak-punctuation腿准、speak-numeral、speak-header拾碌、speech-rate吐葱、volume、voice-family校翔、pitch弟跑、pitch-range、stress防症、richness孟辑、、azimuth蔫敲、elevation
所有元素可以繼承的屬性
1饲嗽、元素可見性：visibility
2、光標(biāo)屬性：cursor
內(nèi)聯(lián)元素可以繼承的屬性
1奈嘿、字體系列屬性
2喝噪、除text-indent、text-align之外的文本系列屬性
塊級(jí)元素可以繼承的屬性
text-indent指么、text-align
二酝惧、怎么使用CSS讓圖片水平垂直都居中
參考另一篇文章：http://www.reibang.com/p/7bbc4860a45c
三榴鼎、改變 input file的默認(rèn)樣式
我們?cè)谧鰅nput文本上傳的時(shí)候，html自帶的上傳按鈕比較丑晚唇，如何對(duì)其進(jìn)行美化呢巫财？
input file上傳按鈕的美化思路是，先把之前的按鈕透明度opacity設(shè)置為0,然后哩陕，外層用div包裹平项，就實(shí)現(xiàn)了美化功能。
利用jquery的代碼實(shí)現(xiàn)如下
html布局
js
部分代碼
css部分重點(diǎn)是css部分
在vue中的使用悍及，可以通過數(shù)據(jù)綁定來實(shí)現(xiàn)上傳文件名稱的改變闽瓢，這里不再多說！
四心赶、移動(dòng)端1px邊框的實(shí)現(xiàn)
在高清屏幕上扣讼，border-width:1px;并不是最小邊框，移動(dòng)端瀏覽器可以顯示的最小顆粒比css中1px還要小
首先看一下在移動(dòng)端效果對(duì)比
解決方式匯總參考我的另一個(gè)文章：http://www.reibang.com/p/0079624d240c
五缨叫、vertical-align的使用
適用于行內(nèi)元素和單元格（重點(diǎn)1：行內(nèi)元素椭符；重點(diǎn)2：?jiǎn)卧駜?nèi)）vertical-align是為了對(duì)齊文本和緊鄰文本的元素。
深入了解原因可參考：http://www.reibang.com/p/71a03b8f6eb6
使用vertical-align的前提條件
vertical-align用于對(duì)齊行內(nèi)級(jí)元素耻姥。行內(nèi)級(jí)元素的display屬性是如下值中的一種：
inline
inline-block
inline-table
行內(nèi)元素垂直居中或者頂部對(duì)齊销钝，底部對(duì)齊（以頂部對(duì)齊為例）
為了避免由于元素之間莫名產(chǎn)生的空隙，特別設(shè)置父元素的font-size的值為0
首先看一下要達(dá)到的效果圖（左大圖與右邊文字頂部對(duì)齊琐簇，另外兩個(gè)小圖片與同一行的文字也是頂部對(duì)齊蒸健，但是看圖貌似是中部對(duì)齊，所以可以通過調(diào)整右邊文字的行高實(shí)現(xiàn)真正的頂部對(duì)齊）
1.左邊大圖與右邊的布局
對(duì)于以上情景的總結(jié)如下：
1.vertical-align屬性適用于非塊級(jí)元素婉商；
2.同一行內(nèi)的倆元素似忧，一行元素有固定高度的話，另一個(gè)要有等值的行高据某，然后給其中一個(gè)或者多個(gè)元素設(shè)置vertical-align屬性橡娄，若效果不明顯可以通過調(diào)整行高來微調(diào)；
3.如果布局是
可參照w3c官網(wǎng)來學(xué)習(xí)癣籽。
六挽唉、display:table-cell的等高布局
display:table-cell屬性指讓標(biāo)簽元素以表格單元格的形式呈現(xiàn)，類似于td標(biāo)簽筷狼。目前IE8+以及其他現(xiàn)代瀏覽器都是支持此屬性的瓶籽。單元格有一些比較特別的屬性，例如元素的垂直居中對(duì)齊埂材，關(guān)聯(lián)伸縮等塑顺，所以display:table-cell還是有不少潛在的使用價(jià)值的。
與其他一些display屬性類似，table-cell同樣會(huì)被其他一些CSS屬性破壞严拒，例如float,?position:absolute扬绪，所以，在使用display:table-cell與float:left或是position:absolute屬性盡量不用同用裤唠。設(shè)置了display:table-cell的元素對(duì)寬度高度敏感挤牛，對(duì)margin值無反應(yīng)，響應(yīng)padding屬性种蘸，基本上就是活脫脫的一個(gè)td標(biāo)簽元素了墓赴。
想了解更多，請(qǐng)查看張?chǎng)涡窭蠋煹奈恼?a target="_blank">《我所知道的幾種display:table-cell的應(yīng)用》
以及簡(jiǎn)書的另一片文章?http://www.reibang.com/p/2479665ee1f8
1.等高布局
table表格中的單元格最大特點(diǎn)之一就是同一行列表元素都等高航瞭，所以很多時(shí)候我們需要等高布局的時(shí)候就可以借助display：table-cell屬性
實(shí)例：實(shí)現(xiàn)兩欄等高
2. 垂直水平居中
垂直居中可參考：8種垂直居中的方式http://www.reibang.com/writer#/notebooks/20757449/notes/37778904
七诫硕、給父元素設(shè)置font-size=0屬性
問題的根源是 inline（a標(biāo)簽?zāi)J(rèn)是display:inline） 和 inline-block (.list 設(shè)置的是 display:inline-block) 是內(nèi)聯(lián)布局，既然是內(nèi)聯(lián)那么就會(huì)受空白區(qū)域的影響刊侯，會(huì)有默認(rèn)的屬性章办，比如：p標(biāo)簽有默認(rèn)的padding。
舉例：
理論上box下面的三個(gè)div都是30px滔吠，剛好在一行顯示纲菌，但是實(shí)際效果是這樣的：
這就是上文說到的原因挠日，我們?cè)赽ox下添加?font-size:0;?再看看效果
總結(jié)：
1疮绷、可以看到這才是我們想要的結(jié)果，因此在實(shí)際開發(fā)中嚣潜，為了更好的還原設(shè)計(jì)稿冬骚，在父元素很有必要設(shè)置font-size:0，避免莫名其妙的間距懂算。
2只冻、這種情況的另一種解決方式：去掉空白部分。（不采用计技，例子如下：）
八喜德、CSS控制文字只顯示規(guī)定行數(shù)，超出部分顯示省略號(hào)
1垮媒、單行文字超出部分顯示省略號(hào)
可以實(shí)現(xiàn)超出部分顯示省略號(hào)的效果的元素必須是：(1)配置為inline-block或block的元素舍悯，或者默認(rèn)為block的div、p元素;(2)強(qiáng)制不換行white-space:no-wrap睡雇；（3）固定寬度萌衬；（4）超出部分隱藏 overflow:hidden；（5）超出部分以‘...’結(jié)尾text-overflow:ellipsis
總結(jié)：簡(jiǎn)單理解就是要把文本限制在一行它抱，肯定這一行的寬度是有限制的（width）秕豫，強(qiáng)制不換行（white-space:no-wrap），并且你的溢出部分要隱藏起來（overflow:hidden）,然后出現(xiàn)省略號(hào)（text-overflow:ellipsis）;
2观蓄、多行文字超出部分顯示省略
（1）將對(duì)象作為彈性伸縮盒子模型顯示display：-webkit-box;(2)從上到下垂直排列子元素混移，設(shè)置伸縮盒子的子元素排列方式 -webkit-box-orient:vertical;(3)-webkit-line-clamp:2,這個(gè)屬性不是css的規(guī)范屬性淹办，結(jié)合上邊兩個(gè)屬性，表示顯示的行數(shù)（4）超出部分隱藏赞咙；（5）超出部分'...'顯示俱饿；（6）對(duì)元素的是行內(nèi)元素還是塊級(jí)元素不做要求。
九沮脖、純CSS正方形自適應(yīng)9宮格圖片布局金矛，未加載前顯示占位符
重點(diǎn)是：給image的父盒子相對(duì)定位,height設(shè)置為0，height設(shè)置為0勺届，依然可以撐開的黑魔法就是下邊的padding驶俊，黑魔法的時(shí)刻就是將padding-top或者padding-bottom設(shè)置為跟盒子寬度一樣,w3c也提過，當(dāng)我們給padding設(shè)置100%的時(shí)候免姿，是相對(duì)盒子的寬度設(shè)置的百分比饼酿，也就是保證了padding值跟盒子的寬度是一致的，所以這個(gè)盒子看起來就是一個(gè)寬高相等的容器胚膊。
然后給圖片設(shè)置絕對(duì)定位故俐，寬度和高度都為100%最終效果完美。
布局
注意點(diǎn)：由于圖片在拉伸或者壓縮知乎會(huì)變形紊婉，所以要給img標(biāo)簽添加屬性：object-fit:cover屬性药版，防止圖片變形。
十喻犁、清除浮動(dòng)(最常用的方式)
父容器使用偽類:after跟zoom
這種方式是最推薦的槽片，目前大多數(shù)大型網(wǎng)站都是使用這種方式清除浮動(dòng)，瀏覽器兼容好肢础，不會(huì)出現(xiàn)什么奇怪的問題还栓。
zoom是IE專有屬性，可解決ie6,ie7浮動(dòng)問題传轰，IE8以上和非IE瀏覽器才支持偽類:after剩盒。
缺點(diǎn)：就是代碼比較多，需要偽類:after跟zoom一起使用才能兼容所有主流瀏覽器慨蛙。
但推薦使用辽聊，可將改樣式定義為公共樣式，減少代碼量
clearfix:fafter{
????display：block股淡；
????height：0身隐；
????content:'.';
????visibility:hidden;
????clear:both;
}
clearfix:{
????zoom:1
}
十一、sticky footers布局
sticky footers解決的問題是唯灵，當(dāng)頁面的內(nèi)容不夠長(zhǎng)的時(shí)候贾铝，頁腳塊粘貼在視窗底部，如果內(nèi)容足夠長(zhǎng)的話，頁腳塊會(huì)被內(nèi)容向下推送垢揩。
我現(xiàn)在介紹的是相對(duì)復(fù)雜玖绿，但是兼容性最好的方案
重點(diǎn)說一下css
detail是最外層的包裹元素，需要給元素固定定位叁巨，height斑匪、width都是100%；并且讓多出來的元素可以滾動(dòng)查看锋勺，所以添加overflow:auto屬性蚀瘸，彈層一般都是有顏色的，所以添加背景顏色為rgba(7,17,27,0.5)
detail-wrapper跟detail-close是同一級(jí)元素庶橱，.detail-close不多說是關(guān)閉按鈕的盒子為了在屏幕內(nèi)容不滿一屏的時(shí)候顯示在最下邊贮勃，需要給元素添加負(fù)margin-top;detail-wrapper是內(nèi)容的盒子設(shè)置最小的高度是屏幕的高度即min-height:100%;
重點(diǎn)是detail-main的樣式添加，padding-bottom,這個(gè)屬性是必須的苏章，為了讓關(guān)閉按鈕不遮擋內(nèi)容寂嘉；
具體css樣式如下
當(dāng)內(nèi)容未滿一屏幕的時(shí)候的最終效果如下
當(dāng)內(nèi)容超過一屏幕之后的效果
最后給大家推薦一個(gè)網(wǎng)站來更深一層的學(xué)習(xí)sticky footers布局https://www.w3cplus.com/css3/css-secrets/sticky-footers.html
補(bǔ)充：利用flex布局也可以實(shí)現(xiàn)同樣的效果，代碼如下
十二 枫绅、css?改變scroll滾動(dòng)條的樣式
/*定義滾動(dòng)條高寬及背景 高寬分別對(duì)應(yīng)橫豎滾動(dòng)條的尺寸*/兼容性不好
::-webkit-scrollbar{
????????width:10px;
????????height:10px;
????????background-color:red;
}
/*定義滾動(dòng)條軌道 內(nèi)陰影+圓角*/
::-webkit-scrollbar-track{
????????-webkit-box-shadow:inset0 06px rgba(0,0,0,0.4);
????????border-radius:20px;
????????background-color:red;
}
/*定義滑塊 內(nèi)陰影+圓角*/
::-webkit-scrollbar-thumb{
????????border-radius:20px;
????????-webkit-box-shadow:inset0 06px rgba(0,0,0,.3);
????????background-color:red;
}
ps可以通過布局隱藏滾動(dòng)條
十三泉孩、filter:blur()實(shí)現(xiàn)圖片模糊效果
圖片的模糊效果
先看效果對(duì)比
代碼設(shè)置
項(xiàng)目中的應(yīng)用
描述：背景是一張模糊的圖片，同時(shí)有一個(gè)半透明蒙層
實(shí)現(xiàn)方法
html部分代碼：
header是最外層的盒子并淋，樣式為
然后設(shè)置背景圖的樣式
當(dāng)不給header添加overflow:hidden屬性的時(shí)候寓搬，由于我們給背景圖片使用了filter屬性會(huì)導(dǎo)致背景圖的陰影溢出，如下圖
所以需要給header添加overflow:hidden屬性
十四预伺、圣杯布局與雙飛翼布局
圣杯布局和雙飛翼布局是前端工程師日常掌握的重要布局方式订咸。兩者的功能相同都是為了實(shí)現(xiàn)兩側(cè)的寬度固定曼尊，中間寬度自適應(yīng)的三欄布局
圣杯布局是一種最常見的網(wǎng)站布局酬诀，頁面從上到下，分成三個(gè)部分骆撇，頭部瞒御、軀干、尾部神郊，其中軀干又水平分成三個(gè)欄肴裙，從左到右為：導(dǎo)航欄、主欄涌乳、副欄
雖然兩者的實(shí)現(xiàn)方法略有差異蜻懦，不過都遵循了以下要點(diǎn)：
*兩側(cè)寬度固定，中間寬度自適應(yīng)
*中間部分在DOM結(jié)構(gòu)上優(yōu)先夕晓，以便先行渲染
*允許三列中的任意一列成為最高列
*只需要使用一個(gè)額外的
下面將以此介紹圣杯布局和雙飛翼布局的實(shí)現(xiàn)方式宛乃，并在最后根據(jù)個(gè)人思考對(duì)原有方法做出一些修改，給出其他一些可行的方案。
圣杯布局
1. DOM結(jié)構(gòu)
首先定義出整個(gè)布局的DOM結(jié)構(gòu)征炼，主題部分就是由container包裹的center析既、left、right三列谆奥，其中center定義在前面眼坏。
2. css代碼
假設(shè)左側(cè)的固定寬度是200px,右側(cè)的固定寬度是150px，則首先在container上設(shè)置
為左右兩列預(yù)留出相應(yīng)的空間酸些，得到如下示意圖：
隨后分別為三列設(shè)置寬度與浮動(dòng)宰译，同時(shí)對(duì)footer設(shè)置清除浮動(dòng)：
得到如下效果：
根據(jù)浮動(dòng)的特性，由于center的寬度是100%魄懂，即占據(jù)了第一行的所有空間囤屹，所以left和right被擠到了第二行
接下來的工作是將left放置到之前預(yù)留出的位置，這里使用負(fù)外邊距（margin的百分比是相對(duì)于父元素的寬度）：
得到：
隨后還需要使用定位方法：
這里使用position：relative和right：200px將left的位置在原有位置基礎(chǔ)上左移200px逢渔，以完成left的放置：
接下來放置right肋坚，只需要添加一條盛名即可：
得到最終的效果圖：
至此布局效果完成，不過還需要考慮最后一步肃廓，那就是頁面的最小寬度智厌，但是這并不是簡(jiǎn)單的200+150=350px，回想之前l(fā)eft使用了position：relative盲赊，所以就意味著在center開始的領(lǐng)域铣鹏，還存在著一個(gè)left的寬度（在使用相對(duì)定位時(shí)，無論是否進(jìn)行移動(dòng)哀蘑，元素仍然占據(jù)原來的空間诚卸。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其它框绘迁。）合溺，所以頁面的最小寬度應(yīng)該為200+150+200=550px:
綜上所述：圣杯布局的css代碼為
最后提醒一下很多朋友可能會(huì)忽略的小細(xì)節(jié)：在#center中，包含了一條聲明width:100%;缀台，這是中間欄能做到自適應(yīng)的關(guān)鍵棠赛。可能會(huì)有朋友認(rèn)為不需要設(shè)置這條聲明膛腐，因?yàn)橛X得center在不設(shè)置寬度的情況下會(huì)默認(rèn)將寬度設(shè)置為父元素（container）的100%寬度睛约。但需要注意到，center是浮動(dòng)元素哲身，由于浮動(dòng)具有包裹性辩涝，在不顯示設(shè)置寬度的情況下會(huì)自動(dòng)收縮到內(nèi)容的尺寸大小。如果去掉width:100%,則當(dāng)中間欄不包含或者包含較少內(nèi)容的時(shí)候勘天，整個(gè)布局會(huì)崩潰怔揩，而打不到這樣的效果：
我們還是把關(guān)鍵點(diǎn)用一個(gè)口訣記坠髫ぁ：中間加 margin，左右加 float沧踏，先加左右歌逢，后加中間。
雙飛翼布局
1.DOM結(jié)構(gòu)
雙飛翼布局的dom結(jié)構(gòu)與圣杯布局的區(qū)別是container僅包裹住center翘狱，另外.coumn類從center移至container上秘案。
2.css代碼
按照與圣杯布局的思路，首先設(shè)置各列的寬度與浮動(dòng)潦匈，并且為左右兩列預(yù)留出空間阱高，以及為footer設(shè)置清除浮動(dòng)：
得到效果圖如下：
以上代碼將container，left茬缩，right設(shè)置為float：left赤惊，而container內(nèi)部center由于沒有設(shè)置浮動(dòng)，所以其寬度默認(rèn)為container 的寬度凰锡，通過對(duì)其設(shè)置margin-left和margin-right為左右兩列預(yù)留出空間未舟。
將left放置到預(yù)留位置：
得到：
將right放置到預(yù)留位置
最終得到的效果：
最后計(jì)算最小頁面寬度：由于雙飛翼布局沒有用到position:relative進(jìn)行定位，所以最小頁面寬度應(yīng)該為200+150=350px掂为。但是當(dāng)頁面寬度縮小到350px附近時(shí)裕膀，會(huì)擠占中間欄的寬度，使得其內(nèi)容被右側(cè)欄覆蓋勇哗，如下所示：
中間欄內(nèi)容被覆蓋
因此在設(shè)置最小頁面寬度時(shí)昼扛，應(yīng)該適當(dāng)增加一些寬度以供中間欄使用（假設(shè)為150px），則有：
至此雙飛翼布局大功告成欲诺！其布局整體代碼為：
思考與總結(jié)
通過對(duì)圣杯布局和雙飛翼布局的介紹可以看出抄谐，圣杯布局在dom結(jié)構(gòu)上顯的更加直觀和自然，且在日常開發(fā)過程中扰法，更容易形成這樣的DOM結(jié)構(gòu)（通常<aside>和<article>/<section>一起被嵌套在<main>中）蛹含；而雙飛翼布局在實(shí)現(xiàn)上由于不需要使用定位，所以更加簡(jiǎn)潔迹恐，且允許的頁面最小寬度通常比圣杯布局更小挣惰。
其實(shí)通過思考不難發(fā)現(xiàn)，兩者在代碼實(shí)現(xiàn)上都額外引入了一個(gè)
從這個(gè)角度出發(fā)锤岸，如果去掉額外添加的
DOM結(jié)構(gòu)
去掉額外的<div>標(biāo)簽后拳氢，得到的DOM結(jié)構(gòu)如上所示，基于雙飛翼布局的實(shí)現(xiàn)思路蛋铆，只需要在center上做出修改：
1.使用calc（）
通過calc()可以十分方便地計(jì)算出center應(yīng)該占據(jù)的自適應(yīng)寬度馋评，目前calc()支持到IE9。
2. 使用border-box
使用border-box可以將center的整個(gè)盒模型寬度設(shè)置為父元素的100%寬度刺啦，此時(shí)再利用padding-left和padding-right可以自動(dòng)得到中間欄的自適應(yīng)寬度留特。不過需要注意的是，由于padding是盒子的一部分玛瘸，所以padding部分會(huì)具有中間欄的背景色蜕青，當(dāng)中間欄高于側(cè)欄時(shí)，會(huì)出現(xiàn)這樣的情況：
目前box-sizing支持到IE8糊渊。
3. 使用flex
這里使用flex還是需要與圣杯布局相同的DOM結(jié)構(gòu)右核，不過在實(shí)現(xiàn)上將更加簡(jiǎn)單：
css代碼如下：
