前言

css 进阶的主要内容如下。

#1、css 非布局样式

  • html 元素的分类和特性

  • css 选择器

  • css 常见属性(非布局样式)

#2、css 布局相关

  • css 布局属性和组合解析

  • 常见布局方案

  • 三栏布局案例

#3、动画和效果

属于 css 中最出彩的内容。

  • 多背景多投影特效

  • 3D特效编写实践

  • 过渡动画和关键帧动画实践

  • 动画细节和原理深入解析

#4、框架集成和 css 工程化

  • 预处理器作用和原理

  • less/sass 代码实践

  • Bootstrap 原理和用法

  • css 工程化的的实践方式

  • js 框架中的 css 集成实践

#常见问题

不会 css 的前端称之为伪前端。

#Vue 中模拟Scoped CSS的方式

方案一:随机选择器。css modules。

方案二:随机属性。<div abcd>div[adcd]{}

#其他问题

  • html 元素的嵌套关系是怎么确定的?哪些嵌套不可以发生?

  • 比如说,为什么 div 可以放在 a 标签里面?

  • css 选择器的权重是如何计算的?写代码时要注意什么?

  • 浮动布局是怎么回事?有什么优缺点?国内用的多吗?

  • css 可否做逐帧动画吗?性能如何?

  • Bootstrap 怎么做响应式布局?

  • 如何解决 css 模块化过程中的选择器互相干扰的问题?

#总结

单独看 css 属性并不难,难的是需要把这些思路和思想,想到它的应用场景。

css进阶 00-准备的更多相关文章

  1. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...

  2. 转载 【CSS进阶】伪元素的妙用--单标签之美

    1.单个颜色实现按钮 hover .active 的明暗变化 请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果 2.利用after伪类清除浮动 .clearfix:a ...

  3. html和css进阶

    html和css进阶 相对地址与绝对地址 网页上引入或链接到外部文件,需要定义文件的地址,常见引入或链接外部文件包括以下几种: <!-- 引入外部图片 --> <img src=&q ...

  4. CSS进阶之SASS入门指南

    CSS进阶之SASS入门指南         随着跟着公司学习项目的前端的推进,越来越对好奇了许久的SASS垂涎欲滴,哈哈,可能这个词使用不当,没有关系,就是对SASS有一股神秘的爱!好了,闲话不多说 ...

  5. webpack快速入门——CSS进阶:自动处理CSS3前缀

    为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...

  6. webpack快速入门——CSS进阶,Less文件的打包和分离

    1.要使用less,首先使用npm安装less服务 cnpm install less --save-dev 还需要安装Less-loader用来打包使用. cnpm install less-loa ...

  7. webpack快速入门——CSS进阶:SASS文件的打包和分离

    1.安裝:因为sass-loader依赖于node-sass,所以需要先安装node-sass cnpm install node-sass --save-dev cnpm install sass- ...

  8. webpack快速入门——CSS进阶:消除未使用的CSS

    使用PurifyCSS可以大大减少CSS冗余 1.安装 cnpm i purifycss-webpack purify-css --save-dev 2.引入glob,因为我们需要同步检查html模板 ...

  9. CSS进阶之路

    下面主要引用http://www.cnblogs.com/wangfupeng1988/tag/css知多少/ CSS进阶笔记: 一.学习CSS的三个突破点 1.浏览器如何加载和解析CSS——CSS的 ...

  10. css进阶之二:flex弹性布局

    布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...

随机推荐

  1. python-基础入门-6快速入门总结

    快速入门 程序输出: 1.print语句,字符串用双引号括起来 _在解释器中表示最后一个表达式的值. print语句 与字符串格式(%)结合使用,能实现字符串替换功能. >>>pri ...

  2. SHEIN:Java开发面经

    SHEIN面经 我觉得除技术外,自信是一个非常关键的点. 一面 自我介绍: 谈谈实习经历: 讲讲你实习的收获: 如何设计规范的接口?(简历上有写,所以问到) 当你需要修改两个月前的代码时,如何去整理以 ...

  3. Vegas干货分享,如何制作霓虹灯效果

    在各色各样的展会中,各种炫彩华丽的灯光和光影一直都能吸引到人们大量的关注.同样,在视频制作中,光线的气氛渲染也是常用的方法,常用也就代表着效果明显,也是很多刚学视频剪辑小伙伴们想要学习的一种方法. 今 ...

  4. java运算符与程序逻辑控制

    一.运算符 java中的运算符大致分为四种:数学运算符,关系运算符.逻辑运算符.位运算 1.数学运算符:即咱们平常说的加减乘除运算,这种运算是分先后顺序的,如果想要优先进行运算,建议加上小括号,使其运 ...

  5. 痞子衡嵌入式:探析开启CRC完整性校验的IAR工程生成.out和.bin文件先后顺序

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是开启CRC完整性校验的IAR工程生成.out和.bin文件先后顺序问题. 痞子衡之前写了一篇 <在IAR开发环境下为工程开启CRC ...

  6. http 文件上传

    参考https://www.cnblogs.com/yuwei0911/p/8601542.html

  7. 《应用计算方法教程》matlab作业一

    运行界面: 运行界面: 运行界面: 运行界面: 运行界面: 运行界面: 运行界面: 运行界面: 运行界面: 运行界面: word文档百度云链接: 链接:https://pan.baidu.com/s/ ...

  8. Java数据结构(十三)—— 二叉排序树(BST)

    二叉排序树(BST) 需求 给定数列{7,3,10,12,5,1,9},要求能够高效的完成对数据的查询和添加 思路三则 使用数组,缺点:插入和排序速度较慢 链式存储,添加较快,但查找速度慢 使用二叉排 ...

  9. JZOJ2020年9月19日提高B组反思

    CSP第一轮倒计时:22天 JZOJ2020年9月19日提高B组反思 今天比的不好,只有签到题过了 130,rank 20 T1 签到题 用二分直接切 AC 100 T2 觉得是依赖背包问题 但是我没 ...

  10. Python MoviePy中文教程导览及可执行音视频剪辑工具下载

    ☞ ░ 前往老猿Python博文目录 ░ <Python音视频剪辑库MoviePy1.0.3中文教程导览及可执行工具下载>是老猿两个关于moviepy的专栏<PyQt+moviepy ...