CSS - 盒模型 margin的常见需求
目录
需求二：儿子在父亲的水平中央显示（儿内 margin: 0 auto;）
需求四：儿子在父亲的水平居右显示（margin-right：0）
父子场景下
需求一:sup（父亲）左上右顶格显示。即，消除默认8px
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>margin</title> <style type="text/css"> /*需求1:sup（父亲）左上右顶格显示 即，消除默认8px*/ html, body { /*初始化操作，body默认具有margin: 8px*/ margin: 0; } /*前提: sup显示区域宽全屏,高200px,红色。 sub显示区域宽高个100px，橘色。*/ .sup { width: auto; height: 200px; background-color: red; } .sub { width: 100px; height: 100px; background-color: orange; } </style> </head> <body> <div class="sup"> <div class="sub"></div> </div> </body> </html>
需求二：儿子在父亲的水平中央显示（儿内 margin: 0 auto;）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>margin</title> <style type="text/css"> /*需求1:sup（父亲）左上右顶格显示 即，消除默认8px*/ html, body { /*初始化操作，body默认具有margin: 8px*/ margin: 0; } /*前提: sup显示区域宽全屏,高200px,红色。 sub显示区域宽高个100px，橘色。*/ .sup { width: auto; height: 200px; background-color: red; } .sub { width: 100px; height: 100px; background-color: orange; } /*需求2:儿子在父亲的水平中央显示*/ /*只适用于文字居中*/ .sup { /*父亲设置文字居中，儿子默认继承*/ /*text-align: center;*/ } .sub { /*上下0,左右auto*/ /*auto:左右auto,自适应(平方)剩余可布局空间 和父亲是否自适应浏览器宽度无关*/ margin: 0 auto; } </style> </head> <body> <!-- <div class="sup"> 父亲内文字 <div class="sub">儿子内文字</div> </div> --> <div class="sup"> <div class="sub"></div> </div> </body> </html>
需求三：儿子在父亲的垂直中央显示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>margin</title> <style type="text/css"> /*需求1:sup（父亲）左上右顶格显示 即，消除默认8px*/ html, body { /*初始化操作，body默认具有margin: 8px*/ margin: 0; } /*前提: sup显示区域宽全屏,高200px,红色。 sub显示区域宽高个100px，橘色。*/ .sup { width: auto; height: 200px; background-color: red; } .sub { width: 100px; height: 100px; background-color: orange; } /*需求2:儿子在父亲的水平中央显示*/ /*只适用于文字居中*/ .sup { /*父亲设置文字居中，儿子默认继承*/ /*text-align: center;*/ } .sub { /*上下0,左右auto*/ /*auto:左右auto,自适应(平方)剩余可布局空间 和父亲是否自适应浏览器宽度无关*/ margin: 0 auto; } /*需求3:sub在sup的垂直中央显示*/ /*错误的居中方式*/ /*.sub {margin: auto ;}*/ /*垂直会遇到margin父子坑*/ .sup { /*padding 方法解决*/ height: 100px; padding: 50px 0; } /*.sup { height: 100px; border-top: 50px solid red; border-bottom: 50px solid red; }*/ /*需求4:sub在sup的水平居右显示*/ .sub { /*不提前设置margin: 0 auto; 左右为0*/ /*则，单独左边为auto，右边为0*/ /*margin-left: auto; */ /*手动设置右边为0*/ /*margin-right: 0;*/ /*margin-right: 10px;*/ } </style> </head> <body> <!-- <div class="sup"> 父亲内文字 <div class="sub">儿子内文字</div> </div> --> <div class="sup"> <div class="sub"></div> </div> </body> </html>
需求四：儿子在父亲的水平居右显示（margin-right：0）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>margin</title> <style type="text/css"> /*需求1:sup（父亲）左上右顶格显示 即，消除默认8px*/ html, body { /*初始化操作，body默认具有margin: 8px*/ margin: 0; } /*前提: sup显示区域宽全屏,高200px,红色。 sub显示区域宽高个100px，橘色。*/ .sup { width: auto; height: 200px; background-color: red; } .sub { width: 100px; height: 100px; background-color: orange; } /*需求2:儿子在父亲的水平中央显示*/ /*只适用于文字居中*/ .sup { /*父亲设置文字居中，儿子默认继承*/ /*text-align: center;*/ } .sub { /*上下0,左右auto*/ /*auto:左右auto,自适应(平方)剩余可布局空间 和父亲是否自适应浏览器宽度无关*/ margin: 0 auto; } /*需求3:sub在sup的垂直中央显示*/ /*错误的居中方式*/ /*.sub {margin: auto ;}*/ /*垂直会遇到margin父子坑*/ .sup { /*padding 方法解决*/ height: 100px; padding: 50px 0; } /*.sup { height: 100px; border-top: 50px solid red; border-bottom: 50px solid red; }*/ /*需求4:sub在sup的水平居右显示*/ .sub { /*不提前设置margin: 0 auto; 左右为0*/ /*则，单独左边为auto，右边为0*/ /*margin-left: auto; */ /*手动设置右边为0*/ margin-right: 0; /*margin-right: 10px;*/ } </style> </head> <body> <!-- <div class="sup"> 父亲内文字 <div class="sub">儿子内文字</div> </div> --> <div class="sup"> <div class="sub"></div> </div> </body> </html>