Css總結++圖片在div中居中的方式
在Css樣式中圖片(文字)居中的方式：
①使用父子選擇器
.style1{
text-align:center;
}
.style1 img{
magin-top: xx px （設定自己需要的畫素）
}
②在Html中使用table的方式
設定一行一列
<div class = "xxx">
<table width = "100%" align = "center" valign ="middle">
<tr>
<td><img src = "xxx" /></td>
</tr>
</table>
</div>
<link href=”xxx/xxx/xx.css” type = “text / css” rel = “stylesheet”
CSS樣式的引入
總結：
CSS的三種選擇器：
（1）” .選擇器名稱 就是一個類選擇器”
（2）“ #選擇器名稱 就是一個ID選擇器”
（3）” body html的選擇器”
（id>類>html）
（4） 父子選擇器：
#style span{
屬性名 ： 屬性值；
}
<head>
樣式的定義：<style = “text/css”>
.（#）類選擇器名稱{ ‘點’是類選擇器 #是id選擇器’
屬性名: 屬性值； （等等）
}
</style>
img {
filter:gray
}
a:link img {
filter:gray;超連結預設情況下灰色（img這個圖）
}
a:hover img{
filter:””
}
</head>
<body>
<元素名 class = “style1” >
（class是類選擇器 id 是id選擇器）
元素名可以是HTML中的任意元素的名稱
引用上面設定的CSS樣式（注意不能帶‘點’）
</span>
<img src = “xx” /> 上面對應的img設定會對其做出處理
<a><img src = “xx” /></a>
★行內元素和塊元素
1. 行內元素：只佔內容寬度，不會自動換行（span）
一般放文字或者其他行內元素
2. 塊元素：不管內容多少，都會換行並且佔滿一行（div）
一般存放行內元素，文字，塊元素
3. 行內元素和塊元素是可以互換 display:block行內元素>塊元素 display:inline塊元素>行內元素
★標準流流，非標準流，盒子模型
1. 標籤的排列方式。先排先顯示-->標準
2. ★★★盒子模型：層層巢狀。｛
1) 每一個元素都可以看作一個盒子
2) 參照物不同 CSS屬性不同
3) 儘量使用margin。Padding會破壞盒子大小
①邊界層： margin
②邊框層： border
③填充層： padding
④填充層： content
｝
（1）每個div模組之間的距離就稱margin
（2）div模組邊界與內部元素的距離成為padding（上下左右）
（3）模組邊框多粗是用border
（4）模組內部的元素為content
Margin padding 在設計的CSS樣式中設定。
Border（邊框）:邊框線的型別有九個確定值：none（無邊框線）、 dotted（由點組成的虛線）、 dashed（由短線組成的虛線）、 solid（實線）、 double（雙線，雙線寬度加上它們之間的空白部分的寬度就等於border-width定義的寬度）、 groove（3D溝槽狀的邊框）、 ridge（3D脊狀的邊框）、 inset（3D內嵌邊框，顏色較深）、 outset（3D外嵌邊框，顏色較淺）
浮動（float）：左右浮動，清除浮動。
右浮動：向模組右邊浮動按照標準流的形式，碰到父元素邊界的時候停止 </body>