分享CSS定位设置实例之盒子的定位

2024-04-05 分类：网站建设

[html] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/reset.css" rel="stylesheet" type="text/css" /> <link href="css/layout.css" rel="stylesheet" type="text/css" /> <title>无标题页</title> </head> <body> <div id="wraper"> <h3> 热播电影</h3> <div id="film"> <img src="images/06.jpg" width="190" height="254" alt="电影封面" /> <div> </div> <div> 忠犬八公的故事</div> </div> </div> </body> </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/reset.css" rel="stylesheet" type="text/css" /> <link href="css/layout.css" rel="stylesheet" type="text/css" /> <title>无标题页</title> </head> <body> <div id="wraper"> <h3> 热播电影</h3> <div id="film"> <img src="images/06.jpg" width="190" height="254" alt="电影封面" /> <div> </div> <div> 忠犬八公的故事</div> </div> </div> </body> </html>

三、CSS

[css] #wraper { text-align: center; }

#film { position: relative; width: 190px; height: 254px; } #film .top { position: absolute; top: 0; left: 0; width: 53px; height: 48px; background: url(../images/p_dot.png) 0px -1027px; } #film .filmname { position: absolute; bottom: 0px; left: 0px; width: 100%; text-align: center; color: Red; font-size: 24px; font-family: 华文隶书; font-weight: bolder; }

#wraper { text-align: center; }

#film { position: relative; width: 190px; height: 254px; } #film .top { position: absolute; top: 0; left: 0; width: 53px; height: 48px; background: url(../images/p_dot.png) 0px -1027px; } #film .filmname { position: absolute; bottom: 0px; left: 0px; width: 100%; text-align: center; color: Red; font-size: 24px; font-family: 华文隶书; font-weight: bolder; } 【基础知识】

CSS中的属性position常用的定位主要有：

值描述 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative 生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 inherit 规定应该从父元素继承 position 属性的值。

【说明】

1、实例图片来自迅雷看看网站http://movie.kankan.com/type,order/movie,rat/，小图片由于是很多图片构成的，因此设置背景的时候，采用了定位：

background: url(../images/p_dot.png) 0px -1027px;

2、小图片和文字要相对于<div id="film">进行绝对定位，因些，需要设定position: relative;，虽然实际上并没有给定它的left、right、top和bottom值。

3、如果没有这个非默认定位，也就是非static定位，absolute定位的参照物会是body，也就是窗体。

4、absolute和relative的区别，主要是定位的参照物不同，relative的参照物是它本身的正常位置。

本文来自成都品牌网站建设网站设计公司-创新互联

标题名称：分享CSS定位设置实例之盒子的定位
标题链接：https://www.cdcxhl.com/news41/322341.html

成都网站建设公司_创新互联，为您提供面包屑导航、响应式网站、定制网站、企业网站制作、自适应网站、网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容