CSS學習2—-padding/border/margin

技術小胖子發表於2017-11-08
CSSpadding

 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，如需轉載請自行聯絡原作者


相關文章