同源策略:
同协议,同域名,同端口号
DomContentLoaded和load事件:
load事件是加载整个页面,即包括页面上的DOM ,样式表,图片,脚本等全部加载完成
DomContentLoaded事件触发后,仅仅是DOM被加载完成,不包括其他的
所以 DomContentLoaded事件会比load事件先加载完成
我们需要给一些元素事件绑定处理函数,但如果那个元素还没有加载到页面,就先执行了绑定的函数事件,是没有效果的
这两个事件大致就是用来避免这样一种情况,将绑定的函数放在这两个事件的回调中,保证能在页面的某些元素加载完毕之后再绑定事件的函数。
DOM文档加载的步骤为
- 解析HTML结构。
- 加载外部脚本和样式表文件。
- 解析并执行脚本代码。
- DOM树构建完成。//DOMContentLoaded
- 加载图片等外部文件。
- 页面加载完毕。//load
这样就能保证,加载后也会有效果了
如何调用两个事件:
onload事件,几乎所有的浏览器都支持,所以仅需要调用
DomContentLoaded事件,不同的浏览器对其的支持不同,所以需要做不同浏览器的兼容:
-
支持DOMContentLoaded事件的,就使用DOMContentLoaded事件;
-
IE6、IE7不支持DOMContentLoaded,但它支持onreadystatechange事件,该事件的目的是提供与文档或元素的加载状态有关的信息。
-
更低的ie还有个特有的方法doScroll, 通过间隔调用:document.documentElement.doScroll(“left”);可以检测DOM是否加载完成。 当页面未加载完成时,该方法会报错,直到doScroll不再报错时,就代表DOM加载完成了。该方法更接DOMContentLoaded的实现。
块级元素
标签分为块级元素和行内元素
块级元素和行内元素的区别
块级元素:
block特性
霸占一行,不能与其他元素并列一行
可以设置宽,高,内边距,外边距,宽度默认为父级元素的100%
行内(内联)元素:
inline特性
可以与其他相邻的内联元素并列一行
不能设置宽,高,内边距的top/buttom,外边距的top/buttom,宽度即为文字的宽度
常见的块级元素
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
常见的行级元素
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
CSS中块级、内联元素的应用:
主要用的CSS样式有三个:
display:block – 显示为块级元素
display:inline – 显示为内联元素
display:inline-block – 显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性
box-sizing 属性
box-sizing 属性允许以某种方式定义某些元素,以适应指定区域。
语法:box-sizing: content-box|border-box|inherit;
content-box :这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度(最小/最大属性)适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
border-box:指定宽度和高度(最小/最大属性)确定元素边框。也就是说,对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit :指定 box-sizing 属性的值,应该从父元素继承