8.图片样式-CSS基础
一、图片大小
在
CSS中，我们可以使用width、height属性来定义图片的大小。
1.实际开发
在实际开发中，需要使用多大的图片，就用Photoshop制作多大的图片。
（1）性能优化
不建议使用一张大图片，然后再借助
width、height属性来改变大小。 因为一张大图片体积太大，会使页面加载速度变慢，这是性能优化方面的考虑。
二、图片边框
在5.边框样式-CSS基础 中，已经介绍过几乎可以对所有元素定义边框，也举出了对图片加上边框的例子，用
border属性定义边框。
1.语法格式
border:边框宽度 边框外观 边框颜色;
<!--同样采用简写形式-->
为img设置边框-整体样式.png
三、图片对齐
1.水平对齐（text-align）
在
04-文本样式.md中，我们知道使用text-align属性来控制文本在水平方向上的对齐方式，那么对于图片该如何在水平方向向上对齐呢?。 在CSS中，可以使用text-align属性定义图片水平对齐方式。
（1）语法格式
text-align:取值; ① text-align属性值
属性值 | 说明 |
|---|---|
left | 左对齐（默认值） |
center | 居中对齐 |
right | 右对齐 |
这和之前学习文本样式中的都是一样的。
② 示例
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>图片样式</title>
<!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> -->
<style type="text/css">
div{
border:1px solid #000000;
}
#img1{
/*左对齐（默认值）*/
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>
图片样式水平对齐（text-align）示例1.png
（2）text-align属性用处
text-align属性一般只用于两个地方：文本水平对齐、图片水平对齐。
（3）图片水平对齐定义在何处?
图片是在父元素中进行水平对齐，因此要在图片的父元素中定义。而不是在
img元素中进行定义。
2.垂直对齐（vertical-align）
在
CSS中，可以使用vertical-align属性定义图片垂直对齐方式。 vertical-align属性还有很复杂的含义，在此只介绍最基础的。
（1）语法格式
vertical-align:取值;① 说明
学习编程一定要学好英语，因为各种编程语言都是外国人发明的，所以都会有外国人的使用习惯，语言也都是英语。 vertical：垂直的。align：使排整齐。合起来就是垂直对齐。要根据英文意思去理解记忆。
② vertical-align属性值
属性值 | 说明 |
|---|---|
top | 顶部对齐 |
middle | 中线对齐 |
baseline | 基线对齐 |
bottom | 底部对齐 |
③ 示例
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<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>
图片样式垂直对齐（vertical-align）示例1.png
四、文字环绕（float）
在
CSS中，可以使用float属性实现文字环绕图片的效果。 在实际开发中，运用文字环绕图片（即图文混排）进行布局应用十分广泛，后期再配合内容、背景等多种手段，可实现各种绚丽的效果。
1.初见float
（1）语法格式
float:取值;① float属性值
属性值 | 说明 |
|---|---|
left | 元素向左浮动 |
right | 元素向右浮动 |
② 示例
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>表格样式</title>
<!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> -->
<style type="text/css">
#span1{
/*设置字体bold，与strong标签效果一样，之所以不采用strong是遵循结构与样式分离原则*/
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/>
梦入江南烟水路，行尽江南，不与离人遇。睡里消魂无说处，觉来惆怅消魂误。
欲尽此情书尺素，浮雁沉鱼，终了无凭据。却倚缓弦歌别绪，断肠移破秦筝柱。
</p>
</body>
</html>
图片样式初见float示例1.png
腾讯云开发者
