全面系统讲解CSS 工作应用

基于慕课网TooooBug老师的课程做的总结，课程地址https://coding.imooc.com/class/164.html

html常见元素

• meta
• title
• style
• link
• script
• base
• div/section /article/aside/header/footer
• p
• span /em/strong
• table/thead/tbody /tr/td
• ul/ol/li/dl/dt/dd
• a
• form/input/select/textarea/button

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<base href="/">

• a[href,target]
• img[src,alt]
• table td[colspan,rowspan]
• form[target,method,enctype]
• input[type,value]
• button[type]
• select>option[value]
• label[for]

问题：当我们使用ajax方式提交数据时还需要from表单吗？

需要。利用Jqury进行批量提交，或者（框架结合，验证组件去做表单验证，还有from的特性，记住用户的账号密码）

HTML5

• 新区块标签
  • section
  • article
  • nav
  • aside
• 表单增强
  • 日期、时间、搜索
  • 表单验证
  • Placeholder自动聚焦
• header/footer头尾
• section/article 区域
• nav导航
• aside 不重要内容
• em/strong 强调
• iicon

html分类

html嵌套

https://www.zhihu.com/question/34952563,如果看不懂我截图的大概意思，可以看一下顾轶灵前辈的回答，很清楚。

问题：doctype的意义是什么

• 让浏览器以标准模式渲染
• 让浏览器知道元素的合法性

问题：HTML XHTML HTML5的关系

• HTML属于SGML
• XHTML属于XML，是HTML进行XML严格化的结果
• HTML5不属于SGML或XML，比XHTML宽松

问题：em和i有什么区别

• em是语义化的标签，表强调
• i是纯样式的标签，表斜体
• HTML5中i不推荐使用，一般用作图标

问题：语义化的意义是什么

• 开发者容易理解
• 机器容易理解结构（搜索、读屏软件）
• 有助于SEO
• semantic microdata

问题：哪些元素可以自闭合

• 表单元素input
• 图片img
• br hr
• meta link

问题：HTML和DOM的关系

• HTML是“死”的
• DOM由HTML解析而来，是活的
• JS可以维护DOM

问题：property和attribute的区别

• attribute是“死”的
• property是“活”的

问题：form的作用有哪些

• 直接提交表单
• 使用submit/reset按钮
• 便于浏览器保存表单
• 第三方库可以整体提取值
• 第三方库可以进行表单验证

Cascading Style Sheet(层叠样式表)

• CSS解析从右向左解析（高效）
• 优先级不能通过数量叠加超过比自己强大的优先级
• !important 优先级最高
• 元素属性 优先级高
• 相同权重 后写的生效
  
  
  

非布局样式

字体

• 字体族不需要引号
• 字体族
  • serif sans-serif monospace cursive fantasy
• 多字体fallback
• 网络字体、自定义字体
• iconfont
  

行高

• line-height
• vertical-align 基线 图片缝隙问题

背景

• 颜色
• 渐变 linear-gradient
• 多背景叠加
• 雪碧图
• base64 和性能优化
  • 用来少量图标上
  • css文件增大，图片体积增加三分之一，不过减少HTTP请求数
• 分辨率适配

边框(略)

滚动

文本折行

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

装饰属性

• 字重（粗体）font-weight
• 斜体 font-style:itatic
• 下划线text-decoration
• 指针 cursor

布局

• absolute是以最近父级absolute或者relative来定位的，如果没有就以body定位
• z-index适用于absolute和relative属性
• table表格布局
• float浮动 + margin
  • 脱离文档流，不脱离文本流
  • BFC
  • 尽量靠上左（右）
  • 小心父级高度塌陷
    • overflow:auto
    • 清除浮动
• inline-block 布局
  • 自适应比较繁琐
  • 需要处理间隙
  • 代码间空白导致
  • font-size:0
• flexbox布局
  • 弹性盒子
  • 盒子本来就是并列的
  • 指定宽度即可
