在做banner居中時 碰到的問題，知道可以用背景圖實現居中顯示，但是內心是想深究下的，故找到幾種辦法收集一下，後面兩種真的是奇技淫巧
來著下面兩處
flex
position:absolute + negative margin
background-image + background-size + background-position
4.父元素position:relative，子元素
父子元素都可以不定寬度。translate百分比根據自身高度寬度。只在uc瀏覽器及overflow：hidden疊加時會有問題
5.p元素 和隱藏的img擴充父元素的寬高
<div
class
="m-demo"
>
<
p>
<
img
src=""
class
="hidden"
/>
<
img
src=""
alt=""
/>
p>
div>
<
div
class
="m-demo"
>
<
p>
<
img
src=""
class
="hidden"
/>
<
img
src=""
alt=""
/>
p>
div>
<
div
class
="m-demo"
>
<
p>
<
img
src=""
class
="hidden"
/>
<
img
src=""
alt=""
/>
p>
div>
/*居中溢位隱藏
*/.m-demo.m-demo p.m-demo img.m-demo img.hidden
6.將a設定top: -100%; bottom: -100%; left: -100%; right: -100%;擴充至原來的3倍，然後text-align: center;居中
<div
class
="banner"
>
<
a href
="#"
><
img
src=""
alt=""
/>
a>
div>
<
div
class
="banner"
>
<
a href
="#"
><
img
src=""
alt=""
/>
a>
div>
.banner .banner > a .banner > a:before .banner > a > img
Android不同解析度適配
適配可以分為 layout land 橫屏布局 layout port 豎屏布局 layout 1920x1080 或者layout land 1920x1080 layout port 1920x1080 注 如果適配的布局檔案中，沒有當前機型，當前機型會選擇相差最小的解析度的配置檔案進行適配 l...
網頁不同解析度適配
你大聲的嚷著你的手機解析度就是1920 1080的，這是你攢了足足兩個月的錢後在小公尺官網買的紅公尺手機，絕不可能有假。你寫了乙個寬為 960px 的 div，用手機的瀏覽器橫屏開啟後，你期望這個該死的 div 會和在電腦上的瀏覽器載入出來一樣的效果，只佔螢幕的一半。結果卻讓你納了血悶，明明電腦上解...
適配不同解析度螢幕
如今的螢幕解析度，小至320px iphone 大到2560px甚至更高 大顯示器 變化範圍極大。除了使用傳統的台式電腦，使用者會越來越多的通過手機 上網本 ipad一類的平板裝置來瀏覽頁面。這種情況下，固定寬度的設計方案將會顯得越發不合理。頁面需要有更好的適應性，其布局結構要做到根據不同的裝置及螢...