css和css的圣杯布局,CSS布局--圣杯布局和双飞翼布局以及使用Flex实现圣杯布局
前言
我曾一度覺得總寫css的前端很low，有了這種思想以后我便遠離網頁布局，H5的工作更不想接，沉迷于頁面邏輯和封裝組件。直到最近我面試，面試官說我css3理解的不熟，我起初很不屑，但后來靜下來反省了一下并不是我不熟，只是我開始瞧不上網頁制作這種工作了，問我css問題時，我感覺就像是再問一個老粉刷匠這片墻面要從哪里刷起，從哪里刷不行 ？這有什么決定性的問題嗎 ？
說的有點多，其實寫這邊文章的主要目的還是想告訴自己，不要瞧不起某一門技術，技術有高低，但不代表學css的人的技術就要比學js的智商低，術業有專攻，心態要自己掌握，不要受外界的影響。
圣杯布局&雙飛翼布局
所謂圣杯布局和雙飛翼布局其實解決的問題是相同的，都是解決左右兩欄固定寬度，中間部分自適應，其中某部分內容比其他內容高的時候，保證三者元素等高。
他倆的區別就是：圣杯用padding。雙飛翼用在main外層多加了一個div然后改用margin。
圣杯布局
以下面html為例：
mainleftright1.main、left、right全部左浮動，在設置一個position：relative稍后會用到。
2.main的寬度設置為100%。left和right固定寬度(假設100px)。
3.此時main自己沾滿了一行，所以給left拽上來設置marginleft：100%，此時left雖然上來了但是是覆蓋在main上面的。
4.給content設置padding-left等于left的寬，此時左邊有100px的空白，main和left都被擠過來了，要想還原，將left向左在移動100px就行了。
5.此時就剩下right在下面，同理margin-right：-100%就上去了。
css代碼：
* {
box-sizing: border-box;
}
.content {
overflow: hidden;
padding-left: 100px;
padding-right: 100px;
}
.content > div {
float: left;
position: relative;
}
.main {
width: 100%;
height:100px;
border:1px solid red;
}
.left {
width:100px;
margin-left: -100px;
right:100%;
height:100px;
border:1px solid #000;
}
.right {
width:100px;
margin-right: -100px;
height:100px;
border:1px solid #000;
}
雙飛翼布局
雙飛翼布局的html：
mainleftright對比一下css的區別：多了一個.main-inner，少了一些相對定位。
* {
box-sizing: border-box;
}
.main-inner {
margin-left:100px;
margin-right: 100px;
}
.content {
overflow: hidden;
/* padding-left: 100px;
padding-right: 100px; */
}
.content > div {
float: left;
/* position: relative; */
}
.main {
width: 100%;
height:100px;
border:1px solid red;
}
.left {
width:100px;
margin-left: -100%;
/* right:100px; */
height:100px;
border:1px solid #000;
}
.right {
width:100px;
/* margin-right: -100px; */
margin-left: -100px;
height:100px;
border:1px solid #000;
}
Flex布局
相比較兩者，Flex布局就好理解得多
html和圣杯布局一樣
css：
* {
box-sizing: border-box;
}
.content {
overflow: hidden;
display:flex;
flex:1
}
.main {
flex:1;
height:100px;
border:1px solid red;
}
.left {
flex:0 0 100px;
order:-1;
height:100px;
border:1px solid #000;
}
.right {
flex:0 0 100px;
height:100px;
border:1px solid #000;
}
未完待續...
總結
以上是生活随笔為你收集整理的css和css的圣杯布局,CSS布局--圣杯布局和双飞翼布局以及使用Flex实现圣杯布局的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [云炬创业基础笔记]第五章创业机会评估测
- 下一篇： html伪元素before占用高度,CS