• 响应式
  • 在不同设备上正常使用
• 一般主要处理屏幕大小问题
• 主要方法：
  • 隐藏+折行+自适应空间
  • rem/viewport/media query

效果

• box-shadow
• text-shadow
• border-radius
• background
• clip-path
  • 保持原来的大小
  • 支持动画

问题

• 如何用一个div画XXX
  • box-shadow无限投影
  • ：:before
  • ：:after
• 如何产生不占空间的边框
  • box-shadow
  • outline
• 如何实现iOS图标的圆角
  

动画

• 视觉暂留
• 补间动画transition
  • 位置-平移(left/right/margin/transform)
  • 方位-旋转（transform)
  • 大小-缩放(transform)
  • 透明度（opacity)
  • 其它-线性变换（transform)
• 关键帧动画keyframes
• 逐帧动画
  • 适用无法补间计算的动画
  • 资源较大
  • animation-timing-function
  • 使用steps()去掉补间

过渡动画和关键帧动画的区别

• 过渡动画需要有状态变化
• 关键帧动画不需要状态变化
• 关键帧动画能控制更精细

CSS动画的性能

• 1.性能不坏
• 2.部分情况下优于JS
• 3.但JS可以做到更好
• 4.部分高危属性
• box-shadow等

CSS预处理器

• 嵌套反映层级和约束
• 变量和计算减少重复代码
• Extend和Mixin代码片段
• 循环适用于复杂有规律的样式
• import CSS文件模块化

Bootstrap

• BootstrapJS使用方式
  • 基于data-* 属性
  • 基于JS API
• 定制方法
  • 使用CSS同名类覆盖
  • 修改源码重新构建
  • 引用scss源文件 修改变量
• Bootstrap的优缺点
  • 优点：CSS代码结构合理现成的样式可以直接用
  • 缺点：定制较为繁琐体积大
• Bootstrap如何实现响应式布局
  • 原理：通过media query设置不同分辨率的class
  • 使用：为不同分辨率选择不同的网格class

css工程化

• PostCSS
  • 插件
  • import 模块合并
  • autoprefixier 自动加前缀
  • cssnano 压缩代码
  • cssnext 使用CSS新特性
    
• precss 变量，mixin，循环等

webpack

• css-loader 将CSS变成JS
• style-loader 将JS样式插入head
• ExtractTextPlugin 将CSS从JS中提取出来
• css modules解决CSS命名冲突的问题
• less-loader sass-loader 各类预处理器
• postcss-loader PostCSS处理

如何解决CSS模块化问题

• Less Sass等CSS预处理器
• PostCSS插件（postcss-import/precss等）
• webpack处理CSS(css-loader+style-loader)

PostCSS可以做什么?

• 取决于插件可以做什么
• autoprefixer cssnext precss等兼容性处理
• import模块合并
• css语法检查兼容性检查
• 压缩文件

CSS modules是做什么的，如何使用

• 解决类名冲突的问题
• 使用PostCSS或者webpack等构建工具进行编译
• 在HTML模板中使用编译过程产生的类名

Angular

• ShadowDOM
  • 逻辑上一个DOM
  • 结构上存在子集结构
• Scoped CSS
  • 限定了范围CSS
  • 无法影响外部元素
  • 外部样式一般不影响内部
  • 可以通过 /deep/ 或 >>> 穿透
• 模拟Scoped CSS
  • 方案一：随机选择器（不支持）
  • 方案二：随机属性
    • <div abcdefg>
    • div[abcdefg]{}
      

Vue

• 模拟Scoped CSS
  • 方案一：随机选择器
    • css modules
  • 方案二：随机属性
    • <div abcdefg>
    • div[abcdefg]{}

React

• 官方没有集成方案
• 社区方案众多
  • css modules
  • (babel)react-css-modules
  • styled components
  • styled jsx
• npm run eject 释放底层配置
• styled-components