html day12 第15集

 

 

安裝服務器，

 

適口爲980px是所有移動手機開發商商量出來的，在移動端放一個比較大的虛擬空間，讓pc端頁面（如原width爲1180的頁面）等比例縮小到980的虛擬空間；

屏幕480px，虛擬空間980px，把980的虛擬空間縮小放在480的屏幕裏了

自定義視口大小580，而不是980；

width=device-width適口寬度等於設備大小；initial-scale=1.0：頁面一比一按實際尺寸顯示在屏幕裏面；

處理兼容，若是不兼容，則使用最新的ie核來打開

適口height一般不設置

適口（看到頁面尺寸的範圍）

指頁面的縮放級別，實際上是適口放大了一倍，頁面縮小一倍

說的是pad

div高爲100；有的瀏覽器（谷歌）支持最小的font-size爲12px

一般html的font-size設太大了，還要在body上設置正常值

width：1vm表示寬度爲視框寬度的100分之一；

只需要記住以下幾個：

寬度在700以內，則重設置背景顏色；

媒體類型必須是sereen，條件必須是寬度大於等於500時，執行代碼

邏輯操作符前後要有空格

,前後只要有一個爲真就執行

not有一個條件爲假則爲真

not只能作用在第一個上，管不到後面的

若瀏覽器支持only，則寫不寫only都一樣，但若瀏覽器不支持only，則這段代碼都不會執行；對有些遊覽器，他們不知別only，但其他的媒體標籤都識別

在引入樣式時，就能對媒體進行判斷

彈性網格佈局：flex；彈性圖片：改了寬時，高度不會自動適應寬高比

在移動端，padding和margin一般都算在寬度裏面的；

中間的盒子希望高度自適應，對中間盒子的父元素設置flex；

父元素是flex盒子，子元素會並列顯示，若希望上下顯示，則設置主軸方向爲列

將父元素多餘空間分成了幾分，section佔幾份，flex寫1表示佔一份，若其他元素沒有設置flex，則表示父元素多餘的空間分成了一份，都給了 section.

要對父元素設置高度，不然分配多餘空間不成功，讓瀏覽器得到瀏覽器的高度，讓body得到父級元素的高度

錯了，是font:14px "微軟雅黑"

將父級元素多餘空間分成三份，子元素各佔一份

對兩個塊狀元素讓他們並列顯示，還一左一右，設置成彈性盒子，就在一行了，再設置justify-content

爲什麼圖字標（也是圖）與賬單沒對齊，因爲圖外面有一層，他與文本基線對齊了；解決方法：對父級元素設置成彈性盒子，子元素就可以並列對齊；二：對子元素圖和文字都設置vertical-align：middle；（元素類型爲行內塊元素）表示它與文字之間中間對齊；但圖片和文字都是行內元素，之間會有默認的間隙（他們就是用字體實現的，所以可以用line-height）

實現效果一樣

把a彈性盒子就可以轉換成塊級元素

<i>是行內塊元素，在換行時，會出現空格；本文中，所得圖標籤用i，字用span

子元素在超過父元素時，子元素會默認等比例縮小；

s'p求當前html的font-size，根據瀏覽器寬度改變html的font-size值

用媒體查詢

display:flex會將行內元素變成塊

;align-items:center;在側軸水平居中，側軸由flex-direction決定

還必須設置a的高度，不然無法垂直居中；

設置完display:flex後，給你對當前元素或子元素設置彈性盒子其他性能

space-around

 

這裏的header是繼承瀏覽器高度，width:100%;但padding會撐大寬度，超過瀏覽器的寬度了，會出錯，，，得加上box-sizing:border-box;

若不設置type，在不同瀏覽器會有不同的默認type；得指明type

父級元素是彈性盒子，裏面有圖片，只對圖片設置了寬度，圖片不會自適應高度

解決方法：在每個圖片上再套一層，只要該層不是彈性盒子，再設置圖片寬度就會自適應高度

當上下左右框都有陰影時，，在原本陰影的基礎上擴大了5px的模糊效果

旋轉之後，改變了x軸和y軸方向了；最好先位移，再旋轉

給的值大於1時，會放大（從中間像兩邊）；給的值大於0小於1時，會縮小（從中間像兩邊）；若給的值是負值-1，會翻轉一圈；-2翻轉一圈再變大；-0.5反轉一圈再縮小

單位爲deg

沿x軸傾斜，高度不變，水平方向拉伸；90deg後就拉平了；給正值，左上右下是拉伸；給負值，右上左下是拉伸

沿y軸傾斜，寬度不變，垂直方向拉伸；

用它生成，複製

不能對display設置過度

 

to left表示從右往左

left：從左往右

to可以省略；（都有）

 

1.眼睛距離電影屏幕的位置，越近越明顯，寫0無效果；一般設在父級元素上，一般設置值1000~2000px；此時向前走，變大了；

第三個數只支持一個數

讓當前塊在他的包含快垂直居中