文字环绕的使用-CSS入门基础（017）

最新推荐文章于 2024-05-28 15:06:39 发布

虾米大王

最新推荐文章于 2024-05-28 15:06:39 发布

阅读量644

点赞数

分类专栏： CSS 文章标签： css css3 html html5

本文链接：https://blog.csdn.net/modern358/article/details/111397751

版权

CSS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

今天我们分享关于文字环绕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，向右浮动。