前端常识性的东西

最新推荐文章于 2023-02-27 09:56:07 发布

原创最新推荐文章于 2023-02-27 09:56:07 发布 · 536 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

32 篇文章

订阅专栏

本文深入探讨了CSS层叠顺序、盒模型、包含块、控制框等关键概念，同时对比了不同浏览器对盒模型的理解差异，以及CSS与HTML中的兼容性问题。详细解释了文本居中、盒模型解释、IE优先级过高等问题的解决方案。

CSS部分：

1 名词解释：cascading order 层叠顺序 collapsing margins 外边距折叠

visual formatting modal 可视化模型它规定了用户端在媒介中如何处理文档树(document tree)。

content box:盒模型里面的内容部分。border box:盒模型里面带上border padding一共的大小。

containing box：包含块【对于其它元素：如果该元素的定位（position）为 “relative” （相对定位）或者 “static”（静态定位），它的包含块由它最近的块级、单元格（table cell）或者行内块（inline-block）祖先元素的内容框创建。如果元素是固定定位 (“position:fixed”) 元素，那么它的包含块是当前可视窗口。如果元素是绝对定位（”position: absolute”）元素，包含块由离它最近的 position 属性为 “absolute”、“relative” 或者 “fixed” 的祖先元素创建。

controlling box：控制框，如行内框，块框等

Normal flow：常规流，就是普通的文档流

Block formatting contexts ：块格式化上下文浮动元素，绝对定位元素，inline-blocks，table-cells，table-captions，以及 'overflow'不是 'visible'的元素，会创建新的block formatting context。形成一个新的空间的感觉，可以让里面的浮动元素不覆盖，嵌套div margin不折叠等。对应还有inline formatting contexts，相对于BFC来说的，行框内部的排序方式。

2 hack http://wenku.baidu.com/view/c1575b4d767f5acfa1c7cd40.html

html部分：

js部分：

兼容性问题：

css：

1 text-align居中问题，IE会将元素中所有元素居中，包括块级元素，但是其他浏览器只会将行内元素居中。解决办法，IE中用此属性，其他浏览器用margin:0 auto;

2 对于盒模型的内容解释，IE(Q)会认为内容部分包括border和padding部分，但是其他浏览器不会。但是对于table元素，其他浏览器也会对宽高设置为border-box部分。

3 IE6 a:hover优先级过高

4 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

js：

1 date中的toLocalString()在不同浏览器中表现不一样。