HTML CSS怎么移动字体位置？

1、打开Hbuilder编辑器，新建一个html空白文档，输入基本的结构，这里设置一个外围的div盒子，给外围的div高度宽度和背景颜色，文字包裹到span标签里，文字也设置一下颜色，按下Crtl+S保存一下：

2、此时可以在软件右侧的窗口可以看到效果：

3、把外围盒子的position属性设置为relative，span标签里的position属性设置为absolute，设置top、left、right、bottom的数值，此时在右侧的窗口就会发现文字的位置已经改变了：

下面是把原网站的效果完整模拟出来的代码，你自己分析一下css就明白了：

<style>
    box {position:relative; width:400px; height:400px}
    box img {position:absolute; left:0; top:0; width:400px; height:400px; z-index:1}
    box imghs {opacity:1; z-index:2; transition:opacity 1s}
    box imghs:hover {opacity:0}
    box label {display:block; position:absolute; left:0; bottom:0; width:376px; height:40px; padding:12px 12px 11px; background:url(;

简单说明一下：实际有两张，一张灰度的，一张彩色的，灰度的覆盖在彩色的上面，所以平常看它是灰度的。当鼠标移入时，灰度的由完全不透明逐渐变为完全透明（这个过程历时1秒），这样下面的彩色图就逐渐显示出来了。下面的文字也一样，平时底色是半透明的黑色，鼠标移入后就变为不透明的红色。

HTML 元素被定义为块级元素或内联元素。

1、块级元素：

①总是在新行上开始；

②高度，行高以及外边距和内边距都可控制；

③宽度缺省是它的容器的100%，除非设定一个宽度。

④它可以容纳内联元素和其他块元素

常见块级元素：address - 地址、blockquote - 块引用、center - 居中对齐块、dir - 目录列表、div - 常用块级容器，也是css layout的主要标签、dl - 定义列表

2、内联元素（行内元素）

①和其他元素都在一行上；

②高，行高及外边距和内边距不可改变；

③宽度就是它的文字或的宽度，不可改变

④内联元素只能容纳文本或者其他内联元素

常见内联元素：a - 锚点、abbr - 缩写、acronym - 首字、 b - 粗体(不推荐)、 bdo - bidi override、big - 大字体、br - 换行

扩展资料：

可变元素由上下文语境来决定是块元素还是内联元素 。

applet - java applet

button - 按钮

del - 删除文本

iframe - inline frame

ins - 插入的文本

map - 区块（map）

object - object对象

◎script - 客户端脚本

---