個人心得：在一個頁面中首先要厘清整個頁面總共分為多少小塊，從外到内，一層一層分割，由大到小，理清包含關系，本人初學者，剛學到這，個人覺得隻要思路正确，能厘清哪一部分需要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=)