四拇囊、(1)文字大小?

? ? font-size用來指定文字的大小

? ? ?字體(一) 通過font-family可以指定標(biāo)簽中文字使用 的字體针饥。

? ? 例如: p{font-family:Arial} – 上邊這行代碼指定了p標(biāo)簽中使用名為arial作 為字體

? ? 字體(二) 通過font-family可以同時指定多個字體渊胸。(瀏覽器會優(yōu)先使用第一 個，

? ? 如果沒有找到則使用第二個蛋欣，以此類 推病曾。)

? ? 例如: p{font-family:Arial , Helvetica , sans-serif}

? ? (2)字體分類

? ? serif（襯線字體）? ? ? ? sans-serif（非襯線字體）

? ? monospace （等寬字體）? cursive （草書字體）? ? ? fantasy （虛幻字體）

? ? (3)斜體和粗體

? ? font-style用來指定文本的斜體。

? ? 指定斜體：font-style:italic? ? 指定非斜體：font-style:normal

? ? font-weight用來指定文本的粗體钳降。

? ? 指定粗體：font-weight:bold? ? ? 指定非粗體：font-weight:normal

? ? (4)小型大寫字母

? ? font-variant屬性可以將字母類型設(shè)置為小型大寫厚宰。

? ? ? 在該樣式中，字母看起來像是稍微縮小了尺寸的大寫字母。

? ? – font-variant:small-caps

? ? (5)字體屬性的簡寫

? ? font可以一次性同時設(shè)置多個字體的樣式铲觉。

? ? 語法： – font:加粗 斜體 小型大寫 大小/行高 字體

? ? 這里前邊幾個加粗澈蝙、斜體和小型大寫的順 序無所謂，也可以不寫撵幽。

? ? 777(但是大小和字體 必須寫且必須寫到后兩個)777

? ? (6)行間距

? ? line-height用于設(shè)置行高灯荧，行高越大則行 間距越大。

? ? 行間距 = line-height – font-size

? ? (7)大寫化

? ? text-transform樣式用于將元素中的字母全都變成大寫盐杂。

? ? 大寫：text-transform:uppercase? ? ? ? ? 小寫：text-tansform:lowercase

? ? 首字母大寫：text-transform:capitalize? ? 正常：text-transform:none

? ? (8)文本的修飾

? ? text-decoration屬性逗载，用來給文本添加各 種修飾。通過它可以為文本的上方况褪、下方 或者中間添加線條撕贞。

? ? 可選值：

? ? underline \ overline \ line-through \ none

? ? (9)字母間距和單詞間距

? ? letter-spacing用來設(shè)置字符之間的間距。

? ? word-spacing用來設(shè)置單詞之間的間距测垛。

? ? 這兩個屬性都可以直接指定一個長度或百 分?jǐn)?shù)作為值捏膨。正數(shù)代表的是增加距離，而 負(fù)數(shù)代表減少距離食侮。

? ? (10)對齊文本

? ? text-align用于設(shè)置文本的對齊方式号涯。

? ? 可選值：

? ? ? ? left：左對齊? ? ? ? right：右對齊

? ? ? ? justify：兩邊對齊? center：居中對齊

? ? (11)首行縮進(jìn)

? ? text-indent用來設(shè)置首行縮進(jìn)。

? ? 該樣式需要指定一個長度锯七，并且只對第一 行生效链快。

五、盒子模型

? ? (1)盒子

? ? CSS處理網(wǎng)頁時眉尸，它認(rèn)為每個元素都包含在一 個不可見的盒子里域蜗。

? ? 為什么要想象成盒子呢？因為如果把所有的元 素都想象成盒子噪猾，那么我們對網(wǎng)頁的布局就相 當(dāng)于是擺放盒? ? ? 子霉祸。

? ? 我們只需要將相應(yīng)的盒子擺放到網(wǎng)頁中相應(yīng)的 位置即可完成網(wǎng)頁的布局。

? ? (2)一個盒子我們會分成幾個部分：

? ? 內(nèi)容區(qū)(content)? 內(nèi)邊距(padding)

? ? 邊框(border)? ? ? 外邊距(margin)

? ? (3)內(nèi)容區(qū)

? ? 內(nèi)容區(qū)指的是盒子中放置內(nèi)容的區(qū)域袱蜡，也就是元素 中的文本內(nèi)容丝蹭，子元素都是存在于內(nèi)容區(qū)中的。

? ? 如果沒有為元素設(shè)置內(nèi)邊距和邊框坪蚁，則內(nèi)容區(qū)大小 默認(rèn)和盒子大小是一致的奔穿。

? ? 通過width和height兩個屬性可以設(shè)置內(nèi)容區(qū)的大 小。

? ? width和height屬性只適用于塊元素敏晤。

? ? (4)內(nèi)邊距

? ? 顧名思義贱田，內(nèi)邊距指的就是元素內(nèi)容區(qū)與邊框以內(nèi) 的空間。

? ? 默認(rèn)情況下width和height不包含padding的大小嘴脾。

? ? 使用padding屬性來設(shè)置元素的內(nèi)邊距男摧。

? ? 例如：padding:10px 20px 30px 40px? 這樣會設(shè)置元素的上、右、下彩倚、左四個方向的內(nèi)邊距。

? ? padding:10px 20px 30px; 分別指定上扶平、左右帆离、下四個方向的內(nèi)邊距

? ? padding:10px 20px; 分別指定上下、左右四個方向的內(nèi)邊距

? ? padding:10px; 同時指定上左右下四個方向的內(nèi)邊距

? ? 同時在css中還提供了padding-top结澄、padding-right哥谷、padding-

? ? right、padding-bottom分別用來指定四個方向的內(nèi)邊距麻献。

? ? (5)邊框

? ? 可以在元素周圍創(chuàng)建邊框们妥，邊框是元素可見框的最外部。

? ? 可以使用border屬性來設(shè)置盒子的邊框： border:1px red solid;

? ? 上邊的樣式分別指定了邊框的寬度勉吻、顏色和樣式监婶。

? ? 也可以使用border-top/left/right/bottom分別指定上右下左 四個方向的邊框。

? ? 和padding一樣齿桃，默認(rèn)width和height并包括邊框的寬度惑惶。

? ? (6)邊框的樣式

? ? 邊框可以設(shè)置多種樣式：

? ? none（沒有邊框） dotted（點線）

? ? dashed（虛線） solid（實線）

? ? double（雙線） groove（槽線）

? ? ridge（脊線） inset（凹邊）

? ? outset（凸邊）

? ? (6)外邊距

? ? 外邊距是元素邊框與周圍元素相距的空間。

? ? 使用margin屬性可以設(shè)置外邊距短纵。

? ? 用法和padding類似带污，同樣也提供了四個方向的? margin-top/right/bottom/left。

? ? 當(dāng)將左右外邊距設(shè)置為auto時香到，瀏覽器會將左右外 邊距設(shè)置為相等鱼冀，

? ? 所以這行代碼margin:0 auto可 以使元素居中。重疊的要點(垂直悠就、相鄰)

? ? (7)display

? ? 我們不能為行內(nèi)元素設(shè)置width千绪、height、? margin-top和margin-bottom理卑。

? ? 我們可以通過修改display來修改元素的性 質(zhì)翘紊。

? ? 可選值：block：設(shè)置元素為塊元素? ? ? inline：設(shè)置元素為行內(nèi)元素

? ? inline-block：設(shè)置元素為行內(nèi)塊元素? none：隱藏元素（元素將在頁面中完全消失）

? ? (8)visibility

? ? visibility屬性主要用于元素是否可見。

? ? 和display不同藐唠，使用visibility隱藏一個元素帆疟，

? ? 隱藏后其在文檔中所占的位置會依然 保持，不會被其他元素覆蓋宇立。

? ? 可選值：visible：可見的? hidden：隱藏的

? ? (9)overflow

? ? 當(dāng)相關(guān)標(biāo)簽里面的內(nèi)容超出了樣式的寬度 和高度是踪宠，

? ? 就會發(fā)生一些奇怪的事情，瀏 覽器會讓內(nèi)容溢出盒子妈嘹。

? ? 可以通過overflow來控制內(nèi)容溢出的情況柳琢。

? ? 可選值： visible：默認(rèn)值? ? ? ? ? ? scroll：添加滾動條

? ? auto：根據(jù)需要添加滾動條? hidden：隱藏超出盒子的內(nèi)容