奇舞团前端特训第二次课程笔记——CSS

---

1. css选择器
   • [for~="height"] 匹配属性值里以空格分隔的属性里包涵height的
   • a[href^="#"] ^以什么开头
   • a[href\$="jpg"] $以什么结尾
   • [class*="icon-"] 匹配字符串里包含指定子串的元素
2. 伪类选择器
   • :link
   • :visit
   • :active
   • :focus
3. 显示继承
   • box-sizing:inherit;m
4. 长度单位
   • 绝对单位
     • px 像素
     • in 英寸
     • pt 磅
   • 相对单位
     • em 相对该元素的一个font-size
     • rem 相对于html的font-size
     • vh 浏览器窗口高度的1%
     • vw 浏览器宽度的1%
     • vmin vh和vw中较小者
     • vmax vh和vw中较大者
5. line-height
   • 数字 继承时不会被计算
   • 长度、百分比 继承时是计算值

6. @font-face{
       font-family:'xxx',
       src:local('Lobster'),       //优先在本地找   
           url(//xxx.woff),
           format('woff')
   }

7. text-align: justify 两端对齐，对最后一行不起作用。
8. text-intent: 文本缩进
9. white-space:指定空白符如何处理
   • normal 换行
   • nowrap 不换行
   • pre
10. word-break: 是否允许在单词中间换行。normal | break-all | keep-all | break-word
11. logo一般放在h1标签里，并且里面写上文字，搜索引擎会抓取，文字一般可以隐藏掉。
12. width、height在指定为100%时，是相对于父元素的conten box的宽度。不论box-sizing为什么值。
13. viewport 视口

14. 块级元素

    • display block、list-item、table
    • 不在行级元素里面的文字会包裹一个匿名的行级盒子
      行级元素
    • display inline、inline-block、inline-table
    • margin的top、bottom无效，left，right有效，但只对于第一行。
    • padding不对布局的位置产生影响
    • 行级盒子里可以包含行级元素，行级盒子里要包含块级元素，会被块级盒子拆成两个行级盒子
15. 定位模式
    • 常规流
      • 除根元素、浮动、绝对定位元素之外的
    • 浮动
      • 脱离文档流
      • 行级元素会变短以避开浮动元素
      • 不影响块级元素布局
    • 绝对定位
16. BFC 块级格式化上下文
    • 同一个上下文中垂直margin会合并
    • 从上往下摆放
    • 内部浮动不会影响外面的浮动
    • 高度会包含内部的浮动元素
    • 不会和浮动元素重叠
    • 可以通过overflow：hidden创建，正常情况下都在根的BFC里
    • BFC的创建
      • 浮动框
      • 绝对定位
      • overflow非visible属性
17. LFC 行级格式化上下文
    • 一个接一个水平摆放