CSS布局總結(二)
阿新 • • 發佈:2018-11-28
spa containe 今天 borde 20px clas ren contain color
前言:今天實訓課依舊很水,繼續總結,今天主要補了一下布局的知識。響應式的作業還沒做完...
一、兩列布局
html部分
<div class="parent"> <div class="left">left</div> <div class="right"> <p>right</p> <p>right</p> <p>right</p> <p>right</p> <p>right</p> </div> </div>
總體樣式(為啥粘上去這麽亂的...)
div{ border:1px solid #444; } .parent{ background-color: #eee; } .left{ background-color: yellow; } .right{ background-color: pink; }
- 一列定寬,另一列自適應,兩列的高度不會同時增加
.left{ float: left; width:100px; } .right{ margin-left:120px; }
.parent{ position: relative; } .left{ position: absolute; width:100px; } .right{ margin-left: 100px; }
- 其中一列定寬或者不定寬都可以,另一列自適應,兩列的高度不會同時增加
.left{ float: left; margin-right:20px; } .right{ overflow: hidden; }
- 表格布局,父元素為table,子元素為table-cell,可以同時增加高度,如果不設置寬度,兩者寬度相等
.parent{ display: table; width:100%; } .left,.right{ display: table-cell; } .left{ width:100px; }
- flex 兩邊高度會同時增加
.parent{ display: flex; } .left{ width: 100px; } .right{ flex: 1; }
- 表格布局,高度會同時增加
.parent{ display: grid; grid-template-columns: 1fr 1fr; }
二、三列布局
這裏主要記錄兩個經典布局
主要樣式
div{ border:1px solid #ccc; box-sizing: border-box; } .middle{ background-color:#eee; } .content{ background-color: purple; } .left{ background-color: yellow; } .right{ background-color: pink; }
- 雙飛翼布局
<div class="container"> <div class="middle"> <div class="content"> <p>content</p> <p>content</p> <p>content</p> <p>content</p> <p>content</p> </div> </div> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> <p>right</p> </div> </div>
<!--1. 註意div的順序 -->
<!--2. .middle設置width:100%; .middle,.left,.right都為float:left,此時它們將分別占據1、2、2 行 -->
<!--3. 為了讓.left回到第一行的最左邊,則需要設置margin-left:-100%; 為了讓.right回到第一行的末尾,則需要設置margin-right:-自身的寬度 -->
<!--4. 此時三者在同一行,但是middle的內容會被遮擋住,故此時應該設置middle裏面的content內容,則content設置:margin:0 right的寬度 0 left的寬度 -->
<!--p.s. 三列布局不等高 -->
.container{ width:100%; } .middle{ float: left; width:100%; } .left{ width:200px; float: left; margin-left: -100%; } .right{ width:300px; float: left; margin-left: -300px; } .content{ margin: 0 300px 0 200px; }
- 聖杯布局
<div class="container"> <div class="middle"> <p>content</p> <p>content</p> <p>content</p> <p>content</p> <p>content</p> </div> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> <p>right</p> </div> </div> <!--p.s. 一開始跟雙飛翼布局有點像 --> <!--1. 註意div的順序 --> <!--2. .middle設置width:100%; .middle,.left,.right都為float:left,此時它們將分別占據1、2、2 行 --> <!--3. 為了讓.left回到第一行的最左邊,則需要設置margin-left:-100%; 為了讓.right回到第一行的末尾,則需要設置margin-right:-自身的寬度 --> <!--4. 由於middle的內容被遮擋,此時是 設置container的padding:0 right的寬度 0 left的寬度--> <!--5 此時內部直接往中間縮,則需要這是.left{position:relative;left:-自身的寬度;} .right{position:relative;right:-自身的寬度;-->
.container{ width:100%; padding:0 300px 0 200px; background-color: #7e7e7e; } .middle{ float: left; width:100%; } .left{ width:200px; float: left; margin-left: -100%; position: relative; left:-200px; } .right{ width:300px; float: left; margin-left: -300px; position: relative; right:-300px; }
CSS布局總結(二)