使用CSS的resize属性实现div拉伸

　　效果图：
　　核心点：p宽度自适应宽度自适应width默认情况下，块级元素不设置宽度，默认为整个屏幕宽度或者和父级同宽如果元素脱离了文档流（浮动或者定位），那么元素的宽度由元素的内容决定cssresize属性相关介绍：MDNresize生效的条件：不支持内联元素；块级元素，需要overflow属性的计算值不是visible。
　　整体布局！resizable用于拉伸的工具！content要展示的内容区域contentcontainer父容器，用于控制脱离文档流，然其宽度随着拉伸大小而决定resizable可以拉伸的容器，从而可以控制父容器的宽度content真正展示的容器，其宽度随着父级而定
　　基础知识，拉伸区域的实现，右下角出现可拉伸图标。content｛width：200px；height：200px；resize：horizontal；cursor：ewresize；overflow：hidden；必须要配合overflow来使用resize，否则拉伸图标无法显示border：1pxsolidred；｝content
　　限制拉伸尺寸通过设置minwidth、minheight、maxwidth和maxheight可以限制拉伸尺寸。
　　所有代码！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metahttpequivXUACompatiblecontentIEedgemetanameviewportcontentwidthdevicewidth，initialscale1。0titleDocumenttitlestyle。container｛position：relative；脱离文档流float：left；｝。resizable｛width：200px；height：200px；overflow：scroll；resize：horizontal；cursor：ewresize；opacity：0；minwidth：200px；盒子宽度最小为200px｝更改拖拽图标的大小和父容器一样大。resizable：：webkitscrollbar｛width：20px；height：200px；｝使用定位，将容器定位到父容器的正中间，跟着父容器的大小改变而改变。content｛margin：0；height：200px；position：absolute；top：0；留出5px为了鼠标放上去可以显示拖拽right：5px；bottom：0；left：0；border：1pxsolid；｝styleheadbody！resizable用于拖拽的工具！content要展示的内容区域contentbodyhtml
　　层级图