數值 hid 模型 http 影響 收藏 塊級元素 padding 不能

一、DIV標記與SPAN標記
div和span都可以作為一個容器，集體控制容器內的樣式
區別是div使塊級元素，前後會有換行
而span是行內元素，前後不會換行

二、盒子模型
1，概念
任何頁面元素都可以看成一個盒子
一個盒子模型由content、padding、border、margin四部分組成

三、元素的定位

1，float
值可以為left、right或默認none，left和right分別向父元素的左側或右側靠緊
可以設置clear: left、right、both來清除float對其的影響

2，position
static: 默認值，保持原位
absolute: 絕對位置，top、bottom、right、left可以指定絕對值或百分比，CSS默認後加入到頁面的元素會覆蓋之前的原始
relative: 相對父塊來定位，top、bottom、right、left
fixed: 本質上和absolute一樣，但是塊不會隨著瀏覽器滾動條而上下移動，IE不支持fixed屬性

3，z-index
z-index指垂直與頁面方向的z軸，z-index值大的塊位於值小的塊上面，會形成覆蓋效果dth(height)的值指content的width(height)+padding的值 iv內可以有span，而span內不能有div

一、DIV標記與SPAN標記
div和span都可以作為一個容器，集體控制容器內的樣式
區別是div使塊級元素，前後會有換行
而span是行內元素，前後不會換行
div內可以有span，而span內不能有div

二、盒子模型
1，概念
任何頁面元素都可以看成一個盒子
一個盒子模型由content、padding、border、margin四部分組成
width(height)的值指content的width(height)+padding的值

2，border
color
width: thin、medium、thick、數值
style: none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset
border-top、border-bottom、border-left、border-right
IE不支持border-style

background-color在IE中指content+padding，FF中指content+padding+border

3，padding
padding-top、padding-bottom、padding-left、padding-right

4，margin
margin-top、margin-bottom、margin-left、margin-right
對一行而言，兩個塊的margin = margin-right + margin-left
對換行而言，兩個塊的margin = margin-bottom和margin-top中較大者
對父子而言，子塊的margin = 子塊的margin + 父塊的padding
當margin設為負數時，塊會向相反的方向移動，甚至覆蓋另外的塊

三、元素的定位

1，float
值可以為left、right或默認none，left和right分別向父元素的左側或右側靠緊
可以設置clear: left、right、both來清除float對其的影響

2，position
static: 默認值，保持原位
absolute: 絕對位置，top、bottom、right、left可以指定絕對值或百分比，CSS默認後加入到頁面的元素會覆蓋之前的原始
relative: 相對父塊來定位，top、bottom、right、left
fixed: 本質上和absolute一樣，但是塊不會隨著瀏覽器滾動條而上下移動，IE不支持fixed屬性

3，z-index
z-index指垂直與頁面方向的z軸，z-index值大的塊位於值小的塊上面，會形成覆蓋效果

四、圖片簽名

Java代碼

1. <div id="block1"><img src="building.jpg" border="0"></div>
2. <div id="block2">xxx‘s photo</div>
4. #block1 {
5. padding: 10px;
6. border: 1px solid #0000;
7. float: left;
8. }
10. #block2 {
11. color: white;
12. padding: 10px;
13. position: absolute;
14. left 255px;
15. top: 205px;
16. }

<div id="block1"><img src="building.jpg" border="0"></div>
<div id="block2">xxx‘s photo</div>

#block1 {
  padding: 10px;
  border: 1px solid #0000;
  float: left;
}

#block2 {
  color: white;
  padding: 10px;
  position: absolute;
  left 255px;
  top: 205px;
}

五、文字陰影

Java代碼

1. <div id="block1">CSS定位陰影</div>
2. <div id="block2">CSS定位陰影</div>
4. #block1 {
5. position: relative;
6. z-index: 1;
7. }
9. #block2 {
10. color: #AAAAAA;
11. position: relative;
12. top: -1.06em;
13. left: 0.1em;
14. z-index: 0;
15. }

理解css+Div定位