這部分內容是最近重新複習移動端,做頁面時的筆記,這是發佈的第一篇關於rem佈局實現。內容大致分為頁面實現過程中的重新複習到的不確信內容和未掌握內容，和在頁面實現中出現的問題和解決。 技術選型 方案:採用單頁面設計 技術:rem,媒體查詢,less 設計圖:750px 內容整理： *創建common. ...
這部分內容是最近重新複習移動端,做頁面時的筆記,這是發佈的第一篇關於rem佈局實現。內容大致分為頁面實現過程中的重新複習到的不確信內容和未掌握內容，和在頁面實現中出現的問題和解決。
技術選型
方案:採用單頁面設計
技術:rem,媒體查詢,less
設計圖:750px
內容整理：
*創建common.less是為了供所有頁面使用其中樣式
*在less文件中引入less文件的方法是 在index.less中引入common.less @import 'common'
*@import&link
@import是由css提供，只有在ie5以上才能被識別，引用的css會在頁面載入完後才會載入引用的css；可以將一個樣式文件導入另一個樣式文件里 @import '文件名'
link屬於html標簽，頁面載入的時候會被同時載入，不存在瀏覽器相容問題，引入樣式的權重大於@import，link是把一個樣式文件引入帶html頁面里去
flex
Flex是Flexible Box的縮寫，意為"彈性佈局"，用來為盒狀模型提供最大的靈活性。設為Flex佈局以後，子元素的float、clear和vertical-align屬性將失效。
display:flex;不會讓容器本身取消它的塊裝的屬性，但它的子元素會變成行內塊的的屬性
它之所以被稱為 Flexbox ，是因為它能夠擴展和收縮 flex 容器內的元素，以最大限度地填充可用空間 。與以前佈局方式（如 table 佈局和浮動元素內嵌塊元素）相比，Flexbox 是一個更強大的方式：
- 在不同方向排列元素
- 重新排列元素的顯示順序
- 更改元素的對齊方式
- 動態地將元素裝入容器
input type類型
text,password,密碼框,radio單選框,checkbox覆選框,
button按鈕,file上傳文件,image提交式圖片,submit/reset提交/重置按鈕
outline:點擊input時會出現一圈的藍色邊框
outline:none;去除就不顯示了
因為box-sizing盒子預設為content-box
在input中想要使用padding調整文字顯示的位置時使用padding會變大盒子,影響後面的佈局,所以只有把box-sizing:border-box;寫上去就可以解決這個問題
判斷一部分需不需要設置寬高來適應頁面變化
你直接在沒有任何設置的情況下調整頁面視窗大小,發現內容偏離或者顯示不全,那就是需要設置固定寬高才能適應頁面變化,採用rem控制.
父級邊框塌陷的原因
父級是沒有樣式的div/ul等塊級元素;父級盒子內部只有浮動元素,父級沒有設置高度和寬度
父級盒子中子元素水平排列方法
.ad{
flex方法針對父盒子是一個行內元素,flex方法可以使其中的子元素變成行內塊(觸發BFC這是a沒有塌陷被img子元素撐起來的原因)
display:flex;
a img{
flex:1;
width:100%;
針對這種情況使用以下代碼也可以實現水平排列,但是a這個父元素塌陷,即點擊時沒有跳轉效果,
需要再解決父盒子塌陷的問題,解決方法是給a元素的樣式中添加display:block;再添加寬度高度.
*// float: left;*
// width: 33.3%;
}
}
行內元素轉換為塊級元素的方法
1.直接使用display:block;使元素的屬性改變
2.float；浮動之後檢查computed裡面的元素的display也會發生改變，變為block
3.使用定位：position：fixed（固定定位）/absolute（絕對定位）
4.使用彈性盒，讓父元素變成彈性盒
rem佈局適配方案:
1.less+媒體查詢+rem
2.flexible.js
問題集合：
1.less使用除法的時候不生效的時候，使用括弧可以生效
2.為什麼有寬度有高度有背景顏色但是沒有顯示是?
被後面覆蓋了?因為行內元素裡面沒有寫內容
因為元素是行內元素,不能設置寬高,只有裡面有內容的時候才能顯示出背景顏色
4.設置background:url();屬性插入了背景圖片,這個元素也設置了大小,但是視窗變化得很小的時候背景圖片就看不到了,圖片不能跟著頁面一起變化?
因為元素設置了rem為單位的寬和高,所以它的大小是會隨設置的媒體查詢結果改變,但是背景圖的大小是由bacjground-size設置的,因為沒有設置這個,所以沒能實現一同變化
