乙個200*200的div在不同解析度螢幕上下左右居中，用css實現；
利用負值來實現居中。可以腦補畫面離左右都是50%，剛好可以居中，但是div位置在**，距左右外邊框各負50%寬度。
body
#div1
html
html,body
h3.left
.right
.middle
1、父級div定義偽類：after和zoom
left
right
div2
left
right
div2
優點：簡單，**少，瀏覽器支援好，不容易出現怪問題
缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不爽
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法
3.父級div定義height
left
right
div2
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題
優點：簡單，**少，容易掌握
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題
建議：不推薦使用，只建議高度固定的布局時使用
4.父級div定義overflow:hidden
left
right
div2
優點：簡單，**少，瀏覽器支援好
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏
建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用
5.父級div定義overflow:auto
left
right
div2
優點：簡單，**少，瀏覽器支援好
缺點：內部寬高超過父級div時，會出現滾動條。
建議：不推薦使用，如果你需要出現滾動條或者確保你的**不會出現滾動條就使用吧。
6.父級div也一起浮動
left
right
div2
left
right
div2
left
right
div2
前端開發面試題
基礎題 1.談一談你對bootstrap的柵格布局的理解。2.談一談你對mvvm的理解。3.es6的展開運算子有使用過嗎？有什麼用處？4.let和var const的區別是什麼？5.最近有了解前端的發展嗎？有沒有學習什麼最新的前端技術？6.sessionstorage localstorage和co...
前端開發面試題 htmlcss篇
1.1 標準盒模型 預設值 1.2 怪異盒模型 ie瀏覽器預設的盒子模型 1.3 彈性盒模型 flex布局 2.1 相鄰塊元素垂直外邊距合併 2.2 巢狀塊元素垂直外邊距塌陷和合併 2.3 解決方案 div before3.1 有三種3.2 link和 import有什麼區別4.1 引擎的區別 瀏覽...
前端面試題 2023年web前端開發面試題
本文章作為2021屆應屆畢業生在實習面試期間所接受的前端面試的面試題。css盒子模型的要素，css中常用偽元素選擇符 position屬性四個值 static fixed absolute和relative的區別和用法 解釋css樣式中display中inline block inline bloc...