整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
建企业网站时为什么需要使用iframe自适应高度呢？其实就是为了美观，要不然iframe和窗口长短大小不一，看起来总是不那么舒服，自适应高度对于用户体验度的提升尤为重要。网上关于iframe高度自适应的代码有很多，但比较杂乱，有一些过于复杂，有一些存在明显错误。缘由心生给出了一段修改后的精简版本，感觉不错，并简单修正了其中一处Opera下的错误。
iframe框架自适应高度
首先设置样式:body{margin:0; padding:0;}
如果不设置body的margin和padding为0的话，页面上下左右会出现空白。
html代码如下：
<iframe src="https://www.371jianzhan.com" id="myiframe" scrolling="no" onload="changeMyFrameHeight()"></iframe>
js代码也得跟着改：
function changeMyFrameHeight(){
var ifm= document.getElementById("iframepage");
ifm.height=document.documentElement.clientHeight;
}
window.onresize=function(){
changeMyFrameHeight();
}
window.onresize的作用就是当窗口大小改变的时候会触发这个事件。
所以，建公司网站使用此方法可以完美的、真正的让iframe自适应高度了，试试看吧，并且兼容多种浏览器。
用JavaScript实现页面滑动到指定位置加载动画。
若页面滚动到class名为group-pic的元素的位置时开始加载
原理： 1.获取浏览器窗口的高度；
2.获取页面滚动的高度；
3.获取页面距离文档（document）顶部的高度
offset().top具体指的是距哪里的高度呢？
一些获宽高度的属性：
网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;
obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。
obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。
1.offsetTop : 当前对象到其上级层顶部的距离.
不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.
2.offsetLeft : 当前对象到其上级层左边的距离.
不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.
3.offsetWidth : 当前对象的宽度.
与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值
4.offsetHeight : 与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值
言
由于前端所设计的领域太多，每篇文章所能讲述的知识点太多，对于读者来说不太好消化，因此以后基本是采用一篇文章一个知识点来写作。
今天这篇文章主要讲解css中a标签的高度和宽度问题。
css
问题描述
在采用div+css的方式布局页面时，对于超链接a标签，无法设置其高度和宽度，即使对其设置了width和height属性，也不会生效。
我们通过如下例子来看看。
给a标签设置了如下css属性。
css属性
但是从下图可以看出，a标签的高度和宽度没有发生变化，仍然是122px*22px。
实际效果
问题原因
为什么会出现这个情况呢？
因为a标签属于行内元素，行内元素是无法直接设置高度和宽度的。
遇到这个问题，我们该怎么解决呢，主要有以下几个方法。
解决方法1-设置块级元素
既然行内元素无法设置高度和宽度，那么我们将其设置为块级元素呢？
我们对a标签设置以下的样式。
设置display:block
我们可以看出a标签的高度和宽度发生了变化，而且在设置为块级元素后，占据了一整行的位置。
高度发生变化
解决方法2-设置浮动
通过将a标签设置为浮动状态，同样可以改变其高度和宽度。
我们给a标签设置以下css样式。
设置为浮动元素
我们可以看出a标签的高度和宽度发生了变化，并且其占据的宽度和设置的width属性一样，与方法1呈现的不一样。
改为浮动元素
方法3-设置padding属性
在设置padding属性的时候，不能直接改变a标签的高度和宽度，实际是一种模拟的状态。
而且需要注意的是在设置padding-top和padding-bottom时是不生效的，即使从控制台看元素显示占据了空间，但不会影响页面的布局。因此在设置padding属性时，实际只会影响到a标签的宽度。
我们给a标签设置以下padding属性。
设置padding属性
我们可以看出a标签占据的高度和宽度发生了变化，但是实际只是宽度占据的空间发生变化，高度不变。
设置padding属性
结束语
今天这个简单的知识点：设置a标签的高度和宽度，大家都学会了吗？
*请认真填写需求信息，我们会在24小时内与您取得联系。
