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