1. 图片大小
使用width和height属性,一般设置为像素值(20px)
2. 图片边框
使用border-width、border-style和border-color属性,也可以简写为border
3. 图片水平对齐,即参照x轴上某一点对齐
A. 虽然叫做图片水平对齐,但实际上图片水平对齐是相对于图片的父元素而言,因此需要在父元素中设置text-align属性,可取值为left(默认值)、center和right。
B. text-align只对img和文本有效。也就是说如果父元素设置了text-align属性,其中只有img和文本会水平对齐。
4. 图片垂直对齐,即参照y轴上某一点对齐
A. 指行内其他元素相对于该元素的对齐方式,常用的可取值为top、middle、bottom和baseline。
5. 文字环绕效果
A. 浮动属性float可以设置文字在某个元素的周围,适用与所有元素。常用可取值为left(元素向左浮动)和right(元素向右浮动),默认不浮动。
e.g. <head>
<title>float</title>
<style type="text/css">
img {
float: left;
/* 设置图片大小 */
width: 100px;
height: 100px;
/* 设置图片右边和下边的空隙 */
margin-right: 50px;
margin-bottom: 50px;
}
p {
font-size: 16px;
text-indent: 28px;
}
</style>
</head>
<body>
<img src="kobe.png" alt="" />
<p>电子科技大学电子科技大学电子科技大学电子科技大学电子科技大学电子科技大学电子科技大学电子科技大学电子科技大学电子科技大学电子科技大学电子科技大学电子科技大学</p>
</body>