定位问题

position 定位属性,检索对象的定位方式;

一、语法:position:static /absolute/relative/fixed

取值:

1、static:默认值,无特殊定位,对象遵循HTML原则;

2、absolute:绝对定位,将对象从文档流中拖离出来,使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位;如果不存在这样的父对象,则依据html(根元素),而其层叠通过z-index属性定义;

3、relative :相对定位,对象不可层叠,将依据right,top,left,bottom(相对定位)等属性在正常文档流中偏移位置;

4、fixed:固定定位,对象定位遵从绝对定位方式(absolute);但是要遵守一些规范(IE6浏览器不支持此定位)根据浏览器的窗口来定义自己的位置。

二、绝对定位和相对定位的区别

1、参照物不同绝对定位的参照物是包含块,相对定位的参照物是元素本身位置;

2、绝对定位将对象从文档流中拖离出来因此不占据空间,相对定位不破坏正常的文档流顺序无论是否进行移动,元素仍然占据原来的空间。

三、包含块的概念及作用
包含块是绝对定位的基础,包含块就是为决定定位元素提供坐标,偏移和显示范围的参照物,即确定绝对定位的偏移起点和百分比 长度的参考;

默认状态下,html是一个大的包含块,所有绝对定位的元素都是根据根元素来定自己所处的位置和百分比大小的显示的,如果我们定义了包含元素为包含块以后,对于被包含的绝对定位元素来说,就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。

定义元素为包含块:给绝对定位元素的父元素添加声明position:relative;

如果我们的父素设置了position:absolute;那么子元素也会相对父元素来定义自己的位置。

四、定位元素层叠属性:

z-index : auto | number

检索或设置对象的层叠顺序。

auto:默认值。遵从其父对象

number:无单位的整数值。可为负数

说明:

1)较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值,那么将依据它们在HTML文档中声明的顺序层叠。
此属性仅仅作用于 position 属性值为 relative 或 absolute,fixed 的对象。

五、命名锚点链接的应用

定义:是网页制作中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。

命名锚点链接的应用:

1)命名锚点的作用:在同一页面内的不同位置进行跳转。

2)给元素定义命名锚记名

语法:<标记 id="命名锚记名"> </标记>

3)命名锚记连接

语法:<a href="#命名锚记名称"></a>

三、圆角切图

1、纯css 书写

2、切图拼接;

四、Flash和marquee(滚动字幕)

1、插入flash

1)语法:

<object width="value" height="value">
<param name="movie" value="flash路径及全称" />
<embed width="value" height="value" src="flash路径及全称"></embed>
</object>

2)将flash背景设置为透明

<embed wmode="transparent" />

给<embed>标记添加属性:wmode="transparent"

说明:flash源文件格式.fla,

导出影片为.swf,

创建播放器格式为.exe.

gif格式:.gif

3)IE中不显示flash,可做如下操作:

A.下载安装flash player;

B.打开IE浏览器,选择工具菜单--Internet选项----安全----低。

2、滚动字幕的应用:

<marquee

behavior(行为)="scroll(滚动)/alternate(晃动)"direction(方向)="up(从下向上)/down(从上向下)/left(从右向左)/right(从左向右)"

scrollamount(滚动速度)="value"height="value(上下滚动范围)"width=""(左右滚动范围)>
内容
</marquee>

五、滚动条

1,Overflow内容溢出时的设置

属性:

overflow 水平及垂直方向内容溢出时的设置
overflow-x 水平方向内容溢出时的设置
overflow-y 垂直方向内容溢出时的设置

以上三个属性设置的属性值:

visible、scroll、hidden、auto、

visible 默认值。使用该值时,无论设置的"width"和"height"的值是多少,其中的内容无论是否超出范围都将被强制显示。

hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。

scroll 无论内容是否超越范围,都将显示滚动条。

auto 当内容超出范围时,显示滚动条,否则不显示。

应用:

1)没有水平滚动条:
<div style="overflow-x:hidden">test</div>

2)没有垂直滚动条
<div style="overflow-y:hidden">test</div>

3)没有滚动条
<div style="overflow-x:hidden;overflow-y:hidden" 或

style="overflow:hidden">test</div>

4)自动显示滚动条
<div style="height:100px;width:100px;overflow:auto;">test</div>

2、自己定义滚动条的颜色

Body {
scrollbar-arrow-color: #f4ae21; /*图6,三角箭头的颜色*/
scrollbar-face-color: #333; /*图5,立体滚动条的颜色*/
scrollbar-3dlight-color: #666; /*图1,立体滚动条亮边的颜色*/
scrollbar-highlight-color: #666; /*图2,滚动条空白部分的颜色*/
scrollbar-shadow-color: #999; /*图3,立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: #666; /*图4,立体滚动条强阴影的颜色*/
scrollbar-track-color: #666; /*图7,立体滚动条背景颜色*/

scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/

}

时间: 2024-10-03 13:38:48

定位问题的相关文章

【从0到1学CSS】定位问题一(盒模型,浮动)

