bfc（block formatting context）
塊級格式化上下文
生成bfc的方式：
1、根元素；
2、float屬性不為none（脫離文件流）；
3、position為absolute或者fixed的時候；
4、display為inline-block、table-cell、table-caption、flex、inline-flex；
5、overflow不為visible（預設）。
渲染的流程：
文件解析成物件模型（dom），通過選擇器給對應的元素加上樣式，根據渲染規則到視訊記憶體區域，渲染過程中用到的資料通過上下文來獲取。
bfc：渲染時用於儲存臨時資料和獲取外部資料的容器。
html和body都是bfc。
bfc的應用：
自適應兩欄布局；
清除內部浮動；
防止垂直margin塌陷；
.......
響應式布局：
響應式布局開發概念：移動端優先和pc端優先
根據當前專案的使用者比例進行設計，專案的主要使用者為移動端使用者時採用移動端優先布局，否則採用pc端優先布局。
視口：布局視口：網頁在移動端中渲染出的區域，用來載入網頁；
可視視口：瀏覽器的視窗；
理想視口：由賈伯斯提出，當布局視口大小與可視視口大小相同的時候就是理想視口。
偽元素根據字面理解就是偽裝成元素，但是偽元素並不是元素，而是於生成的內容相關聯。生成內容主要指由瀏覽器建立的內容，而不是由標誌或內容來表示。生成內容主要由:before和:after偽元素來實現，當然偽元素還包括:first-line,:first-letter和::selection。
:first-letter設定乙個元素第乙個字母的樣式。
注意1：所有前導標點符號應與第乙個字母一同應用該樣式示例：注意2：只能與塊級元素關聯
注意3：只有當選擇器部分和左大括號之間有空格時，ie6-瀏覽器才支援。因為first-letter中存在連線符的原因
div:first-letter
:first-line設定元素內容第一行文字的樣式。
注意1：只能與塊級元素關聯
注意2：只有當選擇器部分和左大括號之間有空格時，ie6-瀏覽器才支援。因為first-line中存在連線符的原因示例:
div:first-line
注意：預設這個偽元素是行內元素，且繼承元素可繼承的屬性；ie7-瀏覽器中必須宣告!doctype，否則不起作用示例：
div:before
注意：預設這個偽元素是行內元素，且繼承元素可繼承的屬性；ie7-瀏覽器中必須宣告!doctype，否則不起作用示例：
div:after
注意1：firefox瀏覽器需要新增-moz-字首
注意2：只支援雙冒號寫法
注意3：只支援顏色和背景顏色兩個樣式
div::selection
/* 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:normal;(預設)
content:||attr()
注意1：如果希望生成內容中有乙個換行，則需要使用\a
注意2：若是乙個很長的串，需要它拆分成多行則需要用\對換行符轉義
div:before
div:after
div:before
identifier>)
div:before
html**：
div>
/*使用before偽元素畫圓*/
.box:before
/*使用after偽元素畫三角*/
.box:after
web前端基礎怎麼學習
web前端基礎怎麼學習，html基礎語法 常用的標記及一些概念性的知識 概念性的知識 1 的機構構成及web標準 w3c制定的xhtml css標準及由ecma歐洲電腦廠商聯合會制定dom bom ecmascript標準。2 xhtml和html的區別等。常用標記及分類 1 標記分類 常規標記及空...
Web前端基礎學習 2
盒子模型 在頁面中，我們將所有的元素全部看做是乙個盒子，頁面布局就是將大大小小不同的盒子堆砌在一起，而乙個盒子由以下幾部分組成 padding 內邊距，內容到邊框的距離 margin 外邊距，其他盒子到當前盒子的邊框的距離 border 邊框 所以乙個元素在頁面中實際所佔的空間是 內容 paddin...
web前端基礎練習題（3）
尊敬的領導 您好 我是計算機專業的本科畢業生。經過將近四年的大學學習和鍛鍊，與同齡人一樣，我即將走上工作崗位，通過社會來證實自己的知識和能力。為了找到乙份符合自己特長和興趣的工作，更好地發揮自己的才能，實現自己的人生價值，我冒昧地寫下這封信，希望能得到您的認可，能為貴公司服務。此致敬禮！doctyp...