第一阶段 XHTML.定位样式2

一定位布局(Position)
1.格式
position:static默认值|
fixed固定|
absolute绝对|
relative相对
2.static默认值:默认文档流(占位)
3.fixed固定
说明:
(1)脱离文档流不占位
(2)默认坐标浏览器左上角,通过 top,
left,right,bottom属性来移动
元素位置
(3)有滚动条时,元素位置被固定
4.absolute绝对定位
说明:
(1)脱离文档流不占位
(2)默认坐标浏览器左上角,通过 top,
left,right,bottom属性来移动
元素位置

5.relative相对定位
(1)默认坐标自身文档的左上角,通过 top,
left,right,bottom属性来移动
(2)自身文档占位
说明:
工作中:相对定位和绝对定位结合实现
原理给父元素或祖先元素一个相对定位,将坐标点
定在父元素或祖先元素左上角,然后对子元素绝对定位
对子元素通过 top,left,right,bottom属性来移动
元素
6.z-index 实现层排序
说明:
(1)只能用在有fixed,absolute,relative
属性中
(2)可以有 正值,负值 默认值0
(3) 没单位,值越大元素在上面

7透明(Opacity)
(1)opacity:0~1;
说明: w3c标准的浏览器 IE7.0以上等
(2)filter:alpha(opacity=1~100);
说明: IE浏览器支持

8.hack技术(调各个浏览器的兼容)

(1)条件注释法(只针对IE)
<!--[IF IE]> IE浏览器代码<![ENDIF]-->
<!--[IF IE 6]> IE6.0浏览器代码<![ENDIF]-->
(2)属性前缀法
_属性 : 只有IE6.0支持
*属性 : IE6.0,IE7.0支持
(3)选择器前缀法
*html 选择器{...} IE6.0支持
*+html 选择器{...} IE7.0支持

9.overflow 溢出

overflow:visible默认值
hidden|
auto|
scroll

hidden 溢出隐藏: 不显示超出对象尺寸的内容
auto :必须时对对象实现裁剪或显示滚动条
scroll:总显示滚动条












转载于:https://www.cnblogs.com/guowangdeyanjiang/p/5450636.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值