成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css布局【實用】

zzzmh / 1528人閱讀

摘要：布局只截圖了一半左右布局注釋以下全是重點清除浮動重點重點重點左中右布局兩版固定寬度中間自適應(yīng)全部自適應(yīng)寬度可以都寫成數(shù)值自行調(diào)整重點重點如果均分這個可以改為重點重點如果均分這個可以改為水平居中重點以下效果都一樣以下效果都一樣以下

布局 




    

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

    


.banner{ 
    width: 800px;
    height: 200px;
    margin:0 auto;
    background: #0c5460;
}

.box{ width: 800px; margin: 0 auto}
.box .xxx{
    display:flex;
    flex-wrap:wrap;
    margin: 0 -3px;
}

.xxx div{
    width: calc( 25% - 6px );
    height: 80px;
    background: #b1dfbb;
    margin: 3px;
}

banner 只截圖了一半

左右布局
/* 注釋以下全是重點  */
.bigBox::after{
    /* 清除浮動【重點】 */
    content:"";
    display: block;
    clear:both;
}
.box1{
    width: 50%;
    background: palegreen;
    /* 【重點】 */
    float: left;
}
.box2{
    width: 50%;
    background: paleturquoise;
    /* 【重點】 */
    float: left;
}

    
box1

    
box2



左中右布局【 flex 】

兩版固定寬度 中間自適應(yīng) 全部自適應(yīng) 寬度可以都寫成 flex: 1; （數(shù)值自行調(diào)整）

.box{
    height:50px;
    /* 【重點】 */
    display: flex
}
.left{
    background-color: #b1dfbb;
    /* 【重點】 */
    width: 300px; /* 如果均分 這個可以改為 flex: 1; */
}
.center{
    background-color: yellowgreen;
    /* 【重點】 */
    flex: 1;
}
.right{
    background-color: #b1dfbb;
    /* 【重點】 */
    width: 300px; /* 如果均分 這個可以改為 flex: 1; */
}


    
left

    
center

    
right



水平居中
.box{
    width: 200px;
    height: 200px;
    background: aquamarine;
    /* 【重點】 */
    margin: 0 auto;
}
box

以下效果都一樣 以下效果都一樣 以下效果都一樣 以下效果都一樣 以下效果都一樣 以下效果都一樣

水平、垂直居中【 translate 】
.box{
    width: 200px;
    height: 200px;
    background: palevioletred;
    /* 【重點】 */
    position: relative;

}
.box span{
    background: aquamarine;
    width: 100px;
    height: 150px;
    /* 【重點】 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

    123


水平、垂直居中【 減 margin】
*{
    padding:0;
    margin: 0;
}
.box{
    width: 200px;
    height: 200px;
    background: palevioletred;
    /* 【重點】 */
    position: relative;

}
.box span{
    background: aquamarine;
    width: 100px;
    height: 150px;
    /* 【重點】 */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px;
    margin-left: -50px;
}

    123


水平、垂直居中【 flexBox 】
.box{
    width: 200px;
    height: 200px;
    background: palevioletred;
    /* 【重點】 */
    display: flex;
    justify-content: center;
    align-items:center;

}
.box span{
    background: aquamarine;
    width: 100px;
    height: 150px;
}

    123

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117491.html

相關(guān)文章

  • 利用HTML和CSS實現(xiàn)常見的布局

    摘要：中的有些元素也是這樣，他們有的只對牛奶感興趣，有的只喜歡吃堅果和果凍，而討厭牛奶。我稱之為果凍依賴型元素，又稱之為依賴型元素，也就是說只有一個元素屬于或是也可以理解為水平水平，其身上的屬性才會起作用。 單列布局 水平居中 水平居中的頁面布局中最為常見的一種布局形式，多出現(xiàn)于標(biāo)題，以及內(nèi)容區(qū)域的組織形式，下面介紹四種實現(xiàn)水平居中的方法（注：下面各個實例中實現(xiàn)的是child元素的對齊操作，...

    daydream 評論0 收藏0

  • 利用HTML和CSS實現(xiàn)常見的布局

    摘要：中的有些元素也是這樣，他們有的只對牛奶感興趣，有的只喜歡吃堅果和果凍，而討厭牛奶。我稱之為果凍依賴型元素，又稱之為依賴型元素，也就是說只有一個元素屬于或是也可以理解為水平水平，其身上的屬性才會起作用。 單列布局 水平居中 水平居中的頁面布局中最為常見的一種布局形式，多出現(xiàn)于標(biāo)題，以及內(nèi)容區(qū)域的組織形式，下面介紹四種實現(xiàn)水平居中的方法（注：下面各個實例中實現(xiàn)的是child元素的對齊操作，...

    bbbbbb 評論0 收藏0

  • css實現(xiàn)居中、自適應(yīng)

    摘要：中的有些元素也是這樣，他們有的只對牛奶感興趣，有的只喜歡吃堅果和果凍，而討厭牛奶。我稱之為果凍依賴型元素，又稱之為依賴型元素，也就是說只有一個元素屬于或是也可以理解為水平水平，其身上的屬性才會起作用。 單列布局水平居中 水平居中的頁面布局中最為常見的一種布局形式，多出現(xiàn)于標(biāo)題，以及內(nèi)容區(qū)域的組織形式，下面介紹四種實現(xiàn)水平居中的方法（注：下面各個實例中實現(xiàn)的是child元素的對齊操作，c...

    陸斌 評論0 收藏0

  • css布局【實用】

    摘要：布局只截圖了一半左右布局注釋以下全是重點清除浮動重點重點重點左中右布局兩版固定寬度中間自適應(yīng)全部自適應(yīng)寬度可以都寫成數(shù)值自行調(diào)整重點重點如果均分這個可以改為重點重點如果均分這個可以改為水平居中重點以下效果都一樣以下效果都一樣以下 布局 ...

    fox_soyoung 評論0 收藏0

發(fā)表評論

0條評論

zzzmh

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<