在前端面试中，CSS相关的问题一般不会问的太多，但是有一个问题经常被选为面试题。那就是：div 水平垂直居中你有哪些办法？
这道题可以考察候选人对CSS布局方式的理解，而且非常贴近日常工作，比较适合作为面试题。今天我就帮大家梳理一下CSS实现div水平垂直居中的方法，建议收藏。
为了演示，首先创建两个嵌套的 div，然后设置一下大小和背景颜色这样比较容易看出效果。代码如下：
2024年10月20日
在前端面试中，CSS相关的问题一般不会问的太多，但是有一个问题经常被选为面试题。那就是：div 水平垂直居中你有哪些办法？
这道题可以考察候选人对CSS布局方式的理解，而且非常贴近日常工作，比较适合作为面试题。今天我就帮大家梳理一下CSS实现div水平垂直居中的方法，建议收藏。
为了演示，首先创建两个嵌套的 div，然后设置一下大小和背景颜色这样比较容易看出效果。代码如下：
2024年10月20日
原理:根据CSS3 transform 属性，按比例缩放（scale(x,y)；$(window).width()是获取当前设备窗口的宽度.
js代码：
2024年10月20日
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
2024年10月20日
当内容超出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; 这个会强制文字在同一行显示2024年10月20日
前几天用js实现了鼠标拖动div的功能，但是用起来不是那么便捷，于是想着把这个功能做成一个组件，使用的时候直接引入，不用再写那么多冗余代码了。
js组件的基本写法和div拖动的逻辑就不再赘述了，前面文章已经说过了，可点击下面链接查看
2024年10月20日
宽度
$('div').width();区块的本身宽度
$('div').outerWidth(); 区块的宽度+padding宽度+border宽度
$('div').outerWidth(true); 区块的宽度+padding宽度+border宽度+margin的宽度
2024年10月20日
前端web页面中，js可以很方便的获取div元素的高度和宽度，那么这篇文章就说一说原生JS与JQ如何快速的获取DIV元素的高度和宽度的方法。
js获取div元素的高度与宽度要用的 clientHeight 与 clientWidth方法
clientHeight：返回元素的可视高度
clientWidth：返回元素的可视宽度
示例代码：
2024年10月20日
效果图:
核心点:
宽度自适应 width
默认情况下, 块级元素不设置宽度, 默认为整个屏幕宽度或者和父级同宽
如果元素脱离了文档流(浮动或者定位), 那么元素的宽度由元素的内容决定