135-1821-9792
这篇文章主要为大家展示了“DIV常见任务有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“DIV常见任务有哪些”这篇文章吧。
创新互联是一家专业从事网站设计、成都网站设计的网络公司。作为专业网站设计公司,创新互联依托的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、成都全网营销推广及网站设计开发服务！
1.div显示滚动条
这个是很常见的一个任务了，基本是通过CSS去实现滚动条。
(1)垂直滚动条
设置是否显示滚动条主要是在CSS中设置下列的属性：
代码如下:
overflow：visible|auto|hidden|scroll
overflow-x：横向滚动条
overflow-y：纵向滚动条
参数的意义：
visible: 不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效。
auto: 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden: 不显示超过对象尺寸的内容
scroll: 总是显示滚动条
overflow:auto;这个表示当你内容超过div高度出现垂直的滚动条
所以我们想在需要的时候显示垂直的滚动条，可以这么实现：
代码如下:
或者
代码如下:
(2)水平滚动条
如果只想出现水平的滚动条，一般还要配合禁止换行的设置，例如：
代码如下:
(3)滚动条的外观
在IE中，主要是使用各种颜色属性：
代码如下:
scrollbar-3dlight-color:color;设置或检索滚动条亮边框颜色；
scrollbar-highlight-color:color;设置或检索滚动条3D界面的亮边颜色；
scrollbar-face-color:color;设置或检索滚动条3D表面的颜色；
scrollbar-arrow-color:color;设置或检索滚动条方向箭头的颜色；当滚动条出现但不可用时，此属性失效；
scrollbar-shadow-color:color;设置或检索滚动条3D界面的暗边颜色；
scrollbar-darkshadow-color:color;设置或检索滚动条暗边框颜色；
scrollbar-base-color:color;设置或检索滚动条基准颜色。其它界面颜色将据此自动调整。
scrollbar-track-color:color;设置或检索滚动条的拖动区域颜色
在Chrome中，基本上是使用webkit专用属性设置：
代码如下:
::-webkit-scrollbar-track-piece{
background-color:#fff;/*滚动条的背景颜色*/
-webkit-border-radius:0;/*滚动条的圆角宽度*/
}
::-webkit-scrollbar{
width:8px;/*滚动条的宽度*/
height:8px;/*滚动条的高度*/
}
::-webkit-scrollbar-thumb:vertical{/*垂直滚动条的样式*/
height:50px;
background-color:#999;
-webkit-border-radius:4px;
outline:2pxsolid#fff;
outline-offset:-2px;
border:2pxsolid#fff;
}
::-webkit-scrollbar-thumb:hover{/*滚动条的hover样式*/
height:50px;
background-color:#9f9f9f;
-webkit-border-radius:4px;
}
::-webkit-scrollbar-thumb:horizontal{/*水平滚动条的样式*/
width:5px;
background-color:#CCCCCC;
-webkit-border-radius:6px;
}
2.禁止div的事件冒泡
这个基本上都是使用标准的event.stopPropagation()方法阻止事件冒泡，当然IE除外：
代码如下:
functionBigDiv(event){
if(event.stopPropagation){
event.stopPropagation();//在基于firefox内核的浏览器中支持做法stopPropagation
}else{
event.cancelBubble=true;//基于ie的写法
}
//othercodes...
}
#B{
position:relative;
padding:5px;
top:5px;
left:5px;
}
vartop=$(event.target).offset().top;
varleft=$(event.target).offset().left;
上面只是float属性的一个简单应用。
float属性主要是用于控制元素的流向，也就是向右靠拢，还是向左靠拢。这里看一下float属性的语法：
float:none|left|right
none:默认值。对象不飘浮
left:文本流向对象的右边
right:文本流向对象的左边
为了达到某些效果，通常我们需要在某个时候取消浮动以免对别的对象造成影响，这是通过上面介绍过的那个clear属性实现的：
clear属性有四个值：
我们可以从上面看到在这里可以定义文本的文字间距、字母间距、装饰、对齐方式、缩进方式和行高等属性。举个例子来看看吧：
我们看到经过文本属性处理的文本字与字之间多了间距，行与行之间多了行高，对齐方式变成了两端对齐，并且段首又多缩进了两格。
(2).第一行相对来说不够直观，我们还可以在需换行的地方添加
（&为半角)或
来实现：
代码如下:
9.鼠标中键控制水平滚动条
在Chrome和FireFox中，一般都是鼠标中键控制垂直滚动条，如果你的DIV只有水平控制条，默认情况下，鼠标中键是不起滚动作用的，这个时候需要自己实现。
首先，挂接鼠标滚轮事件：
代码如下:
//MousewheeleventforNonFireFox
element.onmousewheel=fireElementScrolled;
//MousewheeleventforFireFox
element.addEventListener('DOMMouseScroll',fireElementScrolled,false);
这里FireFox的特殊一点，需要使用addEventListener这种方式挂接。
然后，实现fireElementScrolled方法：
代码如下:
fireElementScrolled=function(event){
varrolled=0;
if(event.wheelDelta){
rolled=event.wheelDelta;
}
else{
//Firefox:需要处理一下下
rolled=-event.detail*30;
}
varhtmlElement=document.getElementById('test');
htmlElement.scrollLeft=htmlElement.scrollLeft-rolled;
event.preventDefault();
returnfalse;
};
原理很简单，就是拿到滚轮滚动的距离，处理后给div元素的scrollLeft属性赋值即可。
10.子元素居中
(1)水平居中
普通的文字和图片居中很好办，设置父容器的CSS样式包含text-align:center;即可。
当子元素是DIV等元素的情况稍微复杂一点，以子元素为div为例，如果只有一个子div，则可以通过设置子元素的CSS样式包含margin:0auto;实现居中。例如下面的例子：
代码如下:
如果含有多个子元素，我通常是多加一层div来实现，看例子：
代码如下:
(2)垂直居中
垂直居中麻烦一点，有一种做法很简单，可以同时实现水平和垂直居中。首先给父元素写上positon:relative，这么做是为了给子元素打上position:absolute的时候不会被定位到外面去。接下去，写上子元素的height和width，某些浏览器在解析的时候如果没有这2个值的话会出现意想不到的错位。接着就是整个方法的核心，给子元素再打上top:50%;left:50%以及margin-top:一半的height值的的负数;margin-left:一半的weight值的负数。当然，这里父元素也要先写上width和height。看例子：
代码如下:
以上是“DIV常见任务有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
Copyright © 2009-2022 www.wtcwzsj.com 青羊区广皓图文设计工作室（个体工商户） 版权所有 蜀ICP备19037934号
在线咨询
在线咨询
