Div 浮层效果

本文深入探讨了DIV元素的style属性,重点介绍了overflow、width、height、color、font-size、line-height、border、font-weight、font-family、background等属性的使用方法,并详细解释了position属性在创建悬浮层效果时的作用。通过实例分析,帮助开发者理解如何灵活运用这些属性来优化网页布局和视觉效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

DIV的Style属性,主要设置如下:

  overflow(溢出控制):visible(默认,可见)、auto(自动)、scroll(显示滚动条);

  width(宽度):数值;

  height(高度):数值;

  color(字体颜色):色彩代码;

  font-size(字体大小):数值;

  line-height(行高):数值;

  border(边框):宽度、类型和颜色,类型主要支持以下几种:none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset;

  font-weight(字体粗细):normal、bold、bolder、lighter;

  font-family(字体类型):Arial、Tahoma、Verdana、仿宋_GB2312、黑体、楷体_GB2312、隶书、宋体、幼圆;

  background(背景颜色):色彩代码;

  scrollbar-base-color,scrollbar-face-color,scrollbar-track-color,scrollbar-darkshadow-color,scrollbar-highlight-color,scrollbar-shadow-color,scrollbar-3dlight-color,scrollbar-arrow-color(滚动条各部分的颜色):色彩代码;

  filter:chroma(COLOR=转换成透明的颜色)(chroma过滤器):色彩代码,该颜色将转换成透明效果;

  word-break(断字):normal(默认,正常断字)、keep-all(严格不断字)、break-all(严格断字);

  direction(文字方向):ltr(默认,从左向右)、rtl(从右向左)。

默认的属性值都是static,静态。就不用多说了。最关键的是
relative(相对)以及absolute(绝对)。
往往我们如果是COPY别人的代码,会把absolute属性与left、top配合起来制作相关的“悬浮层”效果。然而有时候我们需要针对某一个容器的悬浮效果,而不是针对窗口的。这时候通过高度、宽度的计算不但麻烦,而且几乎无法完美实现效果。我一开始也无能为力,后来发现只要把其上一级的样式属性position设置为relative就可以了。

也就是说,position的属性值的效果,直接受其容器样式中position属性值影响。
例如如下A-B的嵌套结构

<div id="A">
 <div id="B">
 </div>
</div>

当A的position为relative时,B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档,而是针对id为A的这个div了。

这样在开发一些基于B/S应用程序的时候,就能很方便的添加一些UI元素,例如某一个活动层的关闭按钮等


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值