布局流程圖

布局流程圖

原則

• 不到萬不得已，不要寫死 width 和 height
• 盡量用高級語法，如 calc、flex
• 如果是 IE，就全部寫死
  把頁面做出來就行

Float布局

• 口訣

1. 給子元素全加style="float:left(right)"
2. 給父元素全加class="clearfix"
3. 在css里寫

.clearfix::after{
    content:'';
    display:block;
    clear:both;
}

• 兼容IE6

.clearfix{
    zoom:1;
}

Flex布局

• 口訣

1. 給父元素加上display:flex;
2. 給父子元素分別加上對應屬性
   布局介紹

• 移動端布局注意點(響應式)

1. 做兩個導航條，一個給pc，一個給mobile
2. 默認手機端導航條不可見(display:none)
3. 用媒體查詢切換，在屏幕寬度為移動端頁面(0~420px)時，就看見手機端導航條，自動隱藏PC的
4. 寫一個js，當用戶點擊菜單欄按鈕時，顯示菜單
5. 自適應寬度"width:auto;"

• 圖片變形怎么辦

1. 不要用<img>標簽

background:transparent url(地址) no-repent center;
background-size:cover;//盡量保證全的顯示圖片

3. 搜索"固定比例 div 技巧"

例子

• 百分比布局

元素名:nth-child(數(shù)值){
    width:30%;
    background-color:red;
}
元素名:nth-child(數(shù)值){
    width:70%;
    background-color:red;
}

• 寬度不寫死

選擇器名{
    width:calc(25% - 8px);
//每行四個元素，每個元素間隔8像素
}