Welcome

#CSS

#display: none; 与 visibility: hidden; 的区别

• 联系：它们都能让元素不可见
• 区别：
  • display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
  • display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility:hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式
  • 修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘
  • 读屏器不会读取display: none;元素内容；会读取visibility: hidden元素内容

##css hack原理及常用hack

• 原理：利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。
• 常见的hack有
  • 属性hack
  • 选择器hack
  • IE条件注释

#link 与 @import 的区别

• link 是HTML方式， @import 是CSS方式
• link 最大限度支持并行下载， @import 过多嵌套导致串行下载，出现FOUC
• link 可以通过 rel="alternate stylesheet" 指定候选样式
• 浏览器对 link 支持早于 @import ，可以使用 @import 对老浏览器隐藏样式
• @import 必须在样式规则之前，可以在css文件中引用其他文件
• 总体来说：link优于@import

#CSS有哪些继承属性

• 关于文字排版的属性如：
  • font
  • word-break
  • letter-spacing
  • text-align
  • text-rendering
  • word-spacing
  • white-space
  • text-indent
  • text-transform
  • text-shadow
  • line-height
  • color
  • visibility
  • cursor

#display,float,position的关系

• 如果 display 为none，那么position和float都不起作用，这种情况下元素不产生框

• 否则，如果position值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整

• 否则，如果float不是none，框是浮动的，display根据下表进行调整

• 否则，如果元素是根元素，display根据下表进行调整

• 其他情况下display的值为指定值 总结起来：绝对定位、浮动、根元素都需要调整 display

  

#外边距折叠(collapsing margins)

• 毗邻的两个或多个 margin 会合并成一个margin，叫做外边距折叠。规则如下：
  • 两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠
  • 浮动元素或inline-block元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠
  • 创建了块级格式化上下文的元素，不会和它的子元素发生margin折叠
  • 元素自身的margin-bottom和margin-top相邻时也会折

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

• 有两种， IE 盒子模型、W3C 盒子模型；
• 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
• 区 别： IE的content部分把 border 和 padding计算了进去;

#CSS选择符有哪些？哪些属性可以继承？

• id选择器（ # myid）
• 类选择器（.myclassname）
• 标签选择器（div, h1, p）
• 相邻选择器（h1 + p）
• 子选择器（ul > li）
• 后代选择器（li a）
• 通配符选择器（ * ）
• 属性选择器（a[rel = "external"]）
• 伪类选择器（a:hover, li:nth-child）