最近根據(jù)項目需要，由游戲前端轉(zhuǎn)成了web前端腕够，特別的學(xué)習(xí)了一下前端的知識韧献，整理了一下CSS基礎(chǔ)知識，希望能幫助更多程序員入門牲证。
文字排版
字體設(shè)置：font-family
字體顏色：color
字體字號：font-size
粗? ? ? 體：font-weight:bold
斜? ? ? 體：font-style:italic
下? 劃? 線：text-decoration:underline
刪? 除? 線：text-decoration:line-through
段落排版
文字縮進：text-indent
行間距（行高）：line-height
中文字間隔哮针、字母間隔：letter-spacing
單詞間隔：word-spacing
對? ? ? 齊：text-align
元素分類
在CSS中，HTML的標(biāo)簽元素大致分為三種類型：
塊狀元素：
<div>、<p>诚撵、<h1>...<h6>缭裆、<ol>、<ul>寿烟、<dl>澈驼、<table>、<address>筛武、<blockquote> 缝其、<form>
可以使用（display:inline使其具有內(nèi)聯(lián)元素特點）
可以使用（display:inline-block使其具有內(nèi)聯(lián)塊狀元素特點）
特點：
1、每個塊級元素都從新的一行開始徘六，并且其后的元素也另起一行内边。（真霸道，一個塊級元素獨占一行）
2待锈、元素的高度漠其、寬度、行高以及頂和底邊距都可設(shè)置竿音。
3和屎、元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬度一致）春瞬，除非設(shè)定一個寬度柴信。
內(nèi)聯(lián)元素（又叫行內(nèi)元素）：
<a>、<span>宽气、<br>随常、<i>、<em>萄涯、<strong>绪氛、<label>、<q>窃判、<var>钞楼、<cite>、<code>
可以使用（display:block使其具有塊狀元素特點）
可以使用（display:inline-block使其具有內(nèi)聯(lián)塊狀元素特點）
特點：
1袄琳、和其他元素都在一行上；
2燃乍、元素的高度唆樊、寬度及頂部和底部邊距不可設(shè)置；
3刻蟹、元素的寬度就是它包含的文字或圖片的寬度逗旁，不可改變。
內(nèi)聯(lián)塊狀元素：
<img>、<input>
特點：
1片效、和其他元素都在一行上红伦；
2、元素的高度淀衣、寬度昙读、行高以及頂和底邊距都可設(shè)置。
盒子模型
邊框粗細：border-width
邊框樣式：border-style
（樣式：dashed 虛線|dotted 點線|solid 實線）
邊框顏色：border-color
布局模型
1.流動模型（Flow）
第一點膨桥，塊狀元素都會在所處的包含元素內(nèi)自上而下按順序垂直延伸分布蛮浑，因為在默認狀態(tài)下，塊狀元素的寬度都為100%只嚣。
第二點沮稚，在流動模型下，內(nèi)聯(lián)元素都會在所處的包含元素內(nèi)從左到右水平分布顯示册舞。
2.浮動模型（Float）
3.層模型（Layer）
1)絕對定位（position:absolute）
2)相對定位（position:relative）
3)固定定位（position:fixed）
CSS樣式設(shè)置
水平居中設(shè)置
行內(nèi)元素
如果被設(shè)置元素為文本蕴掏、圖片等行內(nèi)元素時，水平居中是通過給父元素設(shè)置text-align:center來實現(xiàn)的调鲸。
定寬塊狀元素
滿足定寬和塊狀兩個條件的元素是可以通過設(shè)置“左右margin”值為“auto”來實現(xiàn)居中的囚似。
不定寬塊狀元素
不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：
方法一：加入table標(biāo)簽
說明：利用table標(biāo)簽的長度自適應(yīng)性---即不定義其長度也不默認父元素body的長度（table其長度根據(jù)其內(nèi)文本長度決定），因此可以看做一個定寬度塊元素线得，然后再利用定寬度塊狀居中的margin的方法饶唤，使其水平居中。
方法二：設(shè)置display: inline方法：與第一種類似贯钩，顯示類型設(shè)為?行內(nèi)元素募狂，進行不定寬元素的屬性設(shè)置
方法三：設(shè)置position:relative和 left:50%：利用?相對定位?的方式，將元素向左偏移?50%?角雷，即達到居中的目的
垂直居中設(shè)置
父元素高度確定的單行文本
父元素高度確定的單行文本的豎直居中的方法是通過設(shè)置父元素的height?和?line-height?高度一致來實現(xiàn)的祸穷。(height: 該元素的高度，line-height: 顧名思義勺三，行高（行間距）雷滚，指在文本中，行與行之間的?基線間的距離?)吗坚。
父元素高度確定的多行文本祈远、圖片
方法一：使用插入table(包括tbody、tr商源、td)標(biāo)簽车份，同時設(shè)置vertical-align：middle。
方法二：在?chrome牡彻、firefox?及?IE8?以上的瀏覽器下可以設(shè)置塊級元素的?display?為table-cell（設(shè)置為表格單元顯示）扫沼，激活?vertical-align?屬性，但注意?IE6、7?并不支持這個樣式,?兼容性比較差缎除。
