Skip to content

Instantly share code, notes, and snippets.

@vikingmute
Last active December 17, 2015 12:39
Show Gist options
  • Save vikingmute/5610957 to your computer and use it in GitHub Desktop.
Save vikingmute/5610957 to your computer and use it in GitHub Desktop.
CSS 简单知识结构

##css复习的一些简单要点和知识结构(持续总结)

  • .Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?
  • CSS引入的方式有哪些? link和@import的区别是?
  • CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
  • 写出几种IE6 BUG的解决方法和一些相应的css hack
  • 浏览器标准模式和怪异模式之间的区别是什么?
  • Display属性 Display有几个主要属性? (block+inline+none 块级和内联inline-block)块级和内联有什么区别? 举例说明几个块级元素和内联元素? 怎样改变元素的display属性? Inline elements:

respect left & right margins and padding, but not top & bottom cannot have a width and height set allow other elements to sit to their left and right. Block elements:

respect all of those force a line break after the block element Inline-block elements:

allow other elements to sit to their left and right respect top & bottom margins and padding respect height and width http://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block

  • 居中 横向居中(margin:auto+固定宽度) 竖向(height+line-height) 固定长 固定高(top+left+负margin-top margin-left) 以及更多方法
  • 盒模型 什么是box-model? 盒模型的最终宽度和高度如何计算出来?(width+padding+border) 如果不想padding border加大宽高 怎么办?(box-sizing:border-box) Box-sizing这个属性 兼容性如何? 什么浏览器支持?
  • Position属性 Position都有什么值(static+relative+absolute+fixed)? 这些属性都代表什么意思?(一大堆内容 自己好好看http://learnlayout.com/position.html)
  • Float属性 都有什么值呢? 有什么作用? 会造成什么问题? (浮动溢出父元素 后面的元素会跟着浮动到后面 等) 怎样解决这个问题(在后面加空元素clear:both,或者在父元素 使用clearfix http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best) 不用浮动的话 你是否了解inline-block属性? 他有什么特点和兼容性问题
  • CSS Reset 什么是CSS reset?(http://www.cssreset.com/what-is-a-css-reset/) 你是否使用? 你知道哪些知名的css reset?(来这里好好看看吧 http://www.cssreset.com/ http://necolas.github.com/normalize.css/ 别忘了 国内小鱼做的 typo.css http://typo.sofish.de/)
  • CSS3新属性 了解什么属性 用到了什么属性 有什么好处(我在上一个项目 用了大量的css3 很强大 圆角,背影,渐变,动画,变形都是很强大和好用的属性)(还有一个牛逼的 column-count: 3; column-gap: 1em; 文章可以直接分三列显示 不过现在ie9都不支持)
  • 响应式布局 Responsive Design,也许是现在布局中最流行的一个东西了,了解他的概念,和大体的实现方式(media queries 对于这个我完全是粗浅的了解 过段时间会找些详细的资料和参考放在这里)
  • CSS框架 你听说和了解过哪些css框架呢?(我写一些我用的 1.Bootstrap http://twitter.github.com/bootstrap/ 地球人都知道 2.Foundation http://foundation.zurb.com/ 比较小众一些 3.Skeleton :http://getskeleton.com/ 简单的响应式布局框架 当然还有一个很火的 也不算一个框架吧 算一个模板 http://html5boilerplate.com/ 看看他的html源代码 你能学到不少偶)
  • LESS和Sass和stylus这三玩意儿是干嘛的? 用过没有? 有啥好处呢? (两种动态样式语言 为css赋予动态语言的特性 http://www.lesscss.net/ http://sass-lang.com/ 我只用过LESS 好处就是方便 快捷。。)
  • @font-face是啥啊 请讲讲 http://beenhero.com/icons-fonts-as-your-responsive-strategy/
  • 什么是grid 为什么用em字体大小?http://unsemantic.com/demo-responsive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment