前幾天我在面試前端開發同學的時候，有問到關于margin基礎布局相關內容的程序中，發現很多同學基本解釋不清楚，今天剛好有點時間就整理了一篇筆記出來，就以下5點在CSS布局經常會用到的經典布局解決方案，
- css中margin外邊距（重疊）合并現象
- css中margin外邊距穿透現象
- css中margin設定負值時的特性
- css經典3列自適應布局：圣杯布局
- css經典3列自適應布局：雙飛翼布局
可以嘗試動手試一試，有什么疑問 ！可隨時交流，有問必答 ，
margin 縱向重疊（合并）問題
元素垂直排列時，第一個元素的下外邊距與第二個元素的上外邊距會發生合并，合并后的間距就是兩者中最大的那個值，
1、以下代碼中，item1與item4之間的間距是多少？
<style>
.box{
margin-top:10px;/*上外邊距*/
margin-bottom:20px;/*下外邊距*/
height: 20px;
background-color:skyblue;
}
</style>
<body>
<div class="box">item1</div>
<div class="box"></div>
<div class="box"></div>
<div class="box">item4</div>
</body>答案：
決議：item1 與 item4 之間的間距為 3個下外邊距大小+2個盒子高度=20*3+20*2=100px
2、以下代碼中，item1與item4之間的間距是多少 ？
<style>
.box{
margin-top:10px;
margin-bottom:20px;
background-color:skyblue;
}
</style>
<body>
<div class="box">item1</div>
<div class="box"></div>
<div class="box"></div>
<div class="box">item4</div>
</body>答案： item1與item4之間間距為 20px
決議：因為中間兩個box中沒有內容也沒有邊框線，所以外邊距會一直重疊合并，所以最后item1和item4之間距離只有一個下外邊距的大小
3、以下代碼中 container 、 item 、box與瀏覽器頂部的間距是多少 ？
margin 穿透問題
當一個元素包含在另一個元素中時,如果父元素沒有設定內邊距或邊框把外邊距分隔開，它們的上或下外邊距也會發生合并，
<style>
body{
margin:0;
padding:0;
}
.container{
width:300px;
height: 300px;
background-color: salmon;
margin-top:100px;/*與瀏覽器頂部的距離*/
border:5px solid blue;
}
.container .item{
width:200px;
height: 200px;
background-color: skyblue;
margin-top:50px;/*因為container中加了border邊框，所以這里的外邊距不會穿透合并*/
}
.container .item .box{
width:100px;
height: 100px;
background-color: bisque;
margin-top:10px;/*item沒有加邊框線，內邊距和其它內容，所以外邊距會發生穿透合并*/
border:5px solid red;
}
</style>
<body>
<div class="container">
<div class="item">
<div class="box"></div>
</div>
</div>
</body>
答案： 100px 、155px、155px
決議：
.container與瀏覽器頂部距離是100px，
.item與瀏覽器頂部距離100px + 5px+50px=155px
.box與瀏覽器頂部距離：100px+5px+50px=155px
margin負值問題
margin-left 設定負值，元素向左移動
margin-right 設定負值，自身不受影響，右邊元素向左移動
margin-top設定負值，元素向上移動
margin-bottom 設定負值，自身不受影響，下方元素向上移動
1、 兩元素水平排列，左右外邊距設定負值時
<style>
body{
margin:0;
}
.container{
width:500px;
height:200px;
padding:20px 0px;
border:5px solid #ddd;
margin:0px auto;
}
.container .common{
width:200px;
height: 200px;
float: left;
}
.container .box1{
background-color: skyblue;
/* margin-left:-100px; 元素自身向左移動，右邊的元素也會受影響*/
margin-right:-100px;/*元素自身不受影響，右邊元素向左移動*/
}
.container .box2{
background-color: tomato;
}
</style>
<body>
<div class="container">
<div class="box1 common"></div>
<div class="box2 common"></div>
</div>
</body>
當.container .box1中margin-left:-100px;時，如：圖1
當.container .box1中 margin-right:-100px;時，如：圖2
當.container .box1設定margin-left:-100px;和margin-right:-100px時，如：圖3
2、兩元素垂直排列，上下外邊距設定負值時
<style>
body{
margin:0;
}
.container{
height: 500px;
width: 200px;
padding:0px 20px;
border:5px solid #ddd;
margin-top:100px;
}
.container .common{
width:200px;
height: 200px;
}
.container .box1{
background-color: skyblue;
/*margin-top:-100px;元素向上移動，下方元素也會受影響*/
margin-bottom:-100px;/*自身不受影響，下方元素向上移動*/
}
.container .box2{
background-color: rgba(0,0,255,0.5);
}
</style>
<body>
<div class="container">
<div class="box1 common"></div>
<div class="box2 common"></div>
</div>
</body>
當.container .box1中margin-top:-100px時，如：圖 1
當.container .box1中margin-bottom:-100px時，如：圖 2
當.container .box1中同時設定margin-top:-100px; 和margin-bottom:-100px;時，如：圖 3
3、經典布局：圣杯布局
這種布局的優點：
中間一欄內容最重要，最先加載和渲染，同時對搜索引擎優化最利，
兩邊內容固定，中間內容自適應
<style>
body{
margin:0;
/*核心代碼*/
min-width: 650px;/*當頁面寬度不夠時，出現滾動條而不會造成布局錯亂*/
}
.clearfix::after{
display: block;
content: "";
clear: both;
}
.fl{/*核心代碼*/
float:left;/*三個盒子一定要添加浮動*/
}
.header{
height: 100px;
background-color: tomato;
}
.container{
padding-left:200px;/*左邊預留200px位置 用來放left*/
padding-right:250px;/*右邊預留200px位置 用來放right*/
}
.container .center{
width:100%;/*自適應container的寬度，實作自適應縮放*/
height: 500px;
background-color: skyblue;
}
.container .left{
width:200px;
height: 500px;
background-color:cadetblue;
/*核心代碼*/
margin-left:-100%;/*盒子向左移，因為加了浮動，所以會移動到上一行的最左邊*/
position: relative;/*利用相對定位，再把盒子往左移200px就占據了最左邊預留的200px空間*/
left:-200px;
}
.container .right{
width:250px;
height: 500px;
background-color:aquamarine;
/*核心代碼*/
margin-right:-250px;/*加上這個代碼，相當于right沒有一點寬度，就會移動到上的最右邊位置*/
}
.footer{
height: 100px;
background-color: #000;
}
</style>
<body>
<div class="header">頭部</div>
<div class="container clearfix">
<div class="center fl">中間</div>
<div class="left fl">左邊</div>
<div class="right fl">右邊</div>
</div>
<div class="footer">底部</div>
</body>4、經典布局：雙飛翼布局
這種布局的優點：
中間一欄內容最重要，最先加載和渲染，同時對搜索引擎優化最利，
兩邊內容固定，中間內容自適應
<style>
body{
margin:0;
}
.fl{/*核心代碼*/
float: left;/*一定要添加浮動*/
}
.main{
background-color: #ddd;
width:100%;
}
.main .main-content{
background-color: skyblue;
height: 300px;
/*核心代碼*/
margin:0 200px 0 200px;/*盒子左右兩邊余留200px，分別給left和right來占用*/
}
.left{
width: 200px;
height: 300px;
background-color: coral;
/*核心代碼*/
margin-left:-100%;/*往左移動瀏覽器的寬度，最后移動到上一行的最左邊*/
}
.right{
width: 200px;
height: 300px;
background-color: tomato;
/*核心代碼*/
margin-left:-200px;/*相當于自身寬度為0了，因為加了浮動，然后就顯示在了上一行的最右邊*/
}
</style>
<body>
<div class="main fl">
<div class="main-content">中間</div>
</div>
<div class="left fl">左邊</div>
<div class="right fl">右邊</div>
</body>為幫助到一部分同學不走彎路，真正達到一線互聯網大廠前端專案研發要求，首次實力寵粉，打造了《30天挑戰學習計劃》，內容如下：
HTML/HTML5，CSS/CSS3，JavaScript，真實企業專案開發，云服務器部署上線，從入門到精通
- PC端專案開發（1個）
- 移動WebApp開發（2個）
- 多端回應式開發（1個）
共4大完整的專案開發 ！一行一行代碼帶領實踐開發，實際企業開發怎么做我們就是怎么做，從學習一開始就進入作業狀態，省得浪費時間，
從學習一開始就同步使用 Git 進行專案代碼的版本的管理，Markdown 記錄學習筆記，包括真實大廠專案的開發標準和設計規范，命名規范，專案代碼規范，SEO優化規范
從藍湖UI設計稿 到 PC端，移動端，多端回應式開發專案開發
- 真機除錯，云服務部署上線；
- Linux環境下 的 Nginx 部署，Nginx 性能優化；
- Gzip 壓縮，HTTPS 加密協議，域名服務器備案，決議；
- 企業專案域名跳轉的終極解決方案，多網站、多系統部署；
- 使用 使用 Git 在線專案部署；
這些內容在《30天挑戰學習計劃》中每一個細節都有講到，包含視頻+圖文教程+專案資料素材等，只為實力寵粉，真正一次掌握企業專案開發必備技能，不走彎路 ！
程序中【不涉及】任何費用和利益，非誠勿擾 ，
如果你沒有添加助理老師微信，可以添加下方微信，說明要參加30天挑戰學習計劃，來自頭條號！老師會邀請你進入學習，并給你發放相關資料
30 天挑戰學習計劃 Web 前端從入門到實戰 | arry老師的博客-艾編程
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/539468.html
標籤：Html/Css
上一篇：ArcGIS插件-太樂地圖
下一篇：博客園雪花特效