大前端學習筆記整理【一】CSS盒模型與基於盒模型的6種元素居中方案
13.table元素中的居中#parent { 2 line-height: 200px; 3 } 4 #parent img { 5 vertical-align: middle; 6 }
#parent { display: table; } #child { display: table-cell; vertical-align: middle; }
這種情況會在IE6 7下出現一定的bug,解決方案如下
1 #child { 2 display: inline-block; 3 }4.元素使用定位進行居中 此型別居中是需要基於父類元素的,需要先設定父類元素相對定位,子類元素需要做到相對於父類進行絕對定位
1 #parent {position: relative;} 2 #child { 3 position: absolute; 4 top: 50%; 5 left: 50%; 6 height: 30%; 7 width: 50%; 8 margin: -15% 0 0 -25%; 9 }此型別定位適用於塊級巢狀的元素 5.上個方案的升級版
1 #parent { 2 position: relative; 3 } 4 #child { 5 position: absolute; 6 top: 0; 7 bottom: 0; 8 left: 0; 9 right: 0; 10 width: 50%; 11 height: 30%; 12 margin: auto; 13 }6.對於已浮動的元素的居中處理
1 #parent { 2 height: 250px; 3 } 4 #floater { 5 float: left; 6 height: 50%; 7 width: 100%; 8 margin-bottom: -50px; 9 } 10 #child { 11 clear: both; height: 100px; 12 }
前端學習持續進行中,希望通過自己的努力能夠讓自己成為一個合格的前端工程師吧(神特喵總結→_→...就是不那麼菜雞就好....)
部落格內容為自己收集並整理,非原創。感謝度娘,感謝必應,谷歌翻過去了網速不好,也沒找到啥能看得...如有雷同,那肯定就是我整理資料的來源吧,手動滑稽;
完結撒花
相關推薦
大前端學習筆記整理【一】CSS盒模型與基於盒模型的6種元素居中方案
概覽 CSS盒模型,規定了元素框來處理元素的 內容、內邊距、邊框和外邊距的方式 元素部分是指內容部分,也是最實際的內容,包圍內容的稱之為內邊距,內邊距外圍是邊框,邊框外圍就是外邊距;且外邊距是透明的,所以並不會阻擋其後的元素 * { margin: 0; padding: 0; }
大前端學習筆記整理【二】CSS視覺格式化模型
1. 概念 在視覺格式化模型中,文件樹中的每個元素都將會根據盒模型產生零到多個盒子。這些盒子的佈局由如下因素決定: 盒子的尺寸和型別 定位策略(正常文件流,浮動或者絕對定位) 和文件樹中其他元素的關係 額外的資訊(比如視口的大小,圖片的原始尺寸等) 1.1 視口(viewport) 連續媒體(contin
大前端學習筆記整理【五】rem與px換算的計算方式
前言 這段時間的小專案中算是真正意義上使用了rem來進行移動端的頁面佈局,專案結束了我反思了一下之前的對於rem的使用...原來我以前對rem用法完全是在搞笑啊!!結合這次這個小專案,我覺得我也有必要對rem佈局以及用法進行一次總結。 ps.文筆可能不太好... 1.什麼是rem 來自於鵝廠ISUX團隊的解釋
大前端學習筆記整理【三】行內元素與塊級元素的區別以及絕對定位與固定定位的差異
1.簡要說明: 1. 行內元素會再一條直線上,是在同一行的。比如span和strong; 2. 塊級元素各佔一行。是垂直方向的!比如div和p 假如你要將行內元素變成塊級元素,那麼就只需要在該標籤上加上樣式 display:block; 塊級元素可以用樣式控制其高、寬的值,而行內元素不可以。 行內元素和wi
大前端學習筆記整理【七】HTTP協議以及http與https的區別
前言 還是老樣子,新部落格開始前總是想先囉嗦幾句...HTTP協議其實在當初學習java時老師就有提過...但是...反正就那麼過去了... 這段時間公司的專案正好要求做https的轉換和遷移,然後自己思考了一下,好像自己對於http連一知半解都算不上...更不提http與https的區別...想想作為一個未
大前端學習筆記整理【五】關於JavaScript中的關鍵字——this
寫在前面 工作有那麼一段時間了,但是在工作中,發現自己的理論知識還是有所欠缺。特別是在javascript上,很多東西其實自己屬於知道要用這個,但是不知道為什麼要這麼用...這種情況很是尷尬了,所以寫部落格的很重要一個目的就是鍛鍊我自己的總結能力,把學到的東西總結出來,感覺這樣能讓我更快的去理解所學到的東西。
大前端學習筆記整理【四】LESS基礎
第一次接觸CSS預編譯,然後對比後發現其實less的上手容易度確實比sass高不少,再加上公司專案也是使用的less。所以想想還是根據網上的各種教程,整理出來了一些比較基礎的、而且比較能讓我們這種初學者快速上手的例子。 菜雞一隻,程式碼要是有錯或者表達不清的地方,請各位批評指正! 那麼,現在我們就開始正文部分
大前端學習筆記整理【六】this關鍵字詳解
這裡有一個微妙但是非常重要的細節,雖然 this 的繫結規則完全取決於呼叫位置,但是隻有 foo() 執行在非 strict mode 下時,預設繫結才能繫結到全域性物件;嚴格模式下與 foo()的呼叫位置無關: function foo() { console.log( this.a );
大前端學習筆記【七】關於CSS再次整理
如果你在日常工作中使用 CSS,你的主要目標可能會重點圍繞著使事情“看起來正確”。如何實現這一點經常是遠不如最終結果那麼重要。這意味著比起正確的語法和視覺結果來說,我們更少關心 CSS 的工作原理。 CSS 的視覺結果通常是操作隱藏屬性的間接後果,你可能還沒有意識到這一點。某些 CSS 屬性(比如 backg
Python學習筆記5 【轉載】基本矩陣運算_20170618
ros class 簡單 lba spa 使用 常見 port 模塊 需要 numpy 庫支持 保存鏈接 http://www.cnblogs.com/chamie/p/4870078.html 1.numpy的導入和使用 from numpy import *;
學習筆記:【案例】財政收入影響因素分析及預測模型
6.0 pearson end 4.5 pandas 問題 特征 ase max() 案例來源:《Python數據分析與挖掘實戰》第13章 案例背景與挖掘目標 輸入數據: 《某市統計年鑒》(1995-2014) 挖掘目標: 梳理影響地方財政收入的關鍵特征,分析、識別影響地
學習筆記:【案例】中醫證型關聯規則挖掘
order 卡方檢驗 eat 業務 並行 pen fill lin 區分 案例來源:《Python數據分析與挖掘實戰》第8章 案例背景與挖掘目標 輸入數據: 挖掘目標: 借助三陰乳腺癌患者的病理信息,挖掘患者的癥狀與中醫證型之間的關聯關系 對截斷治療提供依據,挖掘潛性證素
Mongodb知識樹整理【一】
簡介 MongoDB 是一個基於分散式 檔案儲存的NoSQL資料庫 由C++語言編寫,執行穩定,效能高 旨在為 WEB 應用提供可擴充套件的高效能資料儲存解決方案 檢視官方網站 MongoDB特點 模式自由 :可以把不同結構的文件儲存在同一個資
node.js學習筆記整理(一)
(1)node Node.js 是一個基於 Chrome V8 引擎的 JavaScript 執行環境。 Node與javaScript的區別在於,javaScript的頂層物件是window,而node是global //這裡使用的var宣告的變數不是全域性的,是當前模組下的,用global宣告的表示是
【java版】資料結構與演算法分析學習之路【一】前言
一.資料結構和演算法概述?【框範圍】 基礎資料結構主要包括表【陣列+連結串列】、棧、佇列【散列表】、樹、圖、堆。高階資料結構包括伸展樹、紅黑樹、確定性跳躍表、AA樹、treap樹、k-d樹、配對堆。
Java基礎筆記整理---【07】面向物件程式設計-類和物件
int 型別預設值為 0 String型別預設值為null 方法(函式):返回值 方法名(引數型別 引數名稱, ...){方法體(程式碼塊)}this指呼叫的方法中(當前)的變數類與物件1.構造方法:1> 構造物件 構造例項的方法,一個特殊方法,方法名需要與類名相同,
linux學習筆記整理(一)
5.7 clean fig 轉載 net-tools linux 分別是 repo 兩個 ------------------------------------------ 轉載內容 --------------------- Linux升級命令有兩個分別是yum
pytorch學習筆記(十一):fine-tune 預訓練的模型
torchvision 中包含了很多預訓練好的模型,這樣就使得 fine-tune 非常容易。本文主要介紹如何 fine-tune torchvision 中預訓練好的模型。 安裝 pip install torchvision 如何 fine
【轉】WebView的JavaScript與本地代碼三種交互方式
添加 lba 文件 abr cli 漏洞 大致 execution span WebView的漏洞分析 漏洞產生的原因 最近在開發過程中遇到一個問題,就是 WebView 使用的時候,還是需要解決之前系統(4.2之前)導致的一個漏洞,雖然現在這個系統版本用戶很少了,但是也不
【 C/C++學習筆記整理】--3.取陣列中的其中一位,將其中幾位組合起來
10.定義一個數組,取陣列中的其中幾位,將其中幾位組合起來 const int f[10]={6,2,5,5,4,5,6,3,7,6}; int match(int num) { int k=0; for(int i=n