Web前端开发——div标签父层与子层大小关系
1. div标签未定义父层大小时父层自适应子层大小 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin:0; } #main{ } #content1{ width:170px; height:190px; background-color:red; } #content2{ background-color:green; width:170px; height:190px; } </style> </head> <body> <div id="main"> 这是父层 <div id="content1">这是子层1</div> <div id="content2">这是子层2</div> </div> </body> </html> 可以看到未设置main样式的，父容器的大小会自动根据设置好大小的子容器来设定 2. div标签定义父层大小且子层大小超出父层大小时 <style> *{ padding: 0; margin:0; } #main{ width:170px; height:190px; margin: 50px auto; background-color: yellow; }