web前端进入实战:css使一个框的高度自适应于屏幕的其余部分。

在
项目中，移动终端要自适应。有时候由于数据不足，有些区域空是白色的。

要求:没有数据时，屏幕可以填满，数据超出屏幕时会出现滚动条。

工作方法

1-让容器高度填满此屏幕。

在容器内容很少的情况下，要让这个容器填满整个屏幕:

` .容器{

}`

2-让容器高度填满剩余的屏幕高度。

为了使容器填满屏幕的剩余高度，可以使用vh结合flex布局。

` .内容{

}

.标题{

}

.内容{

}

.页脚{

}`

html怎么移动文字位置？

1、 html中调整位置使用css的float属性。详细用法首先在html文件中新建两个p容器，用来方便演示效果，容器中都加入h2标签，设置不同文字便于区分。

2、p标签给它在style标签设置class属性的样式，给它高度和宽度以及颜色，h2标签一个使用float属性，另一个不使用。这里float标签的作用可以让文字居左或者居右显示，也可以设置为空，最后Crtl＋S保存文件。

3、打开浏览器，可以看到两个p中的文字位置并不相同，设置了float标签的文字在靠右的位置。

css如何设置图片大小自适应？

1.用dw编辑器建立了一个静态页面

2.将建好的静态页命名为css.html，标题为了“css如何设置图片大小自适应”

3.在body中添加两个p，设置不能的宽度，并设class 为p1和p2，目的是用一样的css控制图片的宽度在不同的宽度容器中都能很好的显示

4.在两个p的class 中添加相同的控制图片的class名为了 ”img“，并为p添加控制宽度的样式

5.在两个p中加入相同的图片<img src=”images/5.png” />，在浏览器打开页面发现加入图片后把原来的p都给覆盖掉了

6.这个时候我们需要在img 类中加入限制图片的宽度的css语句让他自己适应容器的宽度.img img{ width:100%; height:auto}

网页中如何用HTML/CSS实现文字居中于图片？

1、前端用到的编辑器有很多，本例通过选择Sublime Text3编辑器来实现文字居中图片的制作。第一步，打开电脑中安装的Sublime Text3，新建demo文件夹用来存放文件，在里面新建一个html文件，通过Tab快捷键迅速创建一个html模板，并命名标题。如图：

2、第二步，在顶部head标签里引入外部CSS文件。当然，因为本例比较简单，就直接写在style标签里了。建议实际开发应该写在外部CSS文件中。

3、第三步，在Body中写简单的html代码。在一个容器p中，给一个类名，然后加一个子p，命名类名，用来填充文字。子p中加一个h标签，引入文字，随便写几个文字。如图：

4、第四步，写父级p的样式。其主要作用是包裹子级p。为了看得比较明显，加一个边框样式：border：1px solid #093。如图：

5、第五步，写主要的字p样式。设置长度和宽度，以及边框样式；文字颜色以及字体大小；接着以一张图片作为背景图片，不重复：background: url(images/0.jpg) no-repeat。如图。你也可以随时在浏览器中查看效果。可以看到，此时，文字是在图片最上面。

6、第六步，接着是最关键的部分，设置文字居中于图片，包括垂直和水平方向上的居中。其中，line-height：630px，使行高等于高度，文字即可在垂直方向居中；text-align: center，实现水平居中。如图：