一、IE和FF下document.body对象的clientHeight，offsetHeight，scrollHeight属性的差别。
clientHeight
在IE和FF下，该属性没什么差别，都是指浏览器的可视区域，即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度。
offsetHeight
在IE下，offsetHeight也是浏览器可视区域的高（包括边线）
在FF下，offsetHeight是页面具体内容的高度
scrollHeight
在IE下，scrollHeight 是页面具体内容的高度，可以小于clientHeight
在FF下，scrollHeight 是网页内容高度，不过最小值是clientHeight
二、下面是跨浏览器取得当前页面的高度的解决方法。
复制代码 代码如下:
function getPageSize()
{
var body = document.documentElement；
var bodyOffsetWidth = 0
var bodyOffsetHeight = 0
var bodyScrollWidth = 0
var bodyScrollHeight = 0
var pageDimensions = [0,0]
pageDimensions[0]=body.clientHeight
pageDimensions[1]=body.clientWidth
bodyOffsetWidth=body.offsetWidth
bodyOffsetHeight=body.offsetHeight
bodyScrollWidth=body.scrollWidth
bodyScrollHeight=body.scrollHeight
if(bodyOffsetHeight >pageDimensions[0])
{
pageDimensions[0]=bodyOffsetHeight
}
if(bodyOffsetWidth >pageDimensions[1])
{
pageDimensions[1]=bodyOffsetWidth
}
if(bodyScrollHeight >pageDimensions[0])
{
pageDimensions[0]=bodyScrollHeight
}
if(bodyScrollWidth >pageDimensions[1])
{
pageDimensions[1]=bodyScrollWidth
}
return pageDimensions
}
三、页面上必须放置一个div，作为遮罩层，下面是这个遮罩层的css样式。
复制代码 代码如下:
.lockDiv
{
position:absolute
left:0
top:0
height:0
width:0
border:2 solid red
display:none
text-align:center
background-color:#DBDBDB
filter:Alpha(opacity=60)
}
四、在客户端使用下面的javascript用遮罩层将整个页面封闭。
复制代码 代码如下:
var sandglassSpan = 1
var timeHdl
function DisablePage()
{
var ctrlSandglass = document.getElementById("divSandglass")
if(sandglassSpan==0)
{
window.clearTimeout(timeHdl)
ctrlSandglass.style.display = "none"
document.body.style.cursor = 'auto'
sandglassSpan = 1
}
else
{
document.body.style.cursor = 'wait'
var pageDimensions = getPageSize()
ctrlSandglass.style.top = 0
ctrlSandglass.style.left = 0
ctrlSandglass.style.height = pageDimensions[0]
ctrlSandglass.style.width = pageDimensions[1]
ctrlSandglass.style.display = "block"
timeHdl = window.setTimeout(DisablePage,200)
}
}
五、如果页面上使用了ASP.net的Validator控件，那么应该使用如下的javascript。
复制代码 代码如下:
var sandglassSpan = 1
var timeHdl
function DisablePageHaveValidator()
{
var ctrlSandglass = document.getElementById("divSandglass")
if(false == Page_IsValid)
{
sandglassSpan = 0
}
if(sandglassSpan==0)
{
window.clearTimeout(timeHdl)
ctrlSandglass.style.display = "none"
document.body.style.cursor = 'auto'
sandglassSpan = 1
}
else
{
document.body.style.cursor = 'wait'
ctrlSandglass.style.display = "block"
var pageDimensions = getPageSize()
ctrlSandglass.style.top = 0
ctrlSandglass.style.left = 0
ctrlSandglass.style.height = pageDimensions[0]
ctrlSandglass.style.width = pageDimensions[1]
timeHdl = window.setTimeout(DisablePageHaveValidator, 200)
}
}
HTML（超文本标记语言）和CSS（级联样式表）是用于构建Web页面的两项核心技术。HTML为各种设备提供页面的结构，为CSS提供（视觉和听觉的）布局。与图形和脚本一起，HTML和CSS是构建网页和 Web应用程序的基础。
HTML称为超文本标签语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
扩展资料：
CSS具有以下特点：
1、丰富的样式定义
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
2、易于使用和修改
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。
3、多页面应用
CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
参考资料：百度百科——HTML
百度百科——css
概念上两者非常容易混淆，但完成的效果是一样的，需记住哪个是无色抠取，哪个是黑色抠除。
再者还有个裁剪，只是做裁切，没有对半透明情况的处理。
这样一说就知道，本文阅读起来可能是会有点乱的。
那么前端方法中 如何实现 ，又各 有哪些应用场景 呢？
比较容易搜到的，也是用得最多的，强得一批。
现在是只有遮罩功能的， mask 指定的是下层形状，本元素及其所有子级为上层图案。
<small>以后的发展可能会通过 mask-composite 实现蒙版，小期待一下吧。</small>
遮罩嘛，即有色就显示，无色则隐藏。
rgba(0,0,0,0)、tranpsarent，png 图片中的透明 或 无色 就抠除。
mask 和 background 的设置非常类似，也可以缩写：
mask-image / mask-repeat / mask-position / mask-size / mask-origin / mask-clip
mask-image 也和 background-image 一样支持 url， gradient，image-set，element 等等。
举几个栗子：
至于剩下的 mask-mode / mask-type / mask-composite 浏览器支持还不太妙，暂可以不考虑。
但功能上却是强大，需要更多了解还请自行翻阅 文档 。
PS： 兼容性 方面虽然一片红，IE 什么的抛弃掉，实验下来其实还不错。写上 -webkit-mask 基本都能用。
PPS：firefox 中动画时 mask-size 小于 100% 会不显示，但定值可以，原因不知。
个人有点莫名的习惯，不管做什么效果，都会往 SVG 上想一想，可能源于它强大的功能吧。
相比 html+css 多了很多特性，如路径/线条的设置/诸多滤镜/视图限定等；
相比 canvas 多了一些 dom 上的便捷操作，如事件。
SVG 可以用 mask 来实现 蒙版 ，用 clipPath 来实现 裁剪 （下文会讲）。
区分一下，svg mask 为蒙版，白色为显示；css mask 为遮罩，有色为显示。
mask 蒙版内可以包裹透明图片或文字。
但使用蒙版的元素，却莫名不能是 image，这就很完蛋呀，有待研究。
如果 css 的 mask 适用于图片和渐变等的话，那 background-clip:text 就适用于文字。
字面意思，将背景裁切成文字范围。
另外，background-clip 还可以设 content-box，也是不错的功能，
默认 padding-box，border-box 有上边框不被修改的 BUG。
注： 兼容性 上，明文规定要加 -webkit-。顺便抛弃 IE。
很多文章误以为是 text-fill-color 实现了遮罩功能，其实是 background-clip:text 呀！
clip 在 canvas 中本来的作用是切一块画布独立出来。
拿来做遮罩效果也是可以的，但并非真的遮罩，只是裁剪，因为它不是按有色无色来判断显示的。
还可以用 beginPath, lineTo 等线条操作来形成图形。
注：fillRect 和 strokeRect 是无法被切出来的，要用 rect。
注：为了避免影响其他地方，用 save 和 restore 包起来就行了。
注：文字遮罩用 clip 是无法实现的。
修改 canvas 的渲染规则。比如后写的盖住前面的，改成后写的放到低层之类的。
这些规则中有一个 source-in，就能实现 遮罩 （按黑白色来判断显隐）。
如果你用的 strokeRect 和 fillText 那绘制出来的也是相应效果哟。
如果前者是半透明的，覆盖的后者渲染出来也会是半透明的。
如果前者是半透明的 PNG 图片，覆盖的后者出来的也会是半透明，强无敌。
注：globalCompositeOperation 的默认值是 source-over，用完了别忘了改回来，不然会影响后续操作。
全部规则效果一览： https://foreverz133.github.io/demos/single/globalCompositeOperation.html
其中有一些可以拿出来提一下，挺好玩的。
source-in：交叉的部分渲染后者
destination-in：交叉的部分渲染前者
destination-out：去掉交叉的部分
destination-over：后者放至下层
主要还是以裁剪为主，裁剪当然是不会根据形状的颜色什么的来判断显隐的咯。
css 的 clip-path 是老版属性 clip 的改良版，clip 必须绝对定位，且只有矩形还只能 px。
clip-path 则支持方形/圆形/椭圆形/多边形，单位也更丰富。
我觉得 clip-path 和 border-radius 一样，改个图片或者盒子的样式又方便又爽。
但也不一样，因为是裁剪，像 border 呀子级内容呀什么的也是会被剪掉的，hover 也还是原来的尺寸。
比如盖一层镂空的五角星显示背景色呀，盖一层镂空的字呀什么的
假 DEMO： https://foreverz133.github.io/demos/single/star.html
这应该就是名副其实的遮挡层了吧，与本文其实毫无关系。
但可能你会在你不了解 mask 或需要兼容时用到。
例子： http://www.zhangxinxu.com/wordpress/2016/03/better-black-mask-guide-overlay-method/
除此之外，radial-gradient 可以完成部分类似功能，比如圆形的镂空，位置和大小设置相较也更方便。
shape-outside 仅能算作是高级版 float 扩展，也与本文毫无关系。
只是因为既然写了 clip-path 那 shape-outside 就提一下，避免有理解错误。
注：shape-outside 得是浮动元素时才有效。
注：它能设的值和 clip-path 基本一致
它并不会改变本身什么东西，形状不会变，border 等也还是原来的样子，还得结合 clip-path 来用。
它只是让其他与其贴边的元素有了一个不一样的贴边效果。
PS： 兼容性 吧，怎么说呢，回退到方形影响应该不大。
虽然 clip-path 又不像 border-radius 可以加边框阴影什么的，但其实 polygon 多边形可以有高级玩法，
比如： https://codepen.io/airen/pen/VPKQxb
文档 显示以后会支持 url 和 element 等，那就很方便了呀。顺便再期待一下 shape-inside 的出现。
你思考一下 css 的 mask / background-clip / clip-path 和 shape-outside 的使用场景，这其实很有意思。
遮罩是有色的部分显示图案，蒙版是白色的部分显示图案，裁剪只是裁成这个形状，三者的实际妙用在本文中并没有深入书写，仅算是梳理其功能和明确其区别。
还请大佬们多多分享此方面的巧妙案例咯，让小弟也开开眼。
