一、圖片大小
在
CSS中顽冶，我們可以使用width苦蒿、height屬性來定義圖片的大小。
1.實際開發(fā)
在實際開發(fā)中渗稍，需要使用多大的圖片佩迟，就用Photoshop制作多大的圖片。
（1）性能優(yōu)化
不建議使用一張大圖片竿屹，然后再借助
width报强、height屬性來改變大小。因為一張大圖片體積太大拱燃，會使頁面加載速度變慢秉溉，這是性能優(yōu)化方面的考慮。
二碗誉、圖片邊框
在5.邊框樣式-CSS基礎(chǔ)
中召嘶，已經(jīng)介紹過幾乎可以對所有元素定義邊框，也舉出了對圖片加上邊框的例子哮缺，用border屬性定義邊框弄跌。
1.語法格式
border:邊框?qū)挾?邊框外觀 邊框顏色;
<!--同樣采用簡寫形式-->
三、圖片對齊
1.水平對齊（text-align）
在
04-文本樣式.md中尝苇，我們知道使用text-align屬性來控制文本在水平方向上的對齊方式铛只，那么對于圖片該如何在水平方向向上對齊呢?。在
CSS中糠溜，可以使用text-align屬性定義圖片水平對齊方式淳玩。
（1）語法格式
text-align:取值;
① text-align屬性值
| 屬性值 | 說明 |
|---|---|
| left | 左對齊（默認(rèn)值） |
| center | 居中對齊 |
| right | 右對齊 |
這和之前學(xué)習(xí)文本樣式中的都是一樣的。
② 示例
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必須放在title標(biāo)簽及其它meta標(biāo)簽前-->
<title>圖片樣式</title>
<!-- <link rel="stylesheet" type="text/css" href="../css/邊框樣式.css"/> -->
<style type="text/css">
div{
border:1px solid #000000;
}
#img1{
/*左對齊（默認(rèn)值）*/
text-align: left;
}
#img2{
/*居中對齊*/
text-align: center;
}
#img3{
/*右對齊*/
text-align: right;
}
img{
width:200px;
height:200px;
}
</style>
</head>
<body>
<div id="img1">
<img src="../img/天.jpg" alt="夢江南" title="夢江南">
</div>
<div id="img2">
<img src="../00-水1.jpg" alt="夢江南" title="夢江南">
</div>
<div id="img3">
<img src="../img/毛毛.jpg" alt="夢江南" title="夢江南">
</div>
</body>
</html>
（2）text-align屬性用處
text-align屬性一般只用于兩個地方：文本水平對齊非竿、圖片水平對齊蜕着。
（3）圖片水平對齊定義在何處?
圖片是在父元素中進(jìn)行水平對齊，因此要在圖片的父元素中定義红柱。而不是在
img元素中進(jìn)行定義承匣。
2.垂直對齊（vertical-align）
在
CSS中蓖乘，可以使用vertical-align屬性定義圖片垂直對齊方式。vertical-align屬性還有很復(fù)雜的含義悄雅，在此只介紹最基礎(chǔ)的。
（1）語法格式
vertical-align:取值;
① 說明
學(xué)習(xí)編程一定要學(xué)好英語铁蹈，因為各種編程語言都是外國人發(fā)明的宽闲，所以都會有外國人的使用習(xí)慣，語言也都是英語握牧。
vertical：垂直的容诬。align：使排整齊。合起來就是垂直對齊沿腰。要根據(jù)英文意思去理解記憶览徒。
② vertical-align屬性值
| 屬性值 | 說明 |
|---|---|
| top | 頂部對齊 |
| middle | 中線對齊 |
| baseline | 基線對齊 |
| bottom | 底部對齊 |
③ 示例
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必須放在title標(biāo)簽及其它meta標(biāo)簽前-->
<title>圖片樣式</title>
<!-- <link rel="stylesheet" type="text/css" href="../css/邊框樣式.css"/> -->
<style type="text/css">
div{
width:500px;
height: 200px;
border:1px solid #000000;
}
#img1{
vertical-align:top;
}
#img2{
vertical-align:middle;
}
#img3{
vertical-align:baseline;
}
#img4{
vertical-align: bottom;
}
img{
width:99px;
height:95px;
}
</style>
</head>
<body>
<div id="img1">
見賢思齊<img src="../img/毛毛.jpg" alt="是毛毛啊" title="是毛毛啊">越努力越幸運
</div>
<div id="img2">
見賢思齊<img src="../img/毛毛.jpg" alt="是毛毛啊" title="是毛毛啊">越努力越幸運
</div>
<div id="img3">
見賢思齊<img src="../img/毛毛.jpg" alt="是毛毛啊" title="是毛毛啊">越努力越幸運
</div>
<div id="img4">
見賢思齊<img src="../img/毛毛.jpg" alt="是毛毛啊" title="是毛毛啊">越努力越幸運
</div>
</body>
</html>
四、文字環(huán)繞（float）
在
CSS中颂龙，可以使用float屬性實現(xiàn)文字環(huán)繞圖片的效果习蓬。在實際開發(fā)中，運用文字環(huán)繞圖片（即圖文混排）進(jìn)行布局應(yīng)用十分廣泛措嵌，后期再配合內(nèi)容躲叼、背景等多種手段，可實現(xiàn)各種絢麗的效果企巢。
1.初見float
（1）語法格式
float:取值;
① float屬性值
| 屬性值 | 說明 |
|---|---|
| left | 元素向左浮動 |
| right | 元素向右浮動 |
② 示例
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必須放在title標(biāo)簽及其它meta標(biāo)簽前-->
<title>表格樣式</title>
<!-- <link rel="stylesheet" type="text/css" href="../css/邊框樣式.css"/> -->
<style type="text/css">
#span1{
/*設(shè)置字體bold枫慷，與strong標(biāo)簽效果一樣，之所以不采用strong是遵循結(jié)構(gòu)與樣式分離原則*/
font-weight: bold;
}
img{
width:200px;
height:200px;
float:left;
}
</style>
</head>
<body>
<img src="../img/天.jpg" alt="夢江南" title="夢江南">
<p>
<span id="span1">
蝶戀花·夢入江南煙水路
</span>
<br/>
宋代·晏幾道
<br/>
夢入江南煙水路浪规，行盡江南或听，不與離人遇。睡里消魂無說處笋婿，覺來惆悵消魂誤誉裆。
欲盡此情書尺素，浮雁沉魚缸濒，終了無憑據(jù)找御。卻倚緩弦歌別緒，斷腸移破秦箏柱绍填。
</p>
</body>
</html>
