前言
哈
這個(gè)CSS系列嫌吠，是我從七月開(kāi)始陸續(xù)整理的系列篇止潘。存放在草稿箱里很久了，今晚把這幾篇系列篇都整理下排版辫诅，然后發(fā)布出來(lái)凭戴。
為什么要寫(xiě)這個(gè)系列，初衷也是因?yàn)橛泻芏嗉?xì)節(jié)點(diǎn)是需要從源頭上去理解的炕矮。像是很多屬性設(shè)置么夫，都是設(shè)置在某個(gè)元素自身無(wú)效，在其父元素設(shè)置就生效肤视，諸如這一類(lèi)的档痪，都是細(xì)節(jié)點(diǎn)。當(dāng)然邢滑，如果了解原理之后腐螟，就不難理解為什么是這樣的設(shè)置了。
總之，我熱衷做總結(jié)梳理乐纸，不是我多勤快衬廷，恰恰是我懶，想通過(guò)這些知識(shí)碎點(diǎn)的整理汽绢，可以把這些知識(shí)點(diǎn)都學(xué)薄了吗跋，然后在有空就翻看的時(shí)候，又常翻常新庶喜。當(dāng)然小腊，后面有覺(jué)得需要補(bǔ)充添加的點(diǎn)的話，這幾篇CSS系列篇會(huì)持續(xù)更新久窟。
一秩冈、塊級(jí)元素和行內(nèi)元素
1、塊級(jí)元素
（1）塊級(jí)元素占據(jù)一整行的空間斥扛，可以再包含塊級(jí)元素和行內(nèi)元素入问。
（2）設(shè)定width和height屬性有效。設(shè)定了width之后稀颁，沒(méi)特殊要求可以不用再設(shè)定height芬失，因?yàn)楦叨葧?huì)按照寬高比自適應(yīng)，這點(diǎn)常應(yīng)用在img的使用匾灶。
（3）因?yàn)檎紦?jù)一整行空間棱烂，所以margin:0 auto的居中設(shè)定，需要在同時(shí)設(shè)定了width屬性的情況下才有效阶女。
需要記住的常見(jiàn)塊級(jí)元素：div h1-h6 p form ul li dl ol table tr td th dd dt
讓我意外颊糜，原來(lái)它是塊級(jí)元素的標(biāo)簽：p,ul,li
2、行內(nèi)元素
（1）占據(jù)本身內(nèi)容的寬度秃踩。設(shè)定width和height是無(wú)效的衬鱼。需要設(shè)置display：inline-block才能讓寬高的設(shè)置生效。
（2）同時(shí)設(shè)定盒模型的margin憔杨，只有左右margin生效鸟赫，上下margin是無(wú)效的。
需要記住的常見(jiàn)行內(nèi)元素：em strong span a br img button input label select textarea script
讓我意外消别，原來(lái)它是行內(nèi)元素的標(biāo)簽：img抛蚤、input、textarea妖啥、script霉颠、a
3、置換元素
置換元素就是會(huì)根據(jù)標(biāo)簽屬性來(lái)顯示的元素荆虱，反之就是非置換元素蒿偎。比如img標(biāo)簽根據(jù)src屬性來(lái)顯示朽们，input根據(jù)value屬性來(lái)顯示，同理textarea和select元素也是置換元素诉位。
所以img元素是行內(nèi)元素骑脱，同時(shí)也是置換元素，置換元素一般內(nèi)置框高屬性苍糠，可以直接設(shè)置框高叁丧。
二、邊框
border:1px solid/dotted/dash/double #333
注意：border-style:dotted solid double dashed;岳瞭，分別對(duì)應(yīng)是點(diǎn)狀/實(shí)線/雙線/虛線
1拥娄、應(yīng)用：實(shí)現(xiàn)三角形和由此的其他圖形組合
2、圓形的實(shí)現(xiàn)
3瞳筏、邊框圓角的實(shí)現(xiàn)
三稚瘾、盒模型
1、盒模型：就是margin+border+padding
2姚炕、上下左右距離的設(shè)置：
（1）舉例：padding:10px 20px 30px：代表padding-top:10px;padding-bottom:30px;
padding-left和padding-right都是20px
（2）margin和padding的值都可以是百分比摊欠，是相對(duì)于父容器而言的
（3）margin外邊距合并的問(wèn)題
如下圖：兩個(gè)div之間的間距應(yīng)該是10+10=20px，但卻是10px柱宦。對(duì)此的解決方案是使用BFC些椒。
（4）行內(nèi)元素設(shè)定padding的情況
行內(nèi)元素設(shè)定padding時(shí)，左右padding是生效的掸刊，上下padding撐開(kāi)了邊距免糕，但對(duì)其本身高度并沒(méi)有發(fā)生變化，還是那么高忧侧。
3说墨、標(biāo)準(zhǔn)盒模型和IE盒模型
IE盒模型，是指IE678在怪異模式下（沒(méi)有寫(xiě)!DOCTYPE:<!DOCTYPE html>）的盒模型狀態(tài)
標(biāo)準(zhǔn)盒模型苍柏，在IE9以上，以及IE678在嚴(yán)格模式下（<!DOCTYPE html>）就是使用的標(biāo)準(zhǔn)盒模型姜贡。
標(biāo)準(zhǔn)盒模型：width和height的寬度高度設(shè)置试吁，就是content的大小而已
IE盒模型：width和height的寬度高度設(shè)置是content+padding+border的大小。
4楼咳、box-sizing的使用
由盒模型延伸熄捍，有時(shí)我們?cè)O(shè)置父元素寬度900px,每個(gè)子元素小框?qū)挾葹?00px，邊框?yàn)?px母怜，全部向左浮動(dòng)余耽，如果是在標(biāo)準(zhǔn)盒模型下，是無(wú)法同一行剛好布滿3個(gè)小框的苹熏。因?yàn)閷?shí)際3個(gè)小框的全部長(zhǎng)度為300*3+1px*6=906px碟贾。這種時(shí)候币喧，就需要用上IE盒模型這樣的特性，才能剛好一行鋪滿袱耽。這時(shí)候就對(duì)子元素使用box-sizing:border-box屬性杀餐，就可以實(shí)現(xiàn)剛好占一行。
四朱巨、居中的實(shí)現(xiàn)：
塊級(jí)元素：margin:0 auto;(上下邊距可以任意設(shè)史翘，左右為auto即可)
行內(nèi)元素：記住：是在其父元素上設(shè)定text-align:center,實(shí)現(xiàn)行內(nèi)元素的居中
五冀续、display
塊級(jí)元素的設(shè)定：display：blcok/table/list-item
行內(nèi)元素的設(shè)定：display：inline/inline-table/inline-block
需要記住除了常見(jiàn)的inline琼讽、inline-block、block屬性值外洪唐，還有的其他的display屬性選項(xiàng)钻蹬。
1、display:inline-block
這個(gè)屬性很重要：因?yàn)樗屧爻尸F(xiàn)inline的特性桐罕，不占據(jù)一整行脉让，寬度由內(nèi)容寬度決定，又呈現(xiàn) block 特性 功炮，可設(shè)置寬高溅潜，內(nèi)外邊距
（1）應(yīng)用：面包屑
面包屑可以直接采用全部左浮動(dòng)，然后父元素清除浮動(dòng)的方式薪伏。也可以直接使用display:inline-block的屬性設(shè)置滚澜，這種方法更簡(jiǎn)單。但對(duì)應(yīng)的問(wèn)題就是兩個(gè)設(shè)置display:inline-block的行內(nèi)元素之間會(huì)有縫隙嫁怀。
縫隙情況如下：
（2）解決縫隙問(wèn)題：
因?yàn)閾Q行也是等同于空白字符的
消除設(shè)置display:inline-block的元素之間的縫隙的方法：
1）设捐、元素標(biāo)簽之間不要換行
如下：span不換行，直接挨著寫(xiě)：
2）塘淑、父元素設(shè)定font-size:0,將空白字符給去掉萝招，然后子元素再設(shè)定font-size大小
六、基線對(duì)準(zhǔn)問(wèn)題
vertical-align這個(gè)屬性，是只對(duì)行內(nèi)元素和表格才有效。
vertical-align:top/middle/bottom抖格，分別實(shí)現(xiàn)頂部對(duì)齊靖秩，中間對(duì)齊或底部對(duì)齊
七、font字體的設(shè)置
1、常見(jiàn)設(shè)置：font-size/line-height/font-family/font-weight
（1）綜合寫(xiě)法：
font:12px/1.5 arial,'Hiraginp Sans GB','\5b8b\4f53';
2、font-family：字體類(lèi)型
這是要結(jié)合看用戶(hù)電腦按照的字體文件，支持的話才會(huì)展現(xiàn)出來(lái)兼吓。最好把中文名稱(chēng)的字體都轉(zhuǎn)化為Unicode碼，避免無(wú)法識(shí)別中文的出錯(cuò)：
打開(kāi)控制臺(tái)輸入：
escape('微軟雅黑')森枪，然后把%u轉(zhuǎn)化為\
例如：
宋體 | SimSun | \5B8B\4F53
黑體 | SimHei | \9ED1\4F53
微軟雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1
3视搏、行高line-height
比如設(shè)定60px,字體大小為30px,那么上下就是15px审孽。等于行高是有加上字體大小一起計(jì)算的。
4凶朗、谷歌的默認(rèn)字體大小為16px瓷胧，最小字體為12px
八、文本
1棚愤、常見(jiàn)屬性
（1）文本對(duì)齊：text-align:left/right/center/justify,記住是用在塊級(jí)元素上的搓萧。
記住：text-align:justify是兩端對(duì)齊,這個(gè)有時(shí)候很有用
（2）文本線：text-decoration:line-through/overline/underline/none
記淄鹌琛：text-decoration:line-through用于表示錯(cuò)誤給劃掉時(shí)的用法
（3）英文大小寫(xiě)：text-transform:uppercase/lowercase/capitalize
分別是用于將英文單詞全部變?yōu)榇髮?xiě)瘸洛、小寫(xiě)和首字母為大寫(xiě)。text-transform:capitalize;應(yīng)用更多些
（4）改變單詞之間的間隔：word-spacing:20px;
（5）改變單詞字母之間的間隔：letter-spacing:10px;
2次和、應(yīng)用:
行內(nèi)元素的居中反肋，對(duì)其父容器塊級(jí)元素，設(shè)置text-align:center;
如果父容器和子元素都是塊級(jí)元素踏施，那么設(shè)定子元素居中石蔗，就是對(duì)子元素設(shè)置使用margin:0 auto;
3、應(yīng)用：?jiǎn)涡形谋疽绯龅牟糠謱?xiě)為省略號(hào)....
注意是對(duì)文本所在標(biāo)簽的父級(jí)元素做這三行屬性設(shè)置才生效畅形。下面例子文本標(biāo)簽a的父標(biāo)簽是p,對(duì)其做設(shè)置：
.mid{
width:100px;
height:100px;
border:2px solid red;
/*以下三行的設(shè)置养距，行成省略號(hào)*/
white-space:nowrap; /*文字不折行*/
overflow:hidden;/*超出部分隱藏*/
text-overflow:ellipsis;/*文字超出部分變?yōu)槭÷蕴?hào)*/
}
注意：對(duì)于文本換行：中文和英文是有區(qū)別的：元素寬度不夠?qū)挄r(shí)，中文是會(huì)自動(dòng)折行換行的日熬，而英文并不會(huì)棍厌。設(shè)置多出的文字為省略號(hào)對(duì)中英文通用
九、顏色
1竖席、直接使用顏色單詞設(shè)置:color:red耘纱；
2、十六進(jìn)制：#fff/#eee/#ccc毕荐，#000000,為黑色束析，重復(fù)的6位數(shù)，就可以簡(jiǎn)寫(xiě)為3位憎亚，#000為黑色畸陡，#fff為白色；
3虽填、rgb:(255,255,255)
4、rgba:rgba(0,0,0,0.5)曹动，最后一個(gè)為透明度的設(shè)定
十斋日、單位
下面這幾個(gè)單位記住：
1墓陈、px:固定單位
2恶守、em:相對(duì)單位
em是相對(duì)父元素字體的大小第献，是父元素字體的倍數(shù)。font-size:2em等同于font-size:200%
3兔港、rem:相對(duì)單位
rem是相對(duì)于根元素（html）字體的大小庸毫，是根元素字體大小的倍數(shù)。
4衫樊、vw:相對(duì)單位
1vw為屏幕寬度的1%飒赃，50vw就相當(dāng)于屏幕寬度的一半。兼容性差科侈，不怎么使用
5载佳、vh:相對(duì)單位，1vh為一屏幕寬度臀栈。
十一蔫慧、透明度的設(shè)定
1、opacity:0
透明度為0权薯，整個(gè)元素看不見(jiàn)姑躲，但仍然占據(jù)位置
2、visibility:hidden
和opacity:0類(lèi)似
3盟蚣、display:none
元素消失黍析，不占據(jù)位置
4、backgr-color:rgba(0,0,0,0)
設(shè)置透明度透明度為0刁俭，從0到1橄仍，顏色越重，占據(jù)位置
十二牍戚、邊框陰影的設(shè)定
1侮繁、用法
2、應(yīng)用
讓邊框的四邊都有陰影的做法如孝，就是讓x-offset和y-offset的值都為0宪哩，只設(shè)置陰影范圍值
.box-shadow-2{
-webkit-box-shadow:0 0 10px #0CC;
-moz-box-shadow:0 0 10px #0CC;
box-shadow:0 0 10px #0CC;
}
實(shí)現(xiàn)效果：
一篇關(guān)于邊框陰影的文章：http://blog.csdn.net/freshlover/article/details/7610269
十三、background背景
下面是background的常見(jiàn)常用屬性：
1第晰、background-image:url(路徑)
2锁孟、background-repeat:
選項(xiàng)為repeat/no-repeat
這兩個(gè)選項(xiàng)為圖像重復(fù)鋪滿頁(yè)面或者不重復(fù)。repeat-x茁瘦，則是水平方向的鋪滿品抽。repeat-y，則是垂直方向的鋪滿甜熔。
3圆恤、background-color:
設(shè)置各種顏色
4、background-size
（設(shè)置背景的大小腔稀，CSS3用法盆昙，注意兼容性）
設(shè)置百分比羽历、px固定值或者以下兩個(gè)單詞的設(shè)置
contain：讓圖片等比縮放，可以充滿屏幕
cover：讓圖片的高度與屏幕等高淡喜，寬度溢出屏幕就不顯示
5秕磷、background-position
設(shè)置背景圖像位置，默認(rèn)是左上角炼团。
設(shè)置方式：XY澎嚣，設(shè)置為像素，從左上角開(kāi)始進(jìn)行位置移動(dòng)(0,0)
百分比们镜，移動(dòng)的距離為其父元素content寬度的百分比
直接單詞來(lái)定位：[top币叹、center、bottom]模狭、[left颈抚、center、right]
background-position:top left嚼鹉，以圖片的左上角對(duì)其屏幕的左上角
6贩汉、background-attachment:fixed
背景圖像是否固定，或者隨著頁(yè)面其他內(nèi)容滾動(dòng)
7锚赤、使用情景
背景圖片有鏤空匹舞，然后也有背景顏色的設(shè)置。那么背景顏色就會(huì)從背景圖片中透出來(lái)线脚。
以上屬性可以縮寫(xiě)為一行赐稽，一次性寫(xiě)多個(gè)屬性：
background:#fff url(background.gif) no-repeat fixed 0 0;
十四、line-height
1浑侥、使用場(chǎng)景：
設(shè)置單行文本的行高
2姊舵、使用方式：
可以設(shè)置為數(shù)字，也可以設(shè)置為百分比寓落，或是固定寬度
（1）設(shè)置為數(shù)字
line-height:2:是它本身文字字體大小的兩倍括丁。比如一個(gè)字體大小是30px，設(shè)置行高為60px伶选，那就是除去字體大小的30史飞，還剩下30px是平分字體的上下間隔的，就是上下空白為15px
（2）設(shè)置為百分比
line-height:200%：當(dāng)它是繼承而來(lái)時(shí)仰税，行高是它父元素文字字體大小的兩倍构资。如果是它自身元素設(shè)置行高為百分比，那就還是它自身行高的2倍陨簇。
在這個(gè)例子中吐绵，繼承而來(lái)的line-height:200%，等同于自身元素上設(shè)定line-height:40px;
如果父元素沒(méi)有設(shè)定line-height，那么元素自己設(shè)定line-height:200%拦赠，就是等于設(shè)定line-height:2,等于自身高度的2倍，等于line-height：120px
（3）設(shè)置為固定寬度
line-height:20px：固定值
3葵姥、繼承性
line-height是可以繼承的荷鼠，子元素的line-height高度繼承父元素的line-height高度
4、應(yīng)用
通過(guò)設(shè)定行高和元素高度相同榔幸，可以實(shí)現(xiàn)文本或子元素的垂直水平居中
當(dāng)然允乐，也可以把高度設(shè)置去掉，也是同樣效果削咆。
