css布局【實用】

fox_soyoung 發布于2019-08-02 14:27 / 1238人閱讀

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

布局

.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 】

兩版固定寬度中間自適應全部自適應寬度可以都寫成 flex: 1; （數值自行調整）

.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%);
}

水平、垂直居中【 減 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;
}

水平、垂直居中【 flexBox 】

.box{
    width: 200px;
    height: 200px;
    background: palevioletred;
    /* 【重點】 */
    display: flex;
    justify-content: center;
    align-items:center;

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

GPU云服務器云服務器 css布局 css布局教程學習css布局漂亮實用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53817.html

利用HTML和CSS實現常見的布局

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

daydream 2019-08-28 18:21 評論0 收藏0
利用HTML和CSS實現常見的布局

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

bbbbbb 2019-08-01 14:53 評論0 收藏0
css實現居中、自適應

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

陸斌 2019-08-29 16:15 評論0 收藏0
css布局【實用】

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

zzzmh 2019-08-30 15:56 評論0 收藏0