css布局註意事項
阿新 • • 發佈：2019-03-14
doctype 就會 over col lap 進行 har click order 
1.當div標簽中含有子標簽，如果div標簽的大小是被div中的子標簽撐起來的，那麽可能布局(之後)可能就會出現問題(if 父級div中沒有border，padding，inlinecontent，子級div的margin會一直向上找，直到找到某個標簽包括border，padding，inline content中的其中一個，然後按此div 進行margin；)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin:示例10; } .outer{ background-color: gold; width: 300px; height: 300px; overflow: hidden; } .box1{ width: 100px; height: 100px; background-color: blue; margin-top:10px; /*margin-top 是以id =div1 的這個標簽*/ } .box2{ width: 100px; height: 100px; background-color: darksalmon; /*如果這樣的話就合適呢，對著就下去了*/ margin-top: 10px; } </style> </head> <body> <div id="div1" style="background-color: burlywood; width:300px; height:300px"></div> <div style="background-color: chartreuse"> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .outer{ background-color: gold; width: 300px; height: 300px; overflow: hidden; } .box1{ width: 100px; height: 100px; background-color: blue; margin-top:10px; /*margin-top 是以class=outer 的這個標簽*/ } .box2{ width: 100px; height: 100px; background-color: darksalmon; /*如果這樣的話就合適呢，對著就下去了*/ margin-top: 10px; } </style> </head> <body> <div id="div1" style="background-color: burlywood; width:300px; height :300px"></div> <div class="outer"> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>示例2
解決方法:設置padding bording，讓div便簽稱為子標簽的真正的父標簽
這兩種會改變結構
1.加上padding
2.加上border
不改變結構
3.overflow:hidden (理解：相當給div標簽設置了隱藏的邊界，否則不會出現超出部分隱藏功能了)，還有一點，overflow:hidden 清除浮動
css布局註意事項