CSS - 图1

link和@import的区别：

1）link属于XHTML标签，而@import是CSS提供的;
2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
3）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;
4）link方式的样式的权重 高于@import的权重.
5) link链接文档的样式除了样式表（rel=”stylesheet”)外还有文档目录(rel=”contents”)、帮助文档 (rel=”help”)等，@import只是作用于css。
6) link支持使用Javascript控制DOM去改变样式；而@import不支持。
  • link方式样式的权重高于@import的。
  • link是HTML方式， @import是CSS方式
  • link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC(文档样式短暂失效)
  • link可以通过rel=”alternate stylesheet”指定候选样式
  • 浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
  • @import必须在样式规则之前，可以在css文件中引用其他文件

用法：

1）link的写法：

 2）import的写法：
 @import ‘style.css’ //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别 @import “style.css” //Windows IE4/ NS4, Macintosh IE4/NS4不识别 @import url(style.css) //Windows NS4, Macintosh NS4不识别 @import url(‘style.css’) //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别 @import url(“style.css”) //Windows NS4, Macintosh NS4不识别 @import url(style.css) 和@import url(“style.css”)是最优的选择，兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。
  1. css加载不会阻塞DOM树的解析
  2. css加载会阻塞DOM树的渲染
  3. css加载会阻塞后面js语句的执行

链接：https://www.nowcoder.com/questionTerminal/bde5f59a72c6494798cedd56c652f276
来源：牛客网

CSS 百分比参照问题

  • 参照父元素宽度的元素：padding margin width text-indent
  • 参照父元素高度的元素：height
  • 参照父元素属性:font-size line-height
  • 特殊：相对定位的时候，top(bottom) left(right)参照的是父元素的内容区域的高度与宽度，而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度

链接：https://www.nowcoder.com/questionTerminal/29ae6dfc309f4e68b59acabef8cdc306
来源：牛客网

BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与, 哪些情况会产生BFC:
  1. 根元素
  2. float属性不为none
  3. position为absolute或fixed
  4. display为inline-block, table-cell, table-caption, flex, inline-flex
  5. overflow不为visible

链接：https://www.nowcoder.com/questionTerminal/883dbcf16620481c92dd2745dc52af57

来源：牛客网

display:none和visibility:hidden都能把网页上某个元素隐藏起来，但是两者有区别： 一、display:none 1、不为被隐藏的对象保留其物理空间。html对象在页面上彻底消失（display:none会让元素完全从渲染树中消失，渲染的时候不占据任何空间）。 2、是非继承属性，子孙节点消失由于元素从渲染树消失造成的，通过修改子孙节点，属性无法显示。 3、修改常规文档流元素的display通常会造成文档的重排（reflow）重绘（repaint）。 二、visibility:hidden 1、为隐藏的对象保留其物理空间，html对象仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在（visibility:hidden不会让元素从渲染树中消失，渲染树元素继续占据空间，只是内容不可见）。 2、是继承，子孙节点消失由于继承了hidden，通过visibility:visible可以让子孙节点显示。 3、修改visibility属性只会造成文档的重绘（repaint）。 splay:none 不可见，不占据文本流位置，事件不可触发 overflow:hidden 不可见，占据文本流位置，事件不可触发 opacity:0 不可见，占据文本流位置，事件可以触发 继承就是指子节点默认使用父节点的样式属性。 不可继承的属性太多了不要背，记住可以继承的属性有哪些就行了。可以继承的属性很少，只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承。 所有元素可继承：visibility和cursor。 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。 终端块状元素可继承：text-indent和text-align。 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。 display:none opacity:0 visibility:hidden
三种方法均可隐藏元素。不同在于以下几点:

一、空间占据


display:none 的元素不会占据，但是设置display:none 会引发回流和重绘 opacity:0和visibility:hidden 的元素会占据位置，但是改变这属性时只会触发重绘

二、子元**素继承**


 display:none 不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了。
visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出
opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示

三、事件绑定

display:none 的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件；
visibility:hidden 元素上绑定的事件也无法触发；
opacity: 0 元素上面绑定的事件是可以触发的。

四、过渡动画

transition对于display肯定是无效的，大家应该都知道；
transition对于visibility也是无效的；
transition对于opacity是有效.