<!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 两个属性主要用来改变内容的位置关系 和 盒子的位置关系