CSS學習2—-padding/border/margin

1.padding是內容和內容的邊框之間的空間。

2.border是指畫在方框的每一邊的直線。可以是一邊或者任何邊的組合。

3.margin是指一個標籤和另一個標籤之間的間隔。

4.他們都有四個屬性：margin-left,margin-right,margin-top,margin-bottom;

padding-left,padding-right,padding-top,padding-bottom;

5.一般用畫素定義一個尺寸，如margin-right:20px;

當定義四邊時，還有更快捷的設定方式，如下：

margin:10px 15px 10px 25px;

padding:0px 10px 15px 20px;

這四個值的順序非常重要，分別代表top,right,bottom,left;

eg.

p{

border:1px solid #666666;

padding:10px 10px 10px 10px;

margin:0px;

}

body{

margin:0px;/*讓body的邊框緊靠著網頁邊框。*/

}

6.邊框碰撞問題：如果兩個邊框碰撞，瀏覽器不會把兩個邊框的值相加，而是會採用最大的那個邊框。

7.<span>xxxx</span>

8.我們常用的塊級標籤：div、p、h1~h6 、表格、列表。

9.行內標籤為：strong、span、img、超連結、各種表單標籤。

10.在大多數情況下，CSS對待塊級標籤和對待行內標籤是相同的，

你可以定義樣式給文字、顏色、背景等，但是margin和padding比較特殊。

11.塊級標籤是獨佔一行的！！！

12.

使塊級標籤產生如行內標籤一樣的效果：display:inline;

使行內標籤產生如塊級標籤一樣的效果：display:block;

display還有一個特殊的值none,它可以隱藏樣式元素，使他不會在瀏覽器上出現。

13.在CSS中每個邊框有3個屬性可以控制：color(顏色)、width(寬度)、style(樣式);

style常用的屬性：solid(實線)、dashed(虛線)、none、hidden。

（說明：其中none和hidden的作用是一樣，它們都完全除去了邊框，

none值對於取消單獨的一條邊框很有用。）

eg.

div{

border:1px solid #444; /*使用border來設定屬性*/

border-bottom:none;

padding:10px;

}

14.可以使用border-方向-width和border-方向-style兩個屬性來改變邊框的寬度和樣式。

eg.

border-bottom-style:solid;

border-bottom-width:3px;

15.技巧性的東西：

《1》。讓一個div居中

div{

margin-left:auto;

margin-right:auto;

}

《2》。讓一個div自動增長

div{

width:400px;

height:auto;

overflow:auto;

}

16.overflow的3個屬性值：

①visible:瀏覽器的通常的做法，預設使用。

②hidden:隱藏。

③scroll:新增滾動條，不幸的是只要使用這個選項，即使內容很少，滾動條也會出現！

④auto:在需要的時候，自動新增滾動條。

17.注意事項：

margin是不改變網頁的大小的！！

對於一個標籤加padding時，會改變網頁的大小。

eg.

一個網頁的寬度為960px

div{

paddind-left:10px;

width:950px; /*這樣網頁的寬度始終為960px。*/

}

18.給網頁新增背景圖片

div{

background-image:url(1.png); → 預設是平鋪。

background-repeat:no-repeat; → 不平鋪；（logo用的多）

background-repeat:repeat-x; → 只平鋪X軸。

background-position:10px(距左的畫素) 30px(距上的畫素);

center center;

left bottom;

right top;

832px -128px;

}

本文轉自韓立偉 51CTO部落格，原文連結：http://blog.51cto.com/hanchaohan/928259，如需轉載請自行聯絡原作者

CSS學習2—-padding/border/margin

相關文章