web初探-css-图片大小及图片文字对齐方式

设置图片边框

<style type = "text/css">
	.i{
	border-style: solid;
	border-color: red;
	border-width: 3px;
	}
</style>

border-style是设置边框为实线

有一种更简便的写法：

<style type = "text/css">
.i2{
	border:4px green dashed;
	}
</style>

dashed是style属性的值，表示虚线。上面三个值顺序可以改变。

关于border-style属性还有一些其他值，比如：dotted（点划线）

边框上下左右的线条还可以设置为不同的：

<style type = "text/css">
.i3{
	border-top: 1px blue dashed;
	border-bottom: 2px green dashed;
	border-left: 3px gray dashed;
	border-right: 4px pink dashed;
	}
</style>

设置图片大小及缩放

通过width和height属性来设置图片大小

通过只设置width或height一个属性，值用百分数表示，可以放大缩小图片。其实，这个百分数表示的是，图片所在容器长或宽的比例。

图文混排

属性 float

用于设置文字环绕图片，值可以是left，right等

设置图片与文字的对齐方式

属性 fverticl-align

默认文字和图片是水平对齐的，即值为baseline

其他值：
top(顶部水平对齐)
middle（居中对齐）
bottom（底部对齐）这个和baseline很像。
text-bottom
text-top
sub
super
效果总览：

另外，还有一种是自定义的，例如20px等，它的大小是相对于基准线的。