<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box3{ width: 200px; height: 200px; background-color: blue; padding-top: 100px; } .box4{ width: 100px; height: 100px; background-color: orange; margin-top: 100px; } </style> </head> <body> <div class="box3"> <div class="box4"> </div> </div> </body> </html>
標准盒模型尺寸的計算
盒子模型的實際寬度:width+左右padding+左右border
盒子模型的實際長度:width+上下padding+上下border
border以內的盒子區域 統稱為盒子的可視區域
width height設定的區域,稱為內容區域content,我們寫在一對標簽中的
內容只能出現在width和height設置的區域
padding margin 兩個屬性主要用來改變內容的位置關系 和 盒子的位置關系