盒模型的常用属性讲解与元素大小的重新结算
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 300px; height: 300px; background-color: aqua; /* padding属性是盒子的内容区到padding的间距，在效果图中书背景颜色到边框线的那一部分空白 */ padding: 10px; /* 设置盒子的边框，边框宽度为3px，实线，背景颜色为黑色 */ border: 3px solid #666; /* 裁切背景颜色，因为背景颜色会自动从内容区扩散到padding，为了方便查看内容区大小，将内容区背景与padding裁切 */ background-clip: content-box; /* position是定位属性,默认的值是static,如果随意添加一个值,static除外,那么这个元素就是定位元素 */ /* position: relative;是相对定位,是根据元素本身的位置进行移动,并且不释放文档流中的空间 */ position: relative; /* 根据原来的位置像右偏移50px */ left: 60px; } .box-one { padding: 10px; width: 300px; height: 300px; background-color: blue; background-clip: content-box; border: 3px solid #666; /* margin指的是一个容器(可以理解为盒子)之间与另一个容器的间距，margin一共是有4个值，上右下左按照顺时针进行值的设定 */ /* margin-top,margin-right,margin-bottom,margin-left这四个属性分别对应了与上右下左的间距 */ margin: 10px; /* box-sizing重新计算盒子的大小,默认的值是content-box代表了计算到内容区,如果为默认值一旦设置的值添加了padding的话,那么整个盒子的真实大小将会改变.会破坏布局. */ /* border-box是将盒子的宽高计算到边框,如果盒子宽高的值重新设定,那么整个内容区也会跟着变大变小,而盒子的大小不变. */ box-sizing: border-box; } .box-tow { width: 150px; height: 120px; background-color: red; /* position: absolute;是相对定位,根据定位父元素来进移动,如无腹肌定位元素将默认body为定位父级 */ position: absolute; } </style></head><body> <div class="box"> <div class="box-tow"> </div> </div> <div class="box-one"></div></body></html>
