這部分內容是最近重新復習移動端,做頁面時的筆記,這是發布的第一篇關于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設定的,因為沒有設定這個,所以沒能實作一同變化
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/525049.html
標籤：其他