引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽度未知,且两边div自适应宽度. 第一种实现方法,是借助css3的新属性calc,实现代码如下: body { margin: 0; padding: 0; font-size:0; } .left_div { background-color: #62FF09; /*calc是css3属性可以动态

解决 IE6 position:fixed 固定定位问题

实现<div id="ad"></div>固定在窗口左下角 一般的 position:fixed; 实现方法#ad{ position:fixed; bottom:0; left:0px;} 在 IE6 中实现 position:fixed; 的办法#ad{ position:fixed; bottom:0; left:0px; _position:absolute; _bottom:auto; _top:expression(eval(document.doc

太阳影子定位问题研究

太阳影子定位问题研究 摘要 本文主要研究影长与日期.时间及地点的关系.通过其中某组数值,去刻画出其他变量的大致范围. 对于第一问,由于日地距离随公转而改变,故我们需要寻找出一个合适的方程去描述不同日期下的日地距离,从而建立合理的空间坐标系,确定当下太阳在坐标系下的空间坐标.又根据给定地点的经纬度,我们可以建立影长方程,从而用MATLAB绘画出影长图像. 对于第二问,所给数据的影长变化,可以推测出测量地处于下半天(正午12时至凌晨0时),由此可以推算出不符合要求的地区,从而缩小数据量.利用第一问所

系统性能优化总结篇 (一)快速定位问题

很多创业型企业,都是追求快速把产品推向市场.也因这个因素,在设计和研发过程中,往往追求快为目标,在架构选型.代码编写等环节往往疏忽了性能的考虑.但这种现象是属于正常的,一个好的产品是在客户使用下不断重构成长起来的. 产品的长期运行中,会随着数据的不断庞大.操作用户的不断增加及网络慢等元素,会慢慢暴露出系统运行慢的问题.在这里给大家分享一些在实际操作中如何快速定位问题的方方法. 1.现象: 1.用户会经常反馈在某个时间节点系统运行速度非常卡 2.在某次系统升级后,某个查询功能突然非常慢或某个功能无

鼠标定位问题总结

鼠标事件发生时的鼠标定位问题即Mouse Position,由于标准的滞后及各个浏览器厂商的实现不同,目前没有完美的解决方案. 该问题首先受到不同浏览器的事件模型有不同的实现方式的影响: IE浏览器中,有一个显式的window.event对象,可以随时取用.W3C兼容浏览器中,使用隐式对象,以第一个参数event的形式传递给事件处理函数. 其次,不同浏览器中Event对象的位置相关属性也有差别: screenX 相对于电脑屏幕的左上角,鼠标的X坐标.标准属性,都支持.screenY 相对于电脑屏

ANE-调用原生组件横屏定位问题

当我们的应用是横的时候,利用ANE调用原生组件如果处理不当,掉出来的组件会是竖的.那么我么要怎么做才能免去自己手动旋转组件这个破事呢.其实很简单 webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 900,700)];//调用原生UIWebView UIView *rootView= [[[[UIApplication sharedApplication] keyWindow] rootViewController] view]

android:程序无响应,你该如何定位问题?

如果MainThread长时间无响应,系统会提示"XXX无响应",然后用户会关闭.那么,如何定位问题呢?无响应并不像Crash,它抓取不到异常日志,通常我们需要调试,才能定位问题.如何调试呢? 1.在Eclipse Devices窗口,选中app对应的包名,然后点击debug图标(绿色的小虫子),然后切换到Debug视图 2.切换视图之后,可以看到debug下,app的线程列表 3.对于main线程(第一个线程),选中,并将其挂起Suspend 4.然后我们就可以看到,Suspend之

ORA-02298 定位问题

建立外键约束时报错. ORA-02298错误:在父表里找不到子表里存在的数据.引用的数据不存在. 定位问题数据的SQL语句如下: SELECT A.* FROM CHILD_TABLE_NAME A WHERE NOT EXISTS (SELECT 1 FROM PARENT_TABLE_NAME B WHERE A.FOREIGN_KEY = B.PRIMARY_KEY); A为数量多的表,B为被引用的表,被引用的是B的主键,通常关联B的Id

利用vim查看日志,快速定位问题

起因 在一般的情况下,如果开发过程中测试报告了一个问题,我一般会这么做: 1.在自己的开发环境下重试一下测试的操作,看看能不能重现问题.不行转2 2.数据库连接池改成测试库的地址,在自己的开发环境下重试一下测试的操作,看看能不能重现问题.不行转3 3.去测试环境查看日志.分析问题. 快速定位问题 去测试环境查看日志,分析问题的时候.因为我Linux命令也不是很熟悉.所以查看日志内容比较累..我以前的做法是下载日志以后在windows环境下利用文本编辑器定位问题. 但是有时候日志比较大,有几百MB

iOS 集成高德地图无法定位问题

1.最近的一个项目需要地图定位,.之前使用高德地图可以定位,最近的这个项目,又一次需要集成时,却无法定位.郁闷一上午.后来仔细检查,发现问题所在原因: 之前集成高德地图我是手动配置的,这一次我选择了自动配置,使用cocopods命令方式,集成的.最终发现原因是: 需在info.plist中追加NSLocationWhenInUseUsageDescription或NSLocationAlwaysUsageDescription字段 OK,解决无法定位问题