大前端學(xué)習(xí)筆記4-CSS常用樣式

時(shí)間：2023-08-30 01:06:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-08-30 01:06:01 來源：網(wǎng)站運(yùn)營

大前端學(xué)習(xí)筆記4-CSS常用樣式：CSS 常用樣式

一、字體屬性

• 字體類樣式包括：字體font-family、字號(hào)font-size、粗細(xì)font-weight、風(fēng)格font-style四個(gè)。

• 字體綜合屬性font的三種寫法

• Firewords軟件（量取文字行高用）

二、文本屬性

• 文本屬性包括：顏色color、水平對(duì)齊text-align、修飾text-decoration、縮進(jìn)text-indent、行高line-height五個(gè)。

三、盒模型

• 盒模型又叫框模型，包含了五個(gè)用來描述盒子位置、尺寸的屬性，分別是寬度width、高度height、內(nèi)邊距padding、邊框border、外邊距margin。

• 常見盒模型區(qū)域：盒模型的屬性中，根據(jù)不同屬性的效果，可以劃分區(qū)域。

• 盒模型屬性

• 寬度width和高度height的特殊應(yīng)用

• 盒模型的復(fù)合屬性

• 盒模型復(fù)合屬性的單一屬性劃分

• 復(fù)合屬性和單一屬性的應(yīng)用

四、盒模型擴(kuò)展

雖然我們了解了盒模型的五個(gè)屬性的基本語法，但是在實(shí)際工作中還有更多的方法和技巧需要掌握，因些，我們需要擴(kuò)展對(duì)盒模型的應(yīng)用知識(shí)。

• 五種常用的盒模型擴(kuò)展

• 溢出解決方案：overflow屬性

五、標(biāo)準(zhǔn)文檔流

問題思考：在我們遇到HTML元素中，有的標(biāo)簽元素如<div>、<p>等在瀏覽器中加載時(shí)必須獨(dú)自占滿一行，有的標(biāo)簽元素如<a>、<span>等則不會(huì)獨(dú)占一行，原因是什么？

• 標(biāo)準(zhǔn)文檔流，指的是元素排版布局過程中，元素會(huì)默認(rèn)自動(dòng)從左往右，從上往下的流式排列方式。前面內(nèi)容發(fā)生了變化，后面的內(nèi)容位置也會(huì)隨著發(fā)生變化。
• HTML就是一種標(biāo)準(zhǔn)文檔流文件。
• HTML中的標(biāo)準(zhǔn)文檔流特點(diǎn)通過兩種方式體現(xiàn)：微觀現(xiàn)象和元素等級(jí)。

• 元素等級(jí)包括：塊級(jí)元素、行內(nèi)元素及行內(nèi)塊元素三種。

六、顯示模式-display

• 標(biāo)準(zhǔn)流中的元素有自己默認(rèn)的瀏覽器加載模式，但是加載模式不是一成不變的，后期可以通過display屬性更改一個(gè)標(biāo)簽的顯示模式。
• 屬性值：元素根據(jù)屬性值不同，可以加載對(duì)應(yīng)元素等級(jí)的顯示模式的特點(diǎn)。

• 脫離標(biāo)準(zhǔn)流

1. display屬性更改的顯示模式并沒有改變標(biāo)準(zhǔn)流本質(zhì)性質(zhì)，頁面還是只能從上往下加載，存在空白折疊現(xiàn)象等微觀性質(zhì)，要想實(shí)現(xiàn)更多的界面布局效果需要脫離標(biāo)準(zhǔn)流的限制。
2. 標(biāo)簽元素脫離標(biāo)準(zhǔn)流的方法包括：浮動(dòng)、絕對(duì)定位、固定定位。

七、浮動(dòng)

• 浮動(dòng)的定義

• 浮動(dòng)的性質(zhì)：為了更好的利用浮動(dòng)進(jìn)行布局，我們需要了解浮動(dòng)相關(guān)的性質(zhì)。

• 浮動(dòng)存在的問題

• 清除浮動(dòng)的方法（重點(diǎn)）

八、<a>標(biāo)簽的偽類

• 偽類和類之間有一定的相似之處，也存在明顯的區(qū)別。

• <a>標(biāo)簽可以根據(jù)用戶行為不同，劃分為四種狀態(tài)，通過<a>標(biāo)簽的偽類可以將四種狀態(tài)選中設(shè)置為不同的樣式效果，用戶觸發(fā)對(duì)應(yīng)行為，就可以加載對(duì)應(yīng)的樣式。

九、背景屬性

• CSS中除了布局類屬性，還需要添加一些背景類的內(nèi)容進(jìn)行頁面的修飾，從而讓網(wǎng)頁變得更加的美觀。
• CSS中通過background屬性來設(shè)置背景，它是一個(gè)綜合屬性，可以拆分成多個(gè)單一屬性。

• 背景屬性的綜合寫法

• 背景應(yīng)用：背景屬性在實(shí)際應(yīng)用中有很多使用場(chǎng)景，下面是幾個(gè)比較常見的場(chǎng)景。

• CSS3新增背景屬性

• 背景縮放background-size

十、定位屬性

• 定位：跟盒模型、浮動(dòng)等屬性一樣，是另一種布局的重要屬性，常用于制作壓蓋或者位置有關(guān)的效果。

• 偏移量屬性：定位的元素要想發(fā)生位置的移動(dòng)，必須搭配偏移量屬性進(jìn)行設(shè)置。

• 相對(duì)定位、絕對(duì)定位、固定定位的區(qū)別和共通點(diǎn)

• 相對(duì)定位（relative）的注意事項(xiàng)及實(shí)際應(yīng)用

• 絕對(duì)定位（absolute）的參考元素及參考點(diǎn)

• 絕對(duì)定位（absolute）的注意事項(xiàng)及實(shí)際應(yīng)用

• 定位的應(yīng)用

• 壓蓋順序：實(shí)際使用定位時(shí)，可能出現(xiàn)多個(gè)定位的元素加載到同一個(gè)位置的情況，這時(shí)候壓蓋的順序是可以控制的。

上一篇筆記：

下一篇筆記：