为了账号安全,请及时绑定邮箱和手机立即绑定

奇舞团前端特训第二次课程笔记——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 行级格式化上下文
    • 一个接一个水平摆放
点击查看更多内容
2人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
42
获赞与收藏
398

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消