Day6 Grid布局

Grid文檔：https://segmentfault.com/a/1190000012889793
總體的布局使用Grid來(lái)實(shí)現(xiàn)
小的布局使用flex來(lái)實(shí)現(xiàn)

body

    display: grid;
    /*1fr意味著刨除690+300px，剩下的寬度兩個(gè)1fr平分*/
    grid:50px auto / 1fr 690px 300px 1fr;  /*用來(lái)替換grid-template-rows和grid-template-columns*/
    grid-column-gap:10px;
    grid-row-gap:10px;

布局套路

float布局：支持IE8
flex布局：不支持IE8，支持手機(jī)

float布局要訣：
1.給兒子加上float
2.給老爸加上clearfix

        .clearfix::after{
            content:'';
            display: block;
            clear: both;
        }/*可以兼容IE8，IE 8以下的不兼容*/
        
        /*如果要兼容IE：*/
        .clearfix{
            zoom:1;
        }/*IE 6*/

注：background和background color的區(qū)別
background 可以設(shè)置 背景顏色、背景圖片、定位等

background-color 只能設(shè)置 背景顏色

?。?！這樣可以防止用戶將頁(yè)面放大的過(guò)大，導(dǎo)致頁(yè)面變形?。?！

        .parent{
            margin-left: auto;
            margin-right: auto;
            min-width:600px;  /*此句代碼*/
        }

快捷鍵：
shift——tab：將整段代碼前移
tab：將整段代碼后移

注：
ad不能作為class名，因?yàn)闀?huì)被廣告屏蔽軟件給屏蔽掉 一般叫做art

手機(jī)布局首先加上meta:vp
meta一定要放在title標(biāo)簽上

.parent .nav2 此時(shí)parent是nav2的爺爺或者太爺爺
.pictures>.xxx 此時(shí)pictures是xxx的父親
只有父子之間才能用>連接導(dǎo)向

圖片不變形的絕世技巧：再也不要使用image標(biāo)簽啦?。?！

width: 圖片寬度;
height:圖片高度;
background: transparent url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1185794949,1562069808&fm=26&gp=0.jpg) no-repeat center;
background-size:cover;

如果實(shí)在是需要保證長(zhǎng)寬固定比例
搜索：固定比例div