个人心得：在一个页面中首先要分清整个页面总共分为多少小块，从外到内，一层一层分割，由大到小，理清包含关系，本人初学者，刚学到这，个人觉得只要思路正确，能分清哪一部分需要div，哪些部分用table布局简单，一个简单的页面就很容易成型，再运用各个属性，学习的过程不能只注重知识点，知识点要牢固，大概的框架，层次分出来，再在里边运用所学属性，进行功能细化，比如本次笔记中，就提到了几个常见的布局、定位属性，div是块级元素，会占一整行，要是想让两个div并排，就可以用absolute这个属性，来进行绝对定位，当然也可以用float：left这个属性，浮动。当使用绝对定位absolute时，一定要找到它的父容器，也就是给父容器也设置一个position属性，一般父容器设置position：relative。这样父容器也可以进行一系列的属性设置。相对于绝对布局来说，relative对其他属性设置的限制就要小的多.一个页面总会有留白，这个时候就要用到对边距的调整：margin（外边距）、padding（内边距）。在使用边距时，如果不设置具体的左右距离，比如margin：10px。这里指的就是外边距都是10px，边距的距离依据的是left、top。也就是说不管大小，设置边距属性之后，左和上一定是10px，右和下就随便了。
2.6盒子模型
margin：外边距
margin-top、margin-right、margin-bottom、margin-left
使用方式：
1）margin：30px；表示上下左右外边距都是30px；
2）margin-left：30px；单独设置上下左右外边距
3）margin：10px 20px30px 40px；分别设置上右下左四个边距为10、20、30、40
padding：内边距
也有上下左右边距，和margin类似，不在赘述
border：边框
border-width：边框宽度
border-style: 边框线条
border-color: 边框颜色
word中设置边框的操作
也可以使用更优化的书写方式
border:10px dashed blue;
outline：轮廓线，用法同border
2.7定位
定位方式有：static、fixed、relative、absolute
static静态定位（默认）
无定位，元素正常出现了流中，不受left、right、top、bottom属性影响。
div{
width: 200px;
height: 200px;
background-color: red;
position: static;
} 显示效果
fixed
#div1{
width: 200px;
height: 200px;
background-color: red;
}
#div2{
width: 200px;
height: 200px;
background-color: greenyellow;
} 显示效果
<style>
#div1{
width: 200px;
height: 200px;
background-color: red;
position: fixed;
left: 30px;
top: 20px;
}
#div2{
width: 200px;
height: 200px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body> 显示效果
从结果可以看出，fixed定位会将元素从流中“摘”出来单独进行定位，其定位取决于left、top等属性。
重新定位之后可能会出现重叠，通过z-index可以调整其顺序，但是静态定位z-index无效。
relative相对定位
<style>
#div1{
width: 200px;
height: 200px;
background-color: RGBA(255,0,0,1);
}
#div2{
width: 200px;
height: 200px;
background-color: greenyellow;
position: relative;
top: 20px;
left: 30px;
}
#div3{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body> 显示结果
从结果可以看出来，相对定位是从原来的位置进行唯一，但并不影响后续位置。
absolute绝对定位
<style>
#div1{
width: 200px;
height: 200px;
background-color: RGBA(255,0,0,1);
}
#div2{
width: 200px;
height: 200px;
background-color: greenyellow;
position: absolute;
top: 20px;
left: 30px;
}
#div3{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body> 显示效果：
从结果可以看出：绝对定位的元素将从流中被“摘”出来，依靠left、top属性进行定位。
与fixed类似，但是参照物不同
fixed参照根元素（html）
absolute参照父容器
![龙珠训练营task04[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)