css学习流程 (css软件使用小知识点)

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画XXXbox-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

作者：侠客岛的含笑

链接：https://www.imooc.com/article/266772