Web前端基礎學習-2

盒子模型

在頁面中，咱們將全部的元素所有看作是一個盒子，頁面佈局就是將大大小小不一樣的盒子堆砌在一塊兒，而一個盒子由如下幾部分組成：

padding：內邊距，內容到邊框的距離；

margin：外邊距，其餘盒子到當前盒子的邊框的距離；

border： 邊框；

因此一個元素在頁面中實際所佔的空間是：

內容+padding+border+margin（注意：padding/margin/border上下或者左右都有，因此計算時要算上設置的值得兩倍；）

 

怪異盒子模型：

怪異盒子模型所設置的寬高即爲其在頁面中最終所佔的位置，邊框、內外邊距所佔的位置越大則內容區域越小。

開啓怪異盒子模型的方法：box-sizing:border-box;

其最早由IE瀏覽器提出並使用，後被普遍使用。

margin塌陷：當使用margin來調整兩個元素之間的距離時，並不會以兩個元素之間的margin之和來表示，而是以兩個元素的margin最大值爲準。

解決的方法：觸發BFC（會計格式化上下文）

頁面中實現多出內容省略號顯示的方法（CSS）：

首先爲容器設置一個寬度；

而後設置文本內容不換行：white-space:nowrap;

以後是設置溢出隱藏：overflow:hidden；

最後則是在內容最後顯示省略號：text-overflow:ellipsis;

tips：以上方式僅對單行文本溢出有效（不建議使用）

定位

相對定位：

position：relative；

設置了相對定位以後，元素並無進行位移，本質上也沒有任何變化。

相對定位形影分離，元素的位置不會改變，影子移動到用戶所設定的位置。

相對定位的參考點是元素自己，也就是相對於設置了相對定位的元素進行了多少移動，因此當元素進行移動的時候，其影子也會跟着移動。

絕對定位：

position：absolute；

絕對定位移動的是元素自己；

 絕對定位的參考點是由其自己向上找，第一個擁有定位屬性的祖先元素，當其全部的外層容器都沒有定位元素的時候，默認爲根元素。

絕對定位以根元素爲參考時定位的是首屏左上角，定位值默認爲auto，bottom是首屏的下方。

子元素若是設置了絕對定位，最好爲父元素設置一個相對定位（父元素設置position:static並不能做爲子元素絕對定位的參考）。

固定定位：

position：fixed；

固定定位是相對於瀏覽器窗口的定位，定位效果相似於平時網頁上彈出的小廣告的效果，頁面滾動而固定定位的元素徹底不動。

粘性定位：

position：sticky；

因兼容性太差，這裏很少作贅述。

tips：固定定位與絕對定位脫離標準文檔流，相對定位並不會脫離標準文檔流，固然，固定於絕對定位也是脫離文本流的，不會出現相似浮動所產生的字圍效果。

 

bfc渲染規則：

一、內部的box會在垂直方向一個接一個的放置；

二、box垂直方向距離由margin決定，同一個bfc的兩個相鄰box會發生margin塌陷；

三、每一個元素的marginbox的左邊與包含塊borderbox的左邊相接觸；

四、bfc區域不會與float box重疊；

五、bfc就是一個隔離的獨立容器，裏面元素沒法影響外面，反之亦然；

六、計算bfc高度時，浮動的元素也會被算上（因此觸發bfc能夠消除浮動的影響）。

css當中常用的六種文本樣式

css 文本樣式是相對於內容進行的樣式修飾，下面來講下幾種常見的文本樣式。

首行縮進

首行縮進是將段落的第一行縮進，這是經常使用的文本格式化效果。通常地，中文寫做時開頭空兩格，相似於此。

該屬性的值是容許爲負值的。

語法：

text-indent:<length> | <percentage> | inherit

tip：初始值爲0；

應用於: 塊級元素(包括block和inline-block)

繼承性: 有

百分數: 相對於包含塊的寬度

案例：首字符下沉

div{ width: 200px; border: 1px solid black; text-indent: 0.5em; } div:first-letter{ font-size: 30px; float: left; } 

水平對齊

水平對齊是影響一個元素中的文本的水平對齊方式。

語法：

text-align: left | center | right | justify | inherit

初始值: left

應用於: 塊級元素(包括block和inline-block)

繼承性: 有

對於IE7-瀏覽器來講，使用text-align不只會改變文本的水平對齊方式，也會改變後代塊級元素的水平對齊方式

字間隔

字間隔是指單詞間距，用來設置文字或單詞之間的間距。實際上，"字"表示的是任何非空白符字符組成的串，並由某種空白符包圍。

注意：單詞之間用空格分開，單詞之間的間距 = word-spacing + 空格大小

注意：字間隔可爲負值

語法：

word-spacing: <length> | normal | inherit

 初始值: normal(默認爲0)

 應用於: 全部元素

 繼承性: 有

字母間隔

字母間隔是指字符間距

注意：字母間隔可爲負值

letter-spacing：<length> | normal | inherit

初始值: normal(默認爲0)

應用於: 全部元素

繼承性: 有

文本轉換

文本轉換用於處理英文的大小寫轉換。

語法：

text-transform:uppercase(全大寫) | lowercase(全小寫) | capitalize(首字母大寫) | none | inherit

初始值: none

應用於: 全部元素

繼承性: 有

文本修飾

文本修飾用於爲文本提供修飾線。

注意：文本修飾線的顏色與文本顏色相同。

語法：

text-decoration:none | [underline(下劃線) || overline(上劃線) || line-through(中劃線)] | inherit

初始值: none

應用於: 全部元素

繼承性: 無

在首行縮進(text-index)、水平對齊(text-align)、字間隔(word-spacing)、字母間隔(letter-spacing)、文本轉換(text-transform)、文本修飾(text-decoration)這6種文本樣式中，首行縮進(text-index)和水平對齊(text-align)只可以應用於塊級元素(包括block和inline-block)，這是最應該注意的地方。