<html>
<head>
<title>css構造塊級元素</title>
<meta charset = "utf-8" />
<!--
1.寬高
width: 數值;
height: 數值; 也可用百分比 ,【長高的設置不會被後代繼承】
2.背景:
(1) 背景顏色
background-color:顏色值;
元素的背景顏色默認爲: transparent
【background-color不會被後代繼承】
(2) 背景圖片
使用background-image 屬性默認爲none表示背景上沒有放置任何圖像
如果要設置一個背景圖像，必須爲這個屬性設置一個URL值
background-image: url(bj.jpg);
(3) 背景圖片重複的問題
使用background-repeat 來解決，可以的值:
repeat-x 水平平鋪 ,repeat-y 垂直平鋪,no-repeat 單圖片顯示
(4)背景圖片的位置
使用background-position 來設置
1) 可以使用一些關鍵字：top, bottom, left, right, center
通常這些關鍵字會成對出現:
top left ; top center ;top right ; center left ;center center ;
center right ;bottom left; bottom center ; bottom right
2) 也可用百分比 background: 50% 50%;
3) 當然更可以用數值, 以px單位 background:40px 10px;
4) 也可以混用
5)必須加上 background-repeat: no-repeat;
首先要確定圖片不重複，纔可以定位。
背景關聯 background-attachment:fixed;
總結： background: #00FF00 url(bj.jpg) no-repeat fixed center left;
3.邊框:
格式 border : 1px solid #ccc;
dashed 表示虛線
border-left: none;
border-right: none;
border-top: none;
border-bottom: none;
-->
<link rel = "stylesheet" style = "text/css" href = "style/css.css" />
</head>
<body>
<div class = "div1" >
這是第一個div
<p>這是P元素</p>
<p>這是P元素</p>
</div>
<div>
這是第二個div
</div>
</body>
</html>
css.css 文件內容
/*
body {
background-image: url(../images/2.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
*/
.div1 {
width: 500px;
height: 500px;
border: 10px dashed red ;
background: #696 url(../images/1.jpg) no-repeat 10px;
/*
background-position 屬性設置背景圖像的起始位置
background-position: center center;
image 和 repeat 和 position 必須同時使用 position才管用。
1.使用 left center right 時，表示： (y軸 x軸)
2.使用百分比，如 background-position: 50% 4% 時，表示(x軸 y軸)
3.如果僅規定了一個關鍵詞，那麼第二個值將是"center"。 默認值：0% 0%。
4.您可以混合使用 % 和 position 值。
*/
}
p {
background-color: red;
}
