CSS - 盒模型佈局 - margin 陷阱（父子、兄弟）
阿新 • • 發佈：2018-11-11
目錄
margin 陷阱：內聯塊中對於相鄰快的影響
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒模型佈局</title> <style> /*做頁面必備reset操作*/ html, body { margin: 0 } .box, .wrap { width: 200px; height: 200px; background-color: red; } .wrap { background: orange; } /*一般只會影響自身佈局 top、left*/ /*.box { margin-top: 30px; margin-left: 100px; }*/ .box { margin-bottom: 30px; margin-right: 100px; } /*display:顯示方式*/ /*塊:block*/ /*內聯:inline*/ /*內聯塊:inline-block*/ .box, .wrap { display: inline-block; /*vertical-align: top;*/ } </style> </head> <body> <div class="box"></div> <div class="wrap"></div> </body> </html>
margin陷阱 - 兄弟佈局
- margin-bottom影響上下兄弟（儘量別對margin-right進行設定）
- margin-right影響左右兄弟（儘量別對margin-bottom進行設定）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒模型佈局</title> <style> /*做頁面必備reset操作*/ html, body { margin: 0 } /*兄弟坑*/ /*盒模型佈局坑只出現在和margin-top相關的地方*/ .s1, .s2 { /*定義兩個方塊為 100*100，顏色為pink*/ width: 100px; height: 100px; background-color: pink; } /*s1向下擠壓30px，s2向上擠壓50px，結果：取值重疊，取大50px值為空白*/ .s1 { margin-bottom: 30px; } .s2 { margin-top: 50px; } </style> </head> <body> <!-- 兄弟坑 --> <section class="s1"></section> <section class="s2"></section> </body> </html>
margin陷阱 - 父子佈局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒模型佈局</title> <style> /*做頁面必備reset操作*/ html, body { margin: 0 } /*父子坑*/ .sup { /*父親，200*200，藍色*/ width: 200px; height: 200px; background-color: cyan; } .sub { /*兒子，100*100，橘色*/ width: 100px; height: 100px; background-color: orange; } /*父子top重疊,取大值*/ .sup { /*父親下移50px*/ margin-top: 50px; } .sub { /*兒子左移50px，向下150px*/ margin-left: 50px; margin-top: 150px; } </style> </head> <body> <!-- 父子坑 --> <div class="sup"> <div class="sub"></div> </div> </body> </html>
父子 - 解決方法一：固定父親（border-top）
注：需要修改父親原有數值（長寬）
!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒模型佈局</title> <style> /*做頁面必備reset操作*/ html, body { margin: 0 } /*父子坑*/ .sup { /*父親，200*200，藍色*/ width: 200px; height: 200px; background-color: cyan; } .sub { /*兒子，100*100，橘色*/ width: 100px; height: 100px; background-color: orange; } /*父子top重疊,取大值*/ .sup { /*父親下移50px*/ margin-top: 50px; } .sub { /*兒子左移50px，向下150px*/ margin-left: 50px; margin-top: 150px; } /*解決盒模型經典佈局坑*/ /*將父級固定*/ .sup { /*border-top: 1px solid black;*/ border-top: 1px solid transparent; /*保證顯示區域 200*200 */ height: 199px; } .sub { /*修改兒子下移畫素值*/ margin-top: 50px; } </style> </head> <body> <!-- 父子坑 --> <div class="sup"> <div class="sub"></div> </div> </body> </html>
父子 - 解決方法二：使用padding
注意：修改父級原有屬性（寬高），增加padding值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒模型佈局</title> <style> /*做頁面必備reset操作*/ html, body { margin: 0 } /*父子坑*/ .sup { /*父親，200*200，藍色*/ width: 200px; height: 200px; background-color: cyan; } .sub { /*兒子，100*100，橘色*/ width: 100px; height: 100px; background-color: orange; } /*父子top重疊,取大值*/ .sup { /*父親下移50px*/ margin-top: 50px; } .sub { /*兒子左移50px，向下150px*/ margin-left: 50px; /*margin-top: 50px;*/ } /*解決盒模型經典佈局坑*/ /*通過padding*/ .sup { padding-top: 50px; height: 150px; } </style> </head> <body> <!-- 父子坑 --> <div class="sup"> <div class="sub"></div> </div> </body> </html>
