Css进阶

 

  虽然之前有写过一些H5页面,在现在的团队中也算是对前端比较熟悉的,但是深知自己掌握的只是皮毛,看到一些没用使用过的属性,都比较想了解,奈何记性不好,如果没有在项目中真实的遇到过,就很难记住。

  所以花时间特意学前端的东西,为自己多添加一份技能

 

 

 

非样式布局

字体

  • 字体族
    • serif(衬线字体:宋体)sans-serif(非衬线字体) monaco(等宽字体) cursive(手写字体)fantasy(花体)
  • 多字体fallback(多个字体,依次按顺序渲染,若前一字体没有,则找下面的字体)
  • 网络字体(引用网络字体)、自定义字体(引用本地字体)
  • iconfont(以图片当做字体)

常用字体:

font-family:"monaco"(英文),"PingFang SC(mac中文)","Microsoft YaHei(Win 中文)",monospace;

自定义字体:

 @font-size{
    font-family:"IF";
    src:url("./IndieFlower.ttf");
    }

  .custom-font{
    font-family:IF;
    }

 行高

line-height

vertical:top(按顶线对其,不一定是顶部对齐),middle(垂直居中)

<div style="background: red">
      <span>文字</span>
      <img src="1.png">
</div>

注意:图片离div有一段距离,img是行内元素,遵守行高的构成,会 按照base line对齐,和底线是有偏差的

去掉缝隙:vertical-align:bottom;

背景

  • 背景颜色
  • 渐变色背景
  • 多背景叠加
  • 背景图片和属性
  • base64和性能优化
  • 多分辨率适配

 文字折行

  • overflow-wrap(word-wrap)通用换行控制
    • 是否保留单词
  • word-break针对多字节文字
    • 中文句子也是单词
  • white-space空白处是否断行

overflow-warp:normal(尽量让单词完整) break-word(让多字母单词折行)

word-break:normal(让单词完整)break-all(单词折行)keep-all(保证句子完整)

white-space:nowrap(不换行)

装饰性属性以及其他

  • 字重(粗体)font-weight
  • 斜体 font-style:itaatic
  • 下划线 text-decotation
  • 指针 cursor

响应式设计

  • 在不同设备上正常使用
  • 一般主要处理屏幕大小问题
  • 主要方法:
    • 隐藏+折行+自适应
    • rem/viewport/media query
posted @ 2019-08-28 14:56  echola_mendes  阅读(176)  评论(0编辑  收藏  举报