display:none;与visibility:hidden; 与 opacity:0的区别

• 联系：它们都能让元素不可见
• 区别：
  • 占据空间
    • display：会让元素完全从渲染树中消失，渲染的时候不占据任何空间
    • visibility和opacity占据空间，只是内容不可见
  • 添加事件
    • opacity 添加事件，可以触发事件
    • display，visibility 则不能触发事件
  • 属性继承
    • display，opacity 是非继承属性，修改子孙节点无法显示
    • visiblelity 是继承属性，子孙节点消失由于继承 hideen，通过设置 visible可以让子孙节点显示

link与@import的区别

• 联系：都能导入样式表
• 区别：
  • 兼容性：
    • link是XHTML标签，无兼容问题
    • import只在IE5以上才能识别
  • 加载时机
    • 页面被加载的时，link会同时被加载
    • @import引用的CSS会等到页面被加载完再加载 ，过多嵌套，会出现 FOUC(文档样式短暂失效)
  • 权重
    • link方式的样式的权重高于@import的权重

什么是FOUC?如何避免

• 用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁

• 解决办法：把样式表放在文档的

如何创建块级格式化上下文(block formatting context),BFC有什么用

链接
BFC(Block Formatting Context)，块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

形成bfc的条件

• 浮动元素(float 除 none 之外)
• 定位元素(position(absolute/fixed))
• overflow(hidden/auto/scroll)
• display(inline-block, table-cell, table-caption)

BFC规则

• 创建BFC的元素，他的自动高度需要计算浮动元素
• 创建BFC的元素，它的边框盒不会与浮动元素重叠
• 创建BFC的元素，和它的子元素不进行外边距传递

应用

• 解决margin重叠的问题(添加独立的bfc)
• 解决浮动高度塌陷的问题(在父级添加 overflow:hidden)
• 解决元素被浮动元素覆盖

清除浮动的几种方式，各自的优缺点

• 定义高度
  • 父级div定义 height
• clear：both
  • 结尾处加空标签或 ::after伪类 clear:both
• bfc
  • 常用 overflow：hidden

css不同选择器的权重(css层叠规则)

• !important -> 无限大
• 行内样式 -> 1000
• id ID选择器 -> 100
• -> 10
  • class 类选择器
  • :hover 伪类选择器
  • [name="a"] 属性选择器
• -> 1
  • tag 标签选择器
  • ::after 伪类元素选择器
• * 通配符选择器

介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

• 标准(W3C)盒模型：元素宽度 = width
• 怪异(IE)盒模型：元素宽度 = width+ padding +border

box-sizing 的常用属性

• box-sizing: content-box; 默认的标准(W3C)盒模型元素效果
• box-sizing: border-box; 触发怪异(IE)盒模型元素的效果，padding和border不会撑大盒子
• box-sizing: inherit; 继承父元素 box-sizing 属性的值

display:inline-block 什么时候不会显示间隙？

• 移除空格，换行
• 使用 margin负值
• font-size:0

几种常见的css布局

链接