前言
哈
這個CSS系列，是我從七月開始陸續(xù)整理的系列篇。存放在草稿箱里很久了，今晚把這幾篇系列篇都整理下排版，然后發(fā)布出來。
為什么要寫這個系列，初衷也是因為有很多細(xì)節(jié)點是需要從源頭上去理解的。像是很多屬性設(shè)置，都是設(shè)置在某個元素自身無效，在其父元素設(shè)置就生效，諸如這一類的，都是細(xì)節(jié)點。當(dāng)然，如果了解原理之后，就不難理解為什么是這樣的設(shè)置了。
總之，我熱衷做總結(jié)梳理，不是我多勤快，恰恰是我懶，想通過這些知識碎點的整理，可以把這些知識點都學(xué)薄了，然后在有空就翻看的時候，又常翻常新。當(dāng)然，后面有覺得需要補充添加的點的話，這幾篇CSS系列篇會持續(xù)更新。
一、塊級元素和行內(nèi)元素
1、塊級元素
（1）塊級元素占據(jù)一整行的空間，可以再包含塊級元素和行內(nèi)元素。
（2）設(shè)定width和height屬性有效。設(shè)定了width之后，沒特殊要求可以不用再設(shè)定height，因為高度會按照寬高比自適應(yīng)，這點常應(yīng)用在img的使用。
（3）因為占據(jù)一整行空間，所以margin:0 auto的居中設(shè)定，需要在同時設(shè)定了width屬性的情況下才有效。
需要記住的常見塊級元素：div h1-h6 p form ul li dl ol table tr td th dd dt
讓我意外，原來它是塊級元素的標(biāo)簽：p,ul,li
2、行內(nèi)元素
（1）占據(jù)本身內(nèi)容的寬度。設(shè)定width和height是無效的。需要設(shè)置display：inline-block才能讓寬高的設(shè)置生效。
（2）同時設(shè)定盒模型的margin，只有左右margin生效，上下margin是無效的。
需要記住的常見行內(nèi)元素：em strong span a br img button input label select textarea script
讓我意外，原來它是行內(nèi)元素的標(biāo)簽：img、input、textarea、script、a
3、置換元素
置換元素就是會根據(jù)標(biāo)簽屬性來顯示的元素，反之就是非置換元素。比如img標(biāo)簽根據(jù)src屬性來顯示，input根據(jù)value屬性來顯示，同理textarea和select元素也是置換元素。
所以img元素是行內(nèi)元素，同時也是置換元素，置換元素一般內(nèi)置框高屬性，可以直接設(shè)置框高。
二、邊框
border:1px solid/dotted/dash/double #333
注意：border-style:dotted solid double dashed;，分別對應(yīng)是點狀/實線/雙線/虛線
1、應(yīng)用：實現(xiàn)三角形和由此的其他圖形組合
2、圓形的實現(xiàn)
3、邊框圓角的實現(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的值都可以是百分比，是相對于父容器而言的
（3）margin外邊距合并的問題
如下圖：兩個div之間的間距應(yīng)該是10+10=20px，但卻是10px。對此的解決方案是使用BFC。
（4）行內(nèi)元素設(shè)定padding的情況
行內(nèi)元素設(shè)定padding時，左右padding是生效的，上下padding撐開了邊距，但對其本身高度并沒有發(fā)生變化，還是那么高。
3、標(biāo)準(zhǔn)盒模型和IE盒模型
IE盒模型，是指IE678在怪異模式下（沒有寫!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è)置父元素寬度900px,每個子元素小框?qū)挾葹?00px，邊框為1px，全部向左浮動，如果是在標(biāo)準(zhǔn)盒模型下，是無法同一行剛好布滿3個小框的。因為實際3個小框的全部長度為300*3+1px*6=906px。這種時候，就需要用上IE盒模型這樣的特性，才能剛好一行鋪滿。這時候就對子元素使用box-sizing:border-box屬性，就可以實現(xiàn)剛好占一行。
四、居中的實現(xiàn)：
塊級元素：margin:0 auto;(上下邊距可以任意設(shè)，左右為auto即可)
行內(nèi)元素：記?。菏窃?strong>其父元素上設(shè)定text-align:center,實現(xiàn)行內(nèi)元素的居中
五、display
塊級元素的設(shè)定：display：blcok/table/list-item
行內(nèi)元素的設(shè)定：display：inline/inline-table/inline-block
需要記住除了常見的inline、inline-block、block屬性值外，還有的其他的display屬性選項。
1、display:inline-block
這個屬性很重要：因為它讓元素呈現(xiàn)inline的特性，不占據(jù)一整行，寬度由內(nèi)容寬度決定，又呈現(xiàn) block 特性 ，可設(shè)置寬高，內(nèi)外邊距
（1）應(yīng)用：面包屑
面包屑可以直接采用全部左浮動，然后父元素清除浮動的方式。也可以直接使用display:inline-block的屬性設(shè)置，這種方法更簡單。但對應(yīng)的問題就是兩個設(shè)置display:inline-block的行內(nèi)元素之間會有縫隙。
縫隙情況如下：
（2）解決縫隙問題：
因為換行也是等同于空白字符的
消除設(shè)置display:inline-block的元素之間的縫隙的方法：
1）、元素標(biāo)簽之間不要換行
如下：span不換行，直接挨著寫：
2）、父元素設(shè)定font-size:0,將空白字符給去掉，然后子元素再設(shè)定font-size大小
六、基線對準(zhǔn)問題
vertical-align這個屬性，是只對行內(nèi)元素和表格才有效。
vertical-align:top/middle/bottom，分別實現(xiàn)頂部對齊，中間對齊或底部對齊
七、font字體的設(shè)置
1、常見設(shè)置：font-size/line-height/font-family/font-weight
（1）綜合寫法：
font:12px/1.5 arial,'Hiraginp Sans GB','\5b8b\4f53';
2、font-family：字體類型
這是要結(jié)合看用戶電腦按照的字體文件，支持的話才會展現(xiàn)出來。最好把中文名稱的字體都轉(zhuǎn)化為Unicode碼，避免無法識別中文的出錯：
打開控制臺輸入：
escape('微軟雅黑')，然后把%u轉(zhuǎn)化為\
例如：
宋體 | SimSun | \5B8B\4F53
黑體 | SimHei | \9ED1\4F53
微軟雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1
3、行高line-height
比如設(shè)定60px,字體大小為30px,那么上下就是15px。等于行高是有加上字體大小一起計算的。
4、谷歌的默認(rèn)字體大小為16px，最小字體為12px
八、文本
1、常見屬性
（1）文本對齊：text-align:left/right/center/justify,記住是用在塊級元素上的。
記?。簍ext-align:justify是兩端對齊,這個有時候很有用
（2）文本線：text-decoration:line-through/overline/underline/none
記住：text-decoration:line-through用于表示錯誤給劃掉時的用法
（3）英文大小寫：text-transform:uppercase/lowercase/capitalize
分別是用于將英文單詞全部變?yōu)榇髮?、小寫和首字母為大寫。text-transform:capitalize;應(yīng)用更多些
（4）改變單詞之間的間隔：word-spacing:20px;
（5）改變單詞字母之間的間隔：letter-spacing:10px;
2、應(yīng)用:
行內(nèi)元素的居中，對其父容器塊級元素，設(shè)置text-align:center;
如果父容器和子元素都是塊級元素，那么設(shè)定子元素居中，就是對子元素設(shè)置使用margin:0 auto;
3、應(yīng)用：單行文本溢出的部分寫為省略號....
注意是對文本所在標(biāo)簽的父級元素做這三行屬性設(shè)置才生效。下面例子文本標(biāo)簽a的父標(biāo)簽是p,對其做設(shè)置：
.mid{
width:100px;
height:100px;
border:2px solid red;
/*以下三行的設(shè)置，行成省略號*/
white-space:nowrap; /*文字不折行*/
overflow:hidden;/*超出部分隱藏*/
text-overflow:ellipsis;/*文字超出部分變?yōu)槭÷蕴?/
}
注意：對于文本換行：中文和英文是有區(qū)別的：元素寬度不夠?qū)挄r，中文是會自動折行換行的，而英文并不會。設(shè)置多出的文字為省略號對中英文通用
九、顏色
1、直接使用顏色單詞設(shè)置:color:red；
2、十六進(jìn)制：#fff/#eee/#ccc，#000000,為黑色，重復(fù)的6位數(shù)，就可以簡寫為3位，#000為黑色，#fff為白色；
3、rgb:(255,255,255)
4、rgba:rgba(0,0,0,0.5)，最后一個為透明度的設(shè)定
十、單位
下面這幾個單位記住：
1、px:固定單位
2、em:相對單位
em是相對父元素字體的大小，是父元素字體的倍數(shù)。font-size:2em等同于font-size:200%
3、rem:相對單位
rem是相對于根元素（html）字體的大小，是根元素字體大小的倍數(shù)。
4、vw:相對單位
1vw為屏幕寬度的1%，50vw就相當(dāng)于屏幕寬度的一半。兼容性差，不怎么使用
5、vh:相對單位，1vh為一屏幕寬度。
十一、透明度的設(shè)定
1、opacity:0
透明度為0，整個元素看不見，但仍然占據(jù)位置
2、visibility:hidden
和opacity:0類似
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;
}
實現(xiàn)效果：
一篇關(guān)于邊框陰影的文章：http://blog.csdn.net/freshlover/article/details/7610269
十三、background背景
下面是background的常見常用屬性：
1、background-image:url(路徑)
2、background-repeat:
選項為repeat/no-repeat
這兩個選項為圖像重復(fù)鋪滿頁面或者不重復(fù)。repeat-x，則是水平方向的鋪滿。repeat-y，則是垂直方向的鋪滿。
3、background-color:
設(shè)置各種顏色
4、background-size
（設(shè)置背景的大小，CSS3用法，注意兼容性）
設(shè)置百分比、px固定值或者以下兩個單詞的設(shè)置
contain：讓圖片等比縮放，可以充滿屏幕
cover：讓圖片的高度與屏幕等高，寬度溢出屏幕就不顯示
5、background-position
設(shè)置背景圖像位置，默認(rèn)是左上角。
設(shè)置方式：XY，設(shè)置為像素，從左上角開始進(jìn)行位置移動(0,0)
百分比，移動的距離為其父元素content寬度的百分比
直接單詞來定位：[top、center、bottom]、[left、center、right]
background-position:top left，以圖片的左上角對其屏幕的左上角
6、background-attachment:fixed
背景圖像是否固定，或者隨著頁面其他內(nèi)容滾動
7、使用情景
背景圖片有鏤空，然后也有背景顏色的設(shè)置。那么背景顏色就會從背景圖片中透出來。
以上屬性可以縮寫為一行，一次性寫多個屬性：
background:#fff url(background.gif) no-repeat fixed 0 0;
十四、line-height
1、使用場景：
設(shè)置單行文本的行高
2、使用方式：
可以設(shè)置為數(shù)字，也可以設(shè)置為百分比，或是固定寬度
（1）設(shè)置為數(shù)字
line-height:2:是它本身文字字體大小的兩倍。比如一個字體大小是30px，設(shè)置行高為60px，那就是除去字體大小的30，還剩下30px是平分字體的上下間隔的，就是上下空白為15px
（2）設(shè)置為百分比
line-height:200%：當(dāng)它是繼承而來時，行高是它父元素文字字體大小的兩倍。如果是它自身元素設(shè)置行高為百分比，那就還是它自身行高的2倍。
在這個例子中，繼承而來的line-height:200%，等同于自身元素上設(shè)定line-height:40px;
如果父元素沒有設(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)用
通過設(shè)定行高和元素高度相同，可以實現(xiàn)文本或子元素的垂直水平居中
當(dāng)然，也可以把高度設(shè)置去掉，也是同樣效果。
