跳到主要內容

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面試高頻考點(二)

留言

張貼留言

這個網誌中的熱門文章

強強聯手!攜手打造雲林縣Web3.0 領地方品牌進軍元宇宙

中華電信攜手國內最大Potato Media Web3.0社群共享平台，及品牌醫生果俐文創三方結合，透過經濟部「CBMP智慧雲遊跨域串連計畫」，協助品牌數位轉型，帶動品牌體驗情境、新商業模組升級與行動支付應用，第一站選在雲林縣當地原生消費品牌，打造社群消費循環，探索近期最夯的元宇宙新玩法。 Potato Media執行長顏宏霖表示，在CBMP計畫協助下，加上站內Web3.0資源，將快速協助雲林縣當地品牌升級轉型，幫助店家創造品牌價值，包含黑矸仔醬油、四代目麥芽酥、玉津烘焙坊、禪屋米胖工坊、YuDS沐耳飲、莫蒂精品巧克力、維野納複合式餐飲、頂雲咖啡、媽祖埔豆腐張、玉山碾米廠等，另外嘉義市麥麵、名香茗茶也等不及跨縣市加入，結合Potato Media站內活動，打造雲林專屬限定NFT道具與頭框，發行雲林扭蛋，體驗全新元宇宙新世界。 左起雲林縣計畫處處長李明岳、果俐文創執行長-陳郁涵、雲林縣議員周秀月、中華電信雲林營運處總經理張肇家、Potato Media執行長顏宏霖、LINE禮物代表睿鼎數位、12CMTaiwan行銷總監楊涵柔。(圖/由Potato Media提供) 此次Potato Media平台合作內容是店家會員註冊活動：首次註冊可得100積分 + 一顆扭蛋，店家推薦文章介紹，可領取店家消費優惠券，站內扭蛋禮物抽獎活動，獎項豐富：雲林限定禮品、雲林意象限定NFT道具與頭框，雲林幣扭一下APP政令大聲公獎勵活動，另外各種雲林美食伴手禮、住宿旅遊的店家，都可以使用行動支付或上LINE禮物平台實際體驗消費。 推薦評價好的 iphone維修 中心 擁有專業的維修技術團隊，同時聘請資深iphone手機維修專家，現場說明手機問題，快速修理，沒修好不收錢 產品缺大量曝光嗎?你需要的是一流 包裝設計 窩窩觸角包含自媒體、自有平台及其他國家營銷業務等，多角化經營並具有國際觀的永續理念。 雲林縣副縣長謝淑亞強調，此次計畫和Potato Media 合作，Potato Media 是一個在 2021 年 4 月正式發布的「區塊鏈 Web3.0 共享社群平台」，創作者和使用者都可以透過互動的機制，例如對文章點讚、留言與轉發分享，來獲取相對應比例的加密貨幣CFO（Potato Media 平台上的原生加密貨幣），跟Facebook、Instagram、YouTu...
張貼留言
閱讀完整內容

要上網站行銷農產品，得經過市政府抽驗農藥殘留，檢驗合格才能上網行銷

台北網站設計      網頁設計公司     網站設計公司 食安五環為「源頭控管」、「重建生產管理履歷」、「提高查驗能力」、「加重生產者、廠商的責任」及「鼓勵、創造監督平臺」五大要環，除推動政府與市民消費者共同監督食品安全，更要從農場到餐桌，鏈結農村產業線，以網路社群為媒介，建立嘉義市農村網頁平台。活動現場介紹「農抵嘉」產銷網頁平台的內容，包含在地人文地產景，將景觀、產業、生態及文化等資訊整合、展現，更推廣在地農村農友優質、安全的農產品。要上「農抵嘉」網站行銷農產品，得經過市政府抽驗農藥殘留，檢驗合格才能上網行銷自己的農產品，嘉義市農友可以多利用，也提供店家採購管道。 「尚安心，農抵嘉」，透過「農抵嘉」產銷網頁平台，鏈結農村產業線並促進地產地消，從源頭管理食安，讓政府管理、民間參與，透過食安小教育，讓小朋友接觸農作物，與生產者互動，產生共鳴，一同攜手維護嘉義市的食安。記者會中也展示紅瓦厝社區所做的紅瓦窯烤，並有其他下埤花生等農產品，透過農場職人使「農特產品不只是農產品」，民眾可登入「農抵嘉」網頁http://chiayirural.com/index.asp瞭解更進一步的訊息。 網動廣告 參考資料:蕃新聞https://n.yam.com/Article/20171226529712 Orignal From: 要上網站行銷農產品，得經過市政府抽驗農藥殘留，檢驗合格才能上網行銷
張貼留言
閱讀完整內容

IEA：疫情衝擊能源需求 但再生能源呈創紀錄成長_台中搬家公司

※ 台中搬家公司 教你幾個打包小技巧,輕鬆整理裝箱! 還在煩惱搬家費用要多少哪？台中大展搬家線上試算搬家費用，從此不再擔心「物品怎麼計費」、「多少車才能裝完」 摘錄自2020年11月10日中央社報導 國際能源總署（IEA）報告今天（10日）指出，武漢肺炎（COVID-19）疫情可能衝擊能源需求，但電力部門再生能源繼續以創紀錄速度成長。 IEA執行董事比羅爾（Fatih Birol）表示：「在2025年，再生能源將成為全球最大發電來源，預計將提供1/3的全球電力，終結煤炭50年來作為最大電力供應來源的地位。」 ※推薦 台中搬家公司 優質服務,可到府估價 台中搬鋼琴,台中金庫搬運,中部廢棄物處理,南投縣搬家公司,好幫手搬家,西屯區搬家 IEA關於再生能源的年度報告估計，儘管受到疫情干擾，今年的再生能源新發電容量可望創紀錄，達將近200GW（GW為十億瓦）。 能源轉型 國際新聞 再生能源 疫情看氣候與能源 本站聲明:網站內容來源環境資訊中心https://e-info.org.tw/,如有侵權,請聯繫我們,我們將及時處理 ※ 台中搬家公司 教你幾個打包小技巧,輕鬆整理裝箱! 還在煩惱搬家費用要多少哪？台中大展搬家線上試算搬家費用，從此不再擔心「物品怎麼計費」、「多少車才能裝完」 Orignal From: IEA：疫情衝擊能源需求 但再生能源呈創紀錄成長_台中搬家公司
張貼留言
閱讀完整內容