### 1、CSS布局的基本單位:Box
Box是CSS布局的對象和基本單位,簡單點說,就是一個頁面是由很多Box組成的。元素的類型和display屬性,決定了這個Box的類型。不同類型的Box,會參與不同的Formatting Context(一個決定如何渲染文檔的容器),因此Box內的元素會以不同的方式渲染。
- Block-level box:display屬性為block,list-item和table的元素,會生成block-level box,并且參與block formatting context;
- inline-level box:display屬性為inline,inline-block和inline-table的元素,會生成inline-level box,并且參與inline formatting context。
### 2、BFC的定義
BFC(Block Formatting Context)直譯為“塊級格式化上下文”。它是一個獨立的渲染區域,只有Block-level Box參與,它規定了內部的Block-level Box如何布局,并且與這個區域外部毫不相關。
### 3、BFC布局規則
- 內部的Box會在垂直方向,一個接一個地放置;
- Box垂直方向的距離由margin決定,屬于同一個BFC的兩個相鄰Box的margin會發生重疊;
- 每個元素的margin box的左邊,與包含塊border box的左邊相接觸,即使存在浮動也是如此;
- BFC的區域不會與float box重疊;
- BFC就是頁面上的一個隔離的獨立容器,容器里面的子元素不會影響到外面的元素,反之也如此;
- 計算BFC的高度時,浮動元素也參與計算。
### 4、哪些元素會生成BFC
- 根元素;
- float屬性不為none;
- position為absolute或fixed;
- display為inline-block,table-cell,table-caption,flex,inline-flex;
- overflow不為visible。
- 1、前端常用知識點
- 1.1 如何修改input的placeholder
- 1.2 如何修改滾動條默認樣式
- 1.3 理解BFC
- 1.4 數字每隔三位加逗號
- 1.4.1 簡單粗暴的做法
- 1.4.2 比較常用的方法
- 1.5 D3圖表中如何讓文字豎著顯示
- 1.6 Handlebars模板中如何比較兩個值
- 1.7 SVG/D3中字體特殊設置
- 1.8 Handlebars模板中序號從1開始排序
- 1.9 修改checkbox默認樣式
- 1.10 D3.js 執行transition動畫中斷
- 2、執法項目
- 2.1 面積圖填充為線條樣式
- 2.2 一個paseFloat()方法兩分鐘就把頁面卡死了
- 2.3 開發中常見的細節問題
- 3、迪愛斯項目
- 3.1 熱點冰點卡死問題
- 3.2 ifream切換導致內存泄漏
- 3.3 D3文字旋轉問題
- 3.4 D3圖表提示框位置問題
- 3.5 js如何實現頁面iframe事件監聽
- 3.6 zTree-jQuery 樹插件異步加載如何傳參
- 3.7 圖易加載無延遲隱藏部分頁面組件
- 4、指揮大屏項目
- 4.1 長時間運行chrome瀏覽器奔潰問題
- 5、PC端指揮項目
- 5.1 地圖上各區域添加圖表并將圖表顯示在各區域中心位置
- 5.2 svg里面添加image標簽該的width,height屬性被壓縮問題
- 5.3 地圖上添加圖表或文字后較小的區域無法鉆取
- 5.4 svg添加image元素在谷歌低版本不顯示
- 5.5 input輸入框記住用戶名或密碼后樣式被瀏覽器自帶的樣式覆蓋
- 6、運維項目
- 6.1 按鍵F11頁面無法縮放
- 6.2 主頁面逆時針旋轉的兩段弧問題
- 6.3 websocket的close方法不起作用
- 7、漢陽項目
- 8、警務云項目
- 8.1 PKI兼容chrome瀏覽器問題
- 9、萬達項目
- 9.1 直方圖中出現數值比刻度值大
- 9.2 D3選擇集的處理模版
- 9.3 將數字轉化為三分位節法
- 9.4 制作簡易X軸
- 10、涪陵項目
- 10.1 IE11部分版本瀏覽器下滾動條位置不對
- 11、昆明大屏展示
- 11.1第一期五個頁面經驗匯總
- 11.2防止文本越界
- 11.3SVG里面謹慎設置font-family
- 11.4Error: <rect> attribute height: A negative value is not valid
- 12、技偵動態管控
- 12.1 使用CSS3動畫導致頁面抖動
- 12.2 使用 digitroll數字滾動插件,給數字加逗號(3位數分隔)
- 13、ES6前端開發框架
- 13.1 打包后部署到Tomcat下訪問路徑不對
- 14、貴陽項目
- 14.1、關于引用不到saga文件報錯的問題
- 15、React前端開發框架
- 15.1 this.refs.xxx獲取到的值是undefined
- 15.2 Mockjs與mapbox不兼容
- 15.3 axios聯調報跨域錯誤
- 15.4 saga結合websocket使用方法
- 15.5 打包部署后訪問頁面白屏