第14课:元素的定位

CSS定位令你可以将一个元素精确地放在页面上你所指定的地方。联合使用定位与浮动(参见第13课),你将能够创建多种高级而精确的布局。
本课我们将讨论以下内容:

  1. CSS定位的原理
  2. 绝对定位
  3. 相对定位

CSS定位的原理

把浏览器窗口想象成一个坐标系统:

带有坐标的浏览器窗口

CSS定位的原理是:你可以将任何盒子(box)放置在坐标系统的任何位置上。

假设我们要放置一个标题。通过使用盒状模型(参见第9课),标题将显示如下:

盒子中的标题

如果我们要把这个标题放置在距文档顶部100像素、左边200像素的地方,我们可以在CSS中输入以下代码:

h1 {position:absolute;top: 100px;left: 200px;}

得到的显示效果如下:

在浏览器窗口里定位标题

正如你所看到的,采用CSS定位技术来放置元素是非常精确的。相对于使用表格、透明图像或其他方法而言,CSS定位要简单得多。

绝对定位

一个采用绝对定位的元素不获得任何空间。这意味着:该元素在被定位后不会留下空位。

要对元素进行绝对定位,应将position属性的值设为absolute。接着,你可以通过属性leftrighttopbottom来设定将盒子放置在哪里。

举个绝对定位的例子,假如我们要在文档的四个角落各放置一个盒子:

#box1 {position:absolute;top: 50px;left: 50px;}
#box2 {position:absolute;top: 50px;right: 50px;}
#box3 {position:absolute;bottom: 50px;right: 50px;}
#box4 {position:absolute;bottom: 50px;left: 50px;}

快来试一试吧!

Tips:You can change the code before run.

相对定位

要对元素进行相对定位,应将position属性的值设为relative。绝对定位与相对定位的区别在于计算位置的方式。

采用相对定位的元素,其位置是相对于它在文档中的原始位置计算而来的。这意味着,相对定位是通过将元素从原来的位置向右、向左、向上或向下移动来定位的。采用相对定位的元素会获得相应的空间。

举个相对定位的例子,我们可以相对于三张图片在页面上的原始位置来对它们进行相对定位。
第14课:元素的定位
注意这些图片将在文档中各自的原始位置处留下空位。
第14课:元素的定位

Tips:You can change the code before run.

小结

在以上两课中,你学会了如何浮动和定位元素。这两个方法可以令你在进行页面布局时,放弃使用HTML表格和透明图像这些过时的方法,而是取而代之以CSS。CSS更为精确、更具优势、并且更易于维护。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/5258.html

(0)
上一篇 2020年2月25日 下午3:43
下一篇 2020年2月25日 下午4:12

99%的人还看了以下文章

  • 使用html、css、bootstrap设计一个电子商务网站的导航条(免费)

    本课程适合前端开发初级学习者,学习使用html、css和bootstrap技术,实现导航条设计。 预计用时:30分钟 1、实现导航条2、实现品牌字体3、实现搜索表单4、实现快捷菜单的显示

    2018年12月20日
    1.6K0
  • 注册表单验证常用js代码:用户名、密码、邮箱等字段验证

    <script language=”javascript”>   //验证是否为数字   function IsDigit(cCheck)       {       return ((‘0′<=cCheck) && (cCheck<=’9’));       }      //验证是否为英文字母        fun…

    2021年11月30日
    4530
  • 跟永哥学HTML5(3):HTML5新增语义化元素的使用

    上节课我们讲了html5与html4的区别,Html5对语法进行了简化,一个htm5文档结构代码如下: <!doctype html> <html> <head> <meta charset=”utf-8″> <title>无标题文档</title> </head> <…

    2018年1月26日
    2.9K1
  • 网页制作常用正则表达式大全、正则表达式在线测试工具

    正则表达式,用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑。正则表达式经常被用于字段或任意字符串的校验。熟练地掌握正则表达式的话,能够使你的开发效率得到极大的提升。 正则表达式在线测试工具 regex101是一个非常不错的正则表达式在线测试工具,你可以直接在线测试你的正则表达式。 网页制作常用正则表达式 1 用户名正则 //用户名正则,4到…

    2018年9月12日
    2.5K0
  • 给网页中的按钮和图片添加声音

    Loud links-是一款大小只有1.5KB的WEB音效插件,可以实现网页中按钮与图片等元素的触发交互,比如鼠标放上去后出现响声,或者鼠标点击后出现响声。Loud links使用相当简单。 使用方法 1. 在网页中引入JS 文件 <script src=”js/loudlinks.min.js”></script> 2. 在需要触发…

    2018年2月6日
    3.6K0
  • 第2课:HTML是什么?

    HTML是什么? HTML是一门语言,它令我们可以在因特网上展示信息。你所看到的网页,是浏览器对HTML进行解释的结果。要查看一个网页的HTML代码,只需在浏览器菜单栏上点击“查看”,然后选择“源文件”即可。 对于生手来说,HTML代码看似很复杂,不过本教程将帮助你弄清楚它们的含义。 HTML能用来做什么? 如果你要制作网站的话,学习HTML是不可避免的。即…

    2018年1月20日
    2.3K0

发表回复

登录后才能评论