手记

全面系统讲解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嵌套

问题: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
6人推荐
随时随地看视频
慕课网APP