今天我们分享关于文字环绕float的内容。
在网页布局中,经常会用到图文混排。图文混排,就是文字环绕图片进行布局。
在css中,使用浮动属性float可以设置元素的周围。
语法:
float:取值;
float属性取值 | |
属性值 | 说明 |
left | 元素向左浮动 |
right | 元素向右浮动 |
默认情况下,元素是不浮动的。上表中的属性是常用的,另外还有“none” 和“inherit”不常用,也不需要学习的。
示例代码:
<html>
<head>
<title>文字环绕</title>
<style type="text/css">
img {float:left;}
</style>
</head>
<body>
<img src="images/1.jpg">
<p>很长的一段文字,此处省略一万字……</p>
</body>
</html>
浏览器预览效果后,会发现段落文字p与图片在一行,图片在网页左侧,感觉像是文字环绕着图片。
<html>
<head>
<title>文字环绕</title>
<style>
img { float:right;}
</style>
</head>
<body>
<img src="images/1.jpg">
<p>此处省略一万字……</p>
</body>
</html>
当float为right时,你会发现图片在网页最右侧,文字则在左侧,感觉图片漂浮在右侧。
定义图片与文字间距:
在上面的例子中,你发现文字与图片紧贴在一起,好像没有距离,使用margin属性就可以设定它们之间的距离了。
margin指的是外边距,一般外边距有四个方向,分别是上外边距margin-top,右外边距margin-right,下外边距margin-bottom,左外边距margin-left。
语法:
margin-top:像素值;
margin-right:像素值;
margin-bottom:像素值;
margin-left:像素值;
示例代码:
<html>
<head>
<title>边距</title>
<style type="text/css">
img
{
float:left;
margin-right:200px;
border:1px solid black;
}
</style>
</head>
<body>
<img src="images/1.jpg">
<p>此处省略一万字……</p>
</body>
</html>
关于margin的更详细内容,我们在以后的css盒子模型中继续分享。
本章总结:
图片大小:
width:像素值;
height:像素值;
图片边框:
border-width:像素值;
border-style:属性值;
border-color:颜色值;
简洁写法:
border: 1px solid black;
图片水平对齐方式:
text-align:属性值;
left,左对齐,
center,居中对齐,
right,右对齐,
图片垂直对齐方式:
vertical-align:属性值;
top,顶部对齐,
middel,中部对齐,
baseline,基线对齐,
bottom,底部对齐,
文字环绕效果:
float:取值;
left,向左浮动,
right,向右浮动。