div的总结

最新推荐文章于 2021-07-03 18:15:07 发布

yibuyimeng

最新推荐文章于 2021-07-03 18:15:07 发布

阅读量747

点赞数

分类专栏：项目中总结的前台知识点文章标签： div 前台标签

本文链接：https://blog.youkuaiyun.com/yibuyimeng/article/details/30069023

版权

项目中总结的前台知识点专栏收录该内容

1 篇文章

订阅专栏

本文介绍了前端开发中DIV标签的应用技巧，包括盒模型的理解、margin与padding的区别、overflow属性的作用及鼠标样式的设置方法。

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

最近写的前台标签div经验都在这里面

       <span style="font-weight: bold; margin: 0.5em 0em 0em 0.5em;">请选择部门</span>
       <div style="margin: 1em 0em 0em 0.5em; padding: 0em 0em 0em 0.5em;" >
           <div id="departmentTree" name="departmentTree" style="background: white; width: 40%;"></div>
       </div>
   </div>
   <div style="height: 15%;">
       <div style="width: 20%">
           <div >
               <button id="textButton1" οnclick="open_selectDate()">
                   <span class="k-icon k-i-plus "></span>提交
               </button>
               <button id="textButton2" οnclick="open_selectDate()">
                   <span class="k-icon k-i-plus "></span>取消
               </button>
           </div>
       </div>

</div>

看看css盒模型，下图！

margin是 DIV与周边元素的距离

padding是 DIV里边内容与这个DIV的距离

1)margin的四个值顺序：从上右下左，顺时针方向。

2)overflow从字面意义上来讲就是溢出的意思，

换句话说，你有个层，但是里面的内容，图片或者文字要比层大，overflow就是针对这种情况进行处理的。
包含4个属性值，visible,hidden,auto,scroll
visible就是超出的内容仍然正常被显示出来。
hidden就是超出的内容被隐藏。
auto是默认值，根据内容剪切或者加滚动条。
scroll就是总加滚动条。

css定义鼠标样式，其中cursor属性包括
auto: 正常鼠标 
crosshair: 十字鼠标 
default: 默认鼠标 
pointer: 点状鼠标 
move: 移动鼠标 
e-resize,ne-resize,nw-resize,n-resize,se-resize,sw-resize,s-resize,w-resize: 改变大小鼠标 
text: 文字鼠标 
wait: 等待鼠标 
help: 求助鼠标 
progress: 过程鼠标 
inherit: 继承