Web前端基礎學習-3

bfc（block formatting context）

塊級格式化上下文

生成bfc的方式：

一、根元素；

二、float屬性不爲none（脫離文檔流）；

三、position爲absolute或者fixed的時候；

四、display爲inline-block、table-cell、table-caption、flex、inline-flex；

五、overflow不爲visible（默認）。

 

渲染的流程：

文檔解析成對象模型（dom），經過選擇器給對應的元素加上樣式，根據渲染規則到顯存區域，渲染過程當中用到的數據經過上下文來獲取。

bfc：渲染時用於保存臨時數據和獲取外部數據的容器。

HTML和body都是bfc。

bfc的應用：

自適應兩欄佈局；

清除內部浮動；

防止垂直margin塌陷；

.......

 

響應式佈局：

三要素：彈性圖片、媒體查詢、彈性佈局

響應式佈局開發概念：移動端優先和PC端優先

根據當前項目的用戶比例進行設計，項目的主要用戶爲移動端用戶時採用移動端優先佈局，不然採用PC端優先佈局。

視口：

佈局視口：網頁在移動端中渲染出的區域，用來加載網頁；

可視視口：瀏覽器的窗口；

理想視口：由喬布斯提出，當佈局視口大小與可視視口大小相同的時候就是理想視口。

 

css僞元素

僞元素根據字面理解就是假裝成元素，可是僞元素並非元素，而是於生成的內容相關聯。生成內容主要指由瀏覽器建立的內容，而不是由標誌或內容來表示。生成內容主要由:before和:after僞元素來實現，固然僞元素還包括:first-line,:first-letter和::selection。

:first-letter

:first-letter設置一個元素第一個字母的樣式。

注意1：全部前導標點符號應與第一個字母一同應用該樣式

注意2：只能與塊級元素關聯

注意3：只有當選擇器部分和左大括號之間有空格時，IE6-瀏覽器才支持。由於first-letter中存在鏈接符的緣由

示例：

div:first-letter { color:red; }

:first-line

:first-line設置元素內容第一行文本的樣式。

注意1：只能與塊級元素關聯

注意2：只有當選擇器部分和左大括號之間有空格時，IE6-瀏覽器才支持。由於first-line中存在鏈接符的緣由

示例:

div:first-line {color:red;}

:before(IE7-瀏覽器不支持)

在元素內容的最開始插入生成內容

注意：默認這個僞元素是行內元素，且繼承元素可繼承的屬性；IE7-瀏覽器中必須聲明!DOCTYPE，不然不起做用

示例：

div:before{content:"前綴"}

:after(IE7-瀏覽器不支持)

在元素內容的最後插入生成內容

注意：默認這個僞元素是行內元素，且繼承元素可繼承的屬性；IE7-瀏覽器中必須聲明!DOCTYPE，不然不起做用

示例：

div:after{content:"後綴"}

::selection(IE8-瀏覽器不支持)

匹配被用戶選擇的部分

注意1：firefox瀏覽器須要添加-moz-前綴

注意2：只支持雙冒號寫法

注意3：只支持顏色和背景顏色兩個樣式

div::selection{color: red;}

下面是僞類元素速查表：

---

/* Typographic Pseudo-elements */ ::first-line /* 選取文字塊首行字符 */ ::first-letter /* 選取文字塊首行首個字符 */ /* Highlight Pseudo-elements */ ::selection /* 選取文檔中高亮(反白)的部分*/ ::inactive-selection /* 選取非活動狀態時文檔中高亮(反白)的部分*/ ::spelling-error /* 選取被 UA 標記爲拼寫錯誤的文本 */ ::grammar-error /* 選取被 UA 標記爲語法錯誤的文本 */ /* Tree-Abiding Pseudo-elements */ ::before /* 在選中元素中建立一個前置的子節點 */ ::after /* 在選中元素中建立一個後置的子節點 */ ::marker /* 選取列表自動生成的項目標記符號 */ ::placeholder /* 選取字段的佔位符文本(提示信息) */ /* WebVTT Format */ ::cue /* 匹配所選元素中 WebVTT 提示 */ /* Fullscreen API */ ::backdrop /* 匹配全屏模式下的背景 */

注意提示

content屬性

content屬性應用於before和after僞元素。

content:normal;(默認) content:<string>|<uri>|attr(<identifier>)

【1】<string>裏面的內容會原樣顯示，即便包含某種標記也不例外。

注意1：若是但願生成內容中有一個換行，則須要使用\A

注意2：如果一個很長的串，須要它拆分紅多行則須要用\對換行符轉義

div:before{ content: "第一段\ 第二段"; } div:after{ content:"\A後綴"; }

【2】

div:before{ content: url("arrow.gif"); }

【3】attr(<identifier>)

div:before{ content: attr(data-before); }

下面是案例：

html代碼：

<div class="box"></div>

css代碼：

/*使用before僞元素畫圓*/ .box:before{ display:block; content:"釘子"; height: 50px; width: 50px; border-radius: 50%; background-color: black; color: white; font-weight:bold; text-align: center; line-height: 50px; } /*使用after僞元素畫三角*/ .box:after{ display: block; content: ""; width: 0; height: 0; border: 25px solid transparent; border-top: 50px solid black; margin-top: -20px; }