第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%的人还看了以下文章

  • JS实现开关效果,可单选和组选

    JS实现的checkbox开关效果,可单个打开开关,也可一次关闭所有或打开所有开关。 JS实现开关效果,可单选和组选|www.125jz.com

    2018年7月29日
    2.0K0
  • 网页制作常用正则表达式大全、正则表达式在线测试工具

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

    2018年9月12日
    3.2K0
  • 第6课:学习更多HTML元素

    到现在,你有没有独立完成过一个网页?你可以的,看看下面的例子: <html> <head><title>125建站网|www.125jz.com</title></head> <body> <h1>一级标题</h1><p>一些文字。。。</p&g…

    2018年1月20日
    2.5K0
  • 第9课:在网页中添加图像

    假如能把自己喜欢的的图像放到网页上,那就太好了。 这貌似有点难度。。。 也许是有点难度,但其实也不难,一个元素就可以搞定: 例1: <img src=”http://www.125jz.com/wp-content/uploads/2018/01/liudehua.jpg” /> 该例在浏览器中将显示如下: 你要做的只是:告诉浏览器你要插入一张图…

    2018年1月20日
    5.2K0
  • 3个超酷的CSS3图片动画特效:图片变圆角,放大,旋转

    本实例制作需要学习《CSS3 transition transform属性及实例详解》,学完后可先练习CSS3 transform:rotate()制作旋转图片 See the Pen 三个CSS3图片动画特效 by 江山如画 (@jgyzhr)on CodePen.

    2020年1月1日
    1.7K0
  • CSS3 transition transform属性及实例详解-鼠标放到图片上图片等比例放大

    CSS3的transform:scale()可以实现按比例放大或者缩小功能,transform呈现的是一种变形结果。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡,transition呈现的是一种过渡,是一种动画转换过程,如渐显、渐弱、动画快慢等。 transiton:过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间; t…

    2018年8月1日
    3.3K0

发表回复

登录后才能评论