常見的css布局

CastlePeaK 發布于2019-08-02 14:33 / 1787人閱讀

實現兩邊定寬，中間自適應

1.圣杯布局

首先html結構如下




    
    
    
    圣杯布局


    
        2111111111111
        left
        right

css部分

效果如下圖，現在我們要讓left,和right懸浮在middle兩側

我們給middle、left、right都設置float：left,left讓它懸浮在左側設置margin-left:-100%(負的中間元素的寬度),right讓它懸浮在右側設置margin-right:-200px(負的自身的寬度)現在效果如下：

.left{
    margin-left:-100%;
    }
.right{
    margin-left:-200px;
    }
.left,right,.middle{
    float:left;
    }

現在要解決的是中間部分被left遮擋住了

給.content設置padding左右兩邊的.left、.right寬度, .left、.right設置相對定位

.content{
    padding:0 200px;
    }
.left,.right{
    position:relative;
    }
 .left{
    left:-200px;
    }
 .right{
    right:-200px;
    }

這樣可以實現兩邊定寬，中間自適應完整代碼




    
    
    
    圣杯布局
    


    
        2111111111111
        left
        right

效果圖如下:

2.雙飛翼布局

html結構如下


        211111111
        left
        right

css

.middle{
     width: 100%;
    background: paleturquoise;
    height: 200px;
    float: left;
    
}
.middle div{/*就是在middle里面添加div設置margin值實現中間自適應*/
    margin-left: 200px;
    margin-right: 200px;
}
.left{
    background: palevioletred;
    width: 200px;
    height: 200px;
    float: left;
    font-size: 40px;
    color: #fff;
    margin-left:-100%;
}
.right{
    width: 200px;
    height: 200px;
    background: purple;
    font-size: 40px;
    float: left;
    color: #fff;
    margin-left:-200px;
}

完整代碼

圣杯布局，雙飛翼布局的區別

都是兩邊定寬，中間自適應中間部分放在文檔流前面，全部都是設置float:left，區別在于中間部分不被遮擋。雙飛翼布局middle里面添加div設置左右的margin值

彈性盒布局

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

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

前端面試之CSS總結(上)

摘要：重點介紹一下常見的三列布局之圣杯布局和雙飛翼布局。兩種布局方式的不同之處在于如何處理中間主列的位置圣杯布局是利用父容器的左右內邊距定位雙飛翼布局是把主列嵌套在后利用主列的左右外邊距定位。 CSS總結由于最近在準備前端方面的面試，所以對自己平常工作中用到的地方做出一些總結。該篇是CSS部分(上)，有許多地方敘述的并不是十分詳細，只是大致的描述一下，給自己提供一個知識輪廓。本篇中主要描述...

琛ｈ。 2019-08-29 11:18 評論0 收藏0
幾種常見的CSS布局

摘要：本文概要本文將介紹如下幾種常見的布局其中實現三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負可解決，下文會介紹雙飛翼布局特點同樣也是三欄布局，在圣杯布局基礎上進一步優化，解決了圣杯布局錯亂問題，實現了內容與布局的分離。本文概要本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

FuisonDesign 2019-08-23 12:57 評論0 收藏0
幾種常見的CSS布局

摘要：本文概要本文將介紹如下幾種常見的布局其中實現三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負可解決，下文會介紹雙飛翼布局特點同樣也是三欄布局，在圣杯布局基礎上進一步優化，解決了圣杯布局錯亂問題，實現了內容與布局的分離。本文概要本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

andot 2019-08-02 11:58 評論0 收藏0
幾種常見的CSS布局

摘要：本文概要本文將介紹如下幾種常見的布局其中實現三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負可解決，下文會介紹雙飛翼布局特點同樣也是三欄布局，在圣杯布局基礎上進一步優化，解決了圣杯布局錯亂問題，實現了內容與布局的分離。本文概要本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

荊兆峰 2019-08-29 17:13 評論0 收藏0
CSS常見布局與居中

摘要：常用于控制頁面布局的定位機制普通流相對定位絕對定位和固定定位。左右布局最常用的就是通過浮動左浮或右浮來實現浮動。可以通過設置左右的外邊距為值來居中包括圖片。這里，就CSS左右布局，左中右布局，水平與垂直居中，進行討論。 CSS常用于控制頁面布局的定位機制：普通流、相對定位、絕對定位和固定定位。還可以使用float屬性來讓元素浮動。 1.左右布局最常用的就是通過浮動（左浮或右浮）來實...

April 2019-08-30 15:54 評論0 收藏0