当内容超出div时,自动出现滚动条的条件:
    1、内容必须在div中；
    2、div要设置宽高；
    3、overflow 设置 auto；

备注：

1、overflow:auto;
    当内容宽度超出div宽度，或者内容高度超出div宽度，或者同时超出，会自动出现水平、或者垂直、或者水平和垂直滚动条；
2、overflow-x:auto;
    当内容宽度超出div宽度，自动出现水平滚动条；
3、overflow-y:auto;
    当内容宽度超出div高度，自动出现垂直滚动条；
注意：
    设置好后会自动换行；
    white-space:nowrap;	这个会强制文字在同一行显示

前几天用js实现了鼠标拖动div的功能，但是用起来不是那么便捷，于是想着把这个功能做成一个组件，使用的时候直接引入，不用再写那么多冗余代码了。

想要实现的效果

• 只要把div注册到该组件，目标div就都能随意拖动
• 可设置div能够拖动的范围

实现分析

js组件的基本写法和div拖动的逻辑就不再赘述了，前面文章已经说过了，可点击下面链接查看

宽度

$('div').width();区块的本身宽度

$('div').outerWidth(); 区块的宽度+padding宽度+border宽度

$('div').outerWidth(true); 区块的宽度+padding宽度+border宽度+margin的宽度

效果图:

核心点:

• div宽度自适应

宽度自适应 width
默认情况下, 块级元素不设置宽度, 默认为整个屏幕宽度或者和父级同宽
如果元素脱离了文档流(浮动或者定位), 那么元素的宽度由元素的内容决定

在前端开发中，我们经常需要获取元素的像素宽度，然而有些元素的宽度是通过CSS的百分比来设置的。本文将介绍如何使用JavaScript获取这种情况下的元素像素宽度。

使用JavaScript获取元素的像素宽度

在实现了可拖动div的组件后，又联想到拖拽可改变div大小的需求，话不多说先看效果，再来慢慢分析

组件分析

• 给目标div增加四周的边框，并且在边框的八个方向增加拖拽点，分别用方向的首字母组合代替
• 当鼠标落在八个点上时，鼠标形状变成向各个方向拖拽的形状