第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;}

快来试一试吧!





第14课:元素的定位|www.125jz.com



box1

box2

box3

box4




相对定位

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

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

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






第14课:元素的定位|www.125jz.com




第14课:元素的定位
第14课:元素的定位
第14课:元素的定位



小结

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

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

(0)
江山如画的头像江山如画管理团队
上一篇 2020年2月25日 下午3:43
下一篇 2020年2月25日 下午4:12

99%的人还看了以下文章

  • JavaScript 向数组的开头或末尾添加元素:unshift() 、push()方法详解

    unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。 unshift() 实例: <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>uns…

    2018年9月5日
    13.9K0
  • 网页设计常见css3动画效果(摆动、缩放、旋转、透明、反弹)

    网页上常看到某个DIV或图片有渐入、摆动、缩放、旋转、透明、反弹等效果,今天分享给大家! <!DOCTYPE html> <html> <head> <meta name=”viewport” content=”initial-scale=1.0, maximum-scale=1.0, user-scalable=n…

    2022年5月9日
    1.1K0
  • 两个iframe自适应高度的解决方法

    很多小伙伴在做网站的时候对于解决iframe的高度问题都是很头大的一件事,今天吾爱编程为大家介绍一下iframe自适应高度的方法,有需要的小伙伴可以参考一下: 1、需求分析: 使页面中的iframe可以自适应高度,避免页面高度增加的时候页面和iframe会同时出现滚动条。 2、方法一: 在iframe上面直接加onload的方法,使其自适应 <ifra…

    2021年3月16日
    1.2K0
  • FLV视频播放代码及Flvplayer.swf播放器下载

    FLV是被众多新一代视频分享网站所采用,是目前增长最快、最为广泛的视频传播格式。 FLV 是FLASH VIDEO的简称,它形成的文件极小、加载速度极快,有效地解决了视频文件在网络上很好的使用等问题。 下面分享在网页制作时,插入FLV格式视频的代码(兼容主流浏览器): <object class id=”clsid:D27CDB6E-AE6D-11cf…

    2018年5月14日
    4.8K0
  • 跟永哥学HTML5(6)H5语义化标记使用示例

    介绍了HTML5中新增的语义化标记article section aside hgroup header footer nav time mark figure figcaption,对各个标记给出解释和应用示例。

    2020年2月12日
    2.0K0
  • 第4课:字体

    这一课,你将学习字体以及如何用CSS来设置字体。我们还会考虑如何解决“网站所选的字体仅当访问者的PC上安装有该字体时才会被显示”这一难题。本课将对下列CSS属性进行讲解: font-family font-style font-variant font-weight font-size font 字体族[font-family] CSS属性font-fami…

    2020年2月22日
    2.2K0

发表回复

登录后才能评论