css一些特別效果設定

在CSS中，BOX的Padding屬性的數值賦予順序爲

 

padding:10px;                           四個內邊距都是10px
padding:5px 10px;   　              上下5px　左右10px
padding:5px 10px 15px;             上5px　右10px　下15px   左由於缺省與右相等，則爲10px
padding:5px 10px 15px 20px;     上5px　右10px　下15px 　左20px

div水平和垂直居中，text-align和vertical-align不起做用，由於標籤div沒有這兩個屬性，因此再css中設置這兩個值不能居中的效果。

1. div水平居中:設置margin的左右邊距爲自動。

1 div
2 {
3      margin:0 auto;
4 }

2.   div中的元素居中

2.1 div中的文字居中：將div的行高設置跟其高度同樣的值。

1 div
2 {
3     height:200px;
4     line-height:200px;
5 }

2.2 div中的圖片居中,方法一：將div的行高設置跟其高度同樣的值，將其中的圖片img外套上標籤i,設置i和div同時垂直居中

 1 div
 2 {
 3     width: 200px;
 4     height: 200px;
 5     line-height: 200px;
 6     vertical-align: middle;
 7     background-color: Gray;
 8 }
 9 div i
10 {
11     vertical-align: middle;
12 }

2.3 div中的圖片居中,方法二：將div轉換成tablecell,讓後設置vertical-align屬性居中。

1 div
2 {
3     width: 200px;
4     height: 200px;
5     display: table-cell;
6     vertical-align: middle;
7     background-color: Gray;
8 }