我最近新学会的XXX

最新推荐文章于 2022-08-10 19:55:58 发布

iteye_11097

最新推荐文章于 2022-08-10 19:55:58 发布

阅读量79

点赞数

分类专栏：前端技术文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_11097/article/details/82131592

版权

前端技术专栏收录该内容

52 篇文章 0 订阅

订阅专栏

最近忙上，忙下，忙里，忙外，活儿做了不少。这里有重复劳动，也有新奇体验。重复的就无需再说，记录下新近学到的一些东西，以免以后遇到又去找来找去，baidu google的。。。。

内容都很基础，涉面也很杂，如果这个博客不小心被哪个大牛看到，不要嘲笑我。。。。

iframe相关：

两站交互问题：

使用背景：A站想要与B站进行交互
实现方式：在A站的body中增加iframe，src设置为B站的地址，iframe要设置id，以便查找。iframe中的网站为iframe外的网站的子窗口，反之，外面的是里面的父窗口。
调用方式：子窗口程序中调用父窗口对象—— window.parent/ window.top; 父窗口调用子窗口中对象——document.getElementById('iframe_main').contentWindow
实现前提： A站和B站不可跨域。如果跨域，iframe中的parent和top属性将为undefined。
如何保证同域：在html的head中增加 <script>document.domain='xxx.com';</script>
如果想显示iframe中网站的一部分，使用如下方式：

<table width="560" border="0" align="center" cellpadding="1" cellspacing="1"> 
<tr> 
<td> 
<p align="center" style="margin-top: -109px;margin-left: -109px"> 
<iframe width="560" height="548" src="url" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> 
</td> 
</tr> 
</table>

知识漏点：关于跨域操作的问题，还有待学习。。。。

CSS

透明度问题：

开发中，我设置了一个dialog的弹出效果，是透明度有0.1开始到全显示，使用jQuery.animate方法。这个dialog里面有n个组件也用到了透明度属性，此时，IE下，dialog显示后，那些拥有透明度属性的组件都显示异常（有的不再透明，有的过度透明。。。），试过所有方法，最后只有一个生效，就是把dialog的style中的那个'filter:alpha(opacity=100); opacity:1 删掉。。。jQuery的1.6版本在animate完成后“删掉了filter属性”，可能也是基于这种问题。但至于为什么会有那些影响，除了知道是filter和opacity有继承特性外，再细节的就没有考察了。

margin问题：

margin的计算起准点是左上。
对于两个相邻的都设置了正margin的结点，如果它们的上下margin有交接，则会将它们顶部和底部方向的margin重叠，然后以较大margin的数值为准，设置间距。但是对于左右margin则不会重叠计算，而是累加。
如果交接的margin有一个是负数，则margin最后的效果以负数的为准；如果都是负数，以绝对值较大的为准。

比如相邻关系

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>table</title>
<style>
    .div1 {margin:20px; width:600px; height:200px; background-color:#333;}
	.div2 {margin:10px; width:600px; height:200px; background-color:#666;}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html

最后运行的结果是div1和div2的间距是20px而不是（20+10）px。

如果是包含关系的两个div呢？

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>table</title>
<style>
    .div1 {margin:20px; width:600px; height:200px; background-color:#333;}
	.div2 {margin:10px; width:600px; height:200px; background-color:#666;}
</style>
</head>
<body>
<div class="div1"><div class="div2"></div>
</div>
</body>
</html>

结果相同

那如果你想让子结点的margin生效，那就要在两个margin之间隔点儿东西，比如，padding。将div1加一个padding：10px的属性，这时div2与div1的顶部间距就变成10+10 = 20px了。

iteye_11097

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我最近新学会的XXX

最近忙上，忙下，忙里，忙外，活儿做了不少。这里有重复劳动，也有新奇体验。重复的就无需再说，记录下新近学到的一些东西，以免以后遇到又去找来找去，baidu google的。。。。内容都很基础，涉面也很杂，如果这个博客不小心被哪个大牛看到，不要嘲笑我。。。。 iframe相关：两站交互问题：使用背景：A站想要与B站进行交互实现方式：在...
复制链接

扫一扫

专栏目录