一、padding與margin

　　　　padding：就是內邊距的意思，它是邊框到內容之間的距離

　　　　另外padding的區域是有背景顏色的。並且背景顏色和內容的顏色一樣。也就是說background-color這個屬性將填充所有的border以內的區域

　　有關padding 的使用:

　　　　padding有四個方向，分別描述4個方向的padding。

　　　　1、寫小屬性,分別設置不同方向的padding

1 padding-top: 30px;
2 padding-right: 30px;
3 padding-bottom: 30px;
4 padding-left: 30px;
 

　　　　2、寫綜合屬性，用空格隔開

 1 /*上 右 下 左*/
 2 padding: 20px 30px 40px 50px ;
 3 
 4 /*上 左右  下*/
 5 padding: 20px 30px 40px;
 6 
 7 /* 上下 左右*/
 8 padding: 20px 30px;
 9             
10 /*上下左右*/
11 padding: 20px;

　　margin：外邊距的意思。表示邊框到最近盒子的距離。

　 margin的用法比較簡單

1 /*表示四個方向的外邊距離為20px*/
2 margin: 20px;
3 /*表示盒子向下移動了30px*/
4 margin-top: 30px;
 
5 /*表示盒子向右移動了50px*/
6 margin-left: 50px;
7 
8 margin-bottom: 100px;

二、border(邊框)

　　border:邊框的意思，描述盒子的邊框

　　邊框有三個要素： 粗細 線性樣式 顏色

1 border-width: 3px;
2 border-style: solid;
3 border-color: red;

　　如果顏色不寫，默認是黑色。如果粗細不寫，不顯示邊框。如果只寫線性樣式，默認的有上下左右 3px的寬度,實體樣式，並且黑色的邊框。

　　border的應用:

　　利用border可以制作出三角與圓形

1 /*小三角 箭頭指向下方
 
*/
2         div{
3             width: 0;
4             height: 0;
5             border-bottom: 20px solid red;
6             border-left: 20px solid transparent;
7             border-right: 20px solid transparent;
8         }

三、float與position

　　float:浮動　

　　　　浮動是css裏面布局最多的一個屬性，也是很重要的一個屬性。

　　　　float：表示浮動的意思。它有四個值。

• • 　　none: 表示不浮動，默認
  • 　　left: 表示左浮動
  • 　　right：表示右浮動

　　　　浮動的特性:　　　　

　　　　　　1.浮動的元素脫標

　　　　　　2.浮動的元素互相貼靠

　　　　　　3.浮動的元素由"子圍"效果

　　　　　　4.收縮的效果

　　　　浮動帶來的好處是實現元素並排效果，同時它還帶來一些負面影響，所以我們遵循"要浮動一起浮動，有浮動清楚浮動"的準則，目的就是為了更好的頁面布局。

　　　　如何清除浮動?

　　　　清除浮動的比較常見的方法有4種:

　　　　　　1.給父級盒子設置一個高度

　　　　　　　　這種方法可以解決問題，但是太局限了

　　　　　　2.clear:both

　　　　　　　　這種方法又稱為內墻法，在同層下創建一個新的div

　　　　　　　　clear：意思就是清除的意思。

　　　　　　　　clear有三個值：

　　　　　　　　　　left：當前元素左邊不允許有浮動元素

　　　　　　　　　　right：當前元素右邊不允許有浮動元素

　　　　　　　　　　both：當前元素左右兩邊不允許有浮動元素

　　　　　　3.偽元素清除法

　　　　　　　　這種方法是最為常用的方法，給浮動子元素的父盒子，也就是不浮動元素，添加一個clearfix的類，然後設置

1               content: ".";
2                 display: block;
3                 height: 0;
4                 clear: both;
5                 visibility: hidden

　　　　　　4.overflow:hidden

　　　　　　　　這種方法的用法很方便，也比較常用

　　　　　　　　overflow屬性規定當內容溢出元素框時發生的事情。

　　　　　　　　用法就是在其樣式內加入該語句

               .main{
                  overflow:hiden

               }

　　position:定位

　　　　定位也是能實現元素並排的一種方式，定位的方式有三種:相對定位、絕對定位與固定定位。

　　　　相對定位:

　　　　　　相對於自己原來的位置定位　　　

　　　　　　現象和使用：

　　　　　　　　1.如果對當前元素僅僅設置了相對定位，那麽與標準流的盒子什麽區別。

　　　　　　　　2.設置相對定位之後，我們才可以使用四個方向的屬性： top、bottom、left、right

　　　　　　特性：

　　　　　　　　1.不脫標

　　　　　　　　2.形影分離

　　　　　　　　3.老家留坑（占著茅房不拉屎，惡心人）

　　　　　　　　所以說相對定位 在頁面中沒有什麽太大的作用。影響我們頁面的布局。我們不要使用相對定位來做壓蓋效果

　　　　　　用途：

　　　　　　　　1.微調元素位置

　　　　　　　　2.做絕對定位的參考（父相子絕）絕對定位會說到此內容。

　　　　　　參考點：

　　　　　　　　自己原來的位置做參考點。

　　　　絕對定位:

　　　　　　特性：

　　　　　　　　1.脫標

　　　　　　　　2.做遮蓋效果，提成了層級。設置絕對定位之後，不區分行內元素和塊級元素，都能設置寬高。

　　　　　　參考點(重點)：

　　　　　　　　一、單獨一個絕對定位的盒子

　　　　　　　　　　　　1.當我使用top屬性描述的時候 是以頁面的左上角（跟瀏覽器的左上角區分）為參考點來調整位置
　　　　　　　　　　　　2.當我使用bottom屬性描述的時候。是以首屏頁面左下角為參考點來調整位置。

　　　　　　　　二、以父輩盒子作為參考點

　　　　　　　　　　　　1.父輩元素設置相對定位，子元素設置絕對定位，那麽會以父輩元素左上角為參考點，這個父輩元素不一定是爸爸，它也可以是爺爺，曾爺爺。

　　　　　　　　　　　　2.如果父親設置了定位，那麽以父親為參考點。那麽如果父親沒有設置定位，那麽以父輩元素設置定位的為參考點

　　　　　　　　　　　　3.不僅僅是父相子絕，父絕子絕 ，父固子絕,都是以父輩元素為參考點

　　　　　　　　　　　　註意了：父絕子絕，沒有實戰意義，做站的時候不會出現父絕子絕。因為絕對定位脫離標準流，影響頁面的布局。相反‘父相子絕’在我們頁面布局中，是

　　　　　　　　　　常用的布局方案。因為父親設置相對定位，不脫離標準流，子元素設置絕對定位，僅僅的是在當前父輩元素內調整該元素的位置。

　　　　　　　　　　還要註意，絕對定位的盒子無視父輩的padding

　　　　　　　　作用：頁面布局常見的“父相子絕”，一定要會！！！！

　　　　　固定定位:　　　　　　

　　　　　　　　固定當前的元素不會隨著頁面滾動而滾動

　　　　　　特性:

　　　　　　　　1.脫標

　　　　　　　　2.遮蓋，提升層級

　　　　　　　　 3.固定不變

　　　　　　參考點：

　　　　　　　　設置固定定位，用top描述。那麽是以瀏覽器的左上角為參考點
　　　　　　　　如果用bottom描述，那麽是以瀏覽器的左下角為參考點

　　　　　　作用： 1.返回頂部欄 2.固定導航欄 3.小廣告

CSS之屬相相關