跳到主要內容

HTML&CSS面試高頻考點(二)

HTML&CSS面試高頻考點(一)    


6. W3C盒模型與怪異盒模型



  • 標準盒模型（W3C標準）

  • 怪異盒模型（IE標準）


怪異盒模型下盒子的大小=width（content + border + padding） + margin，即真實大小。


*參考標準模式與兼容模式的區別，兼容模式下為怪異盒模型。


*注意box-sizing可以改變盒模型（box-sizing:border-box即為怪異盒模型）。


7. 水平垂直居中的方法


（1）定寬居中


1. absolute + 負margin


//父元素
 position: relative;
 //子元素
 position: absolute;
 top: 50%;
 left: 50%;
 //margin設置自身一半的距離
 margin-top: -50px;
 margin-left: -50px;

2. absolute + margin: auto


//父元素
 position: relative;
 //子元素
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 margin: auto;

 3. absolute + calc


//父元素
 position: relative;
 //子元素
 position: absolute;
 //減去自身一半的寬高
 top: calc(50% - 50px);
 left: calc(50% - 50px);

 *calc() 函數用於動態計算長度值。


 4. min-height: 100vh + flex + margin:auto


main{ 　　min-height: 100vh;
    /* vh相對於視窗的高度，視窗高度是100vh */
 　　/* "視區"所指為瀏覽器內部的可視區域大小， 　　不包含任務欄標題欄以及底部工具欄的瀏覽器區域大小。 */ 　　display: flex;
 } div{ 　　margin: auto;
 }

（2）不定寬居中


1. absolute + transform


//父元素
 position: relative;
 //子元素
 position: absolute;
 top:50%;
 left:50%;
 transform:translate(-50%,-50%);

2. line-height


//父元素 .wp { text-align: center; line-height: 300px;
 }
//子元素
.box { display: inline-block; vertical-align: middle; line-height: inherit; text-align: left;
 }

3. flex布局


display: flex;//flex布局
 justify-content: center;//使子項目水平居中
 align-items: center;//使子項目垂直居中

4. table-cell布局


因為table-cell相當與表格的td，無法設置寬和高，所以嵌套一層，嵌套一層必須設置display: inline-block


<div class="box">
     <div class="content">
         <div class="inner">
         </div>
     </div>
 </div> .box { //只有這裏可以設置寬高 display: table; //這是嵌套的一層，會被table-cell覆蓋 } .content { display: table-cell; vertical-align: middle;//使子元素垂直居中 text-align: center;//使子元素水平居中 } .inner { display: inline-block; //子元素 }

8. BFC


 前文鏈接：點擊這裏


BFC：Block formatting context（塊級格式化上下文），是一個獨立的渲染區域，只有Block-level box參与，與外部區域毫不相干。



  • block-level box：display屬性為block, list-item, table的元素。

  • inline-level box：display屬性為inline, inline-box, inline-table的元素。


(1)BFC的布局規則



  • 內部box在垂直方向一個個放置；

  • 同一個BFC的兩個相鄰box的margin會發生重疊；

  • 每個盒子的margin左邊與包含塊的border左邊相接觸，即使存在浮動也是如此；

  • BFC區域不會和float box重疊；

  • 計算BFC高度時，浮動元素也參与計算。


（2）開啟BFC的方法



  • float的值不是none

  • position的值不是static或relative

  • display的值是inline-block, table-cell, flex, table-caption或inline-flex

  • overflow的值不是visible


（3）BFC的作用


1. 避免margin塌陷


根據BFC的布局規則2，我們可以通過設置兩個不同的BFC的方式解決margin塌陷的問題。


2. 自適應兩欄布局


根據BFC的布局規則3和4，我們將右側div開啟BFC就可以形成自適應兩欄布局。


.left { float: left; //左側浮動 }


.left { float: left;
 } .right { overflow: hidden; //開啟BFC }


3. 清除浮動


當不給父節點設置高度的時候，如果子節點設置浮動，父節點會發生高度塌陷。這個時候就要清除浮動。


根據規則5，只需給父元素激活BFC就可以達到目的。


.par { overflow: hidden; //父元素開啟BFC } .child { float: left; //子元素浮動 }

9. 清除浮動


 這篇有寫：點這裏


10. position屬性


 這篇有寫：點這裏

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【【其他文章推薦】

※帶您來了解什麼是 USB CONNECTOR  ?



※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面



※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站，提高曝光率!



※綠能、環保無空污,成為電動車最新代名詞，目前市場使用率逐漸普及化



※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益



※教你寫出一流的銷售文案?


Orignal From: HTML&CSS面試高頻考點(二)

留言

張貼留言

這個網誌中的熱門文章

Python 併發總結，多線程，多進程，異步IO

1 測量函數運行時間 import time def profile(func): def wrapper(*args, ** kwargs): import time start = time.time() func( *args, ** kwargs) end = time.time() print ' COST: {} ' .format(end - start) return wrapper @profile def fib(n): if n<= 2 : return 1 return fib(n-1) + fib(n-2 ) fib( 35 )   2 啟動多個線程，並等待完成   2.1 使用threading.enumerate() import threading for i in range(2 ): t = threading.Thread(target=fib, args=(35 ,)) t.start() main_thread = threading.currentThread() for t in threading.enumerate(): if t is main_thread: continue t.join()   2.2 先保存啟動的線程 threads = [] for i in range(5 ): t = Thread(target=foo, args= (i,)) threads.append(t) t.start() for t in threads: t.join()   3 使用信號量，限制同時能有幾個線程訪問臨界區 from threading import Semaphore import time sema = Semaphor...
張貼留言
閱讀完整內容

韋伯連續劇終於更新 期待第一季順利完結

　　地球天文學界的跳票大王詹姆斯·韋伯空間望遠鏡 (James Webb Space Telescope，縮寫為 JWST)自 1996 年以來斷斷續續不按劇本演出的連續劇終於讓焦慮的觀眾們又等到了一次更新：五層遮陽罩測試順利完成。 裝配完成的韋伯望遠鏡與好夥伴遮陽罩同框啦。Credit: NASA 　　嚴格的測試是任何空間任務順利成功的重中之重。遮陽罩，這個韋伯望遠鏡異常重要的親密夥伴，要是無法正常運轉的話，韋伯的這一季天文界連續劇說不準就要一直拖更了。 　　詹姆斯·韋伯空間望遠鏡是歷史上造出的最先進的空間望遠鏡。它不僅是一架紅外望遠鏡，還具有特別高的靈敏度。但想要達到辣么高的靈敏度來研究系外行星和遙遠的宇宙童年，韋伯童鞋必須非常"冷靜"，體溫升高的話，靈敏度會大大折損。這個時候，遮陽罩就要大顯身手啦。 　　遮陽罩在韋伯的設計中至關重要。韋伯望遠鏡會被發射到拉格朗日 L2 點，運行軌道很高，遠離太陽、地球與月球。太陽是韋伯的主要熱量干擾的來源，其次是地球與月球。遮陽罩會有效阻斷來自這三大熱源的能量並保護韋伯維持在工作溫度正常運轉。這個工作溫度指的是零下 220 攝氏度(-370 華氏度；50 開爾文)。 上圖中我們可以看出，韋伯望遠鏡的配置大致可分為兩部分：紅色較熱的一面溫度為 85 攝氏度，藍色較冷的一面溫度達到零下 233 攝氏度。紅色的這部分中，儀器包括太陽能板、通信設備、計算機、以及轉向裝置。藍色部分的主要裝置包括鏡面、探測器、濾光片等。Credit: STSci. 　　遮陽罩的那一部分和望遠鏡的鏡面這部分可以產生非常極端的溫差。遮陽的這面溫度可以達到 110 攝氏度，足以煮熟雞蛋，而背陰處的部分溫度極低，足以凍結氧氣。 　　工程師們剛剛完成了五層遮陽罩的測試，按照韋伯在 L2 時的運行狀態安裝了遮陽罩。L2 距離地球約 160 萬公里。NASA 表示這些測試使用了航天器的自帶系統來展開遮陽罩，測試目前都已成功完成。韋伯望遠鏡遮陽罩負責人 James Cooper 介紹說這是遮陽罩"第一次在望遠鏡系統的电子設備的控制下展開。儘管這個任務非常艱巨，難度高，但測試順利完成，遮陽罩展開時的狀態非常驚艷"。 　　遮陽罩由五層 Kapton 製成。Kapton 是一種聚酰亞胺薄膜材料， 耐高溫絕...
張貼留言
閱讀完整內容

LINE 發票管家「一鍵分享發票」新功能，聚餐AA更好算帳

» » LINE 發票管家「一鍵分享發票」新功能，聚餐AA更好算帳 消費明細好清楚，不怕算錯錢啦！ by in , 讀取中... 之前介紹過的「LINE 發票管家」，除了能對統一發票、管理消費紀錄，現在還能分享消費明細給其他朋友囉！趕快來看看該如何分享吧！讓大家在聚餐過後，不用再截圖、拍照把消費明細記錄下來分享到 LINE 好友群組，只要用 LINE發票管家就可以隨時一鍵分享消費明細，包括店家、消費時間、消費項目、金額通通都有，聚餐 AA 也更好算帳。 LINE 發票管家「一鍵分享發票」新功能，聚餐AA更好算帳 朋友聚餐完，經常會先由其中一位買單再事後收帳，不過難免擔心忘記拍照紀錄下消費明細，導致算帳變得很麻煩。但是，現在只要用 LINE發票管家，不僅能將發票存入載具後直接匯入發票，進而更方便管理每月的消費情況，現在還能用它來分享消費明細到 LINE 聊天室，不需要截圖，整個流程超級簡單！ ▲圖片來源： 當使用 LINE發票管家並且綁定載具後，只要日常消費有將發票存入載具就通通會自動匯入 LINE發票管家。如果想暸解自己近期的消費情況，也能在 LINE發票管家點選「發票明細」查詢所有消費紀錄。 ＊小提醒：存入手機條碼的發票，待財政部 1-2 日作業時間將發票資料匯入後， 打開單筆消費後分享到指定對象或群組。 像是朋友聚餐或其它購物消費，就能在 LINE發票管家查看每一筆消費的所有消費明細，每一項餐點的項目、價格通通一目了然。如果想將該筆消費內容分享給好友收帳，只要點選該筆消費明細後，接著點選畫面右上角的「分享」按鈕。 網頁設計 最專業,超強功能平台可客製,窩窩以「數位行銷」「品牌經營」「網站與應用程式」「印刷品設計」等四大主軸，為每一位客戶客製建立行銷脈絡及洞燭市場先機,請問 台中電動車 哪裡在賣比較便宜可以到台中景泰電動車門市去看看總店：臺中市潭子區潭秀里雅潭路一段102-1號。 電動車補助 推薦評價好的 iphone維修 中心擁有專業的維修技術團隊，同時聘請資深iphone手機維修專家，現場說明手機問題，快速修理，沒修好不收錢住家的頂樓裝 太陽光電 聽說可發揮隔熱功效一線推薦東陽能源擁有核心技術、...
張貼留言
閱讀完整內容