css进阶 00-准备
前言
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-准备的更多相关文章
- 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果
最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...
- 转载 【CSS进阶】伪元素的妙用--单标签之美
1.单个颜色实现按钮 hover .active 的明暗变化 请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果 2.利用after伪类清除浮动 .clearfix:a ...
- html和css进阶
html和css进阶 相对地址与绝对地址 网页上引入或链接到外部文件,需要定义文件的地址,常见引入或链接外部文件包括以下几种: <!-- 引入外部图片 --> <img src=&q ...
- CSS进阶之SASS入门指南
CSS进阶之SASS入门指南 随着跟着公司学习项目的前端的推进,越来越对好奇了许久的SASS垂涎欲滴,哈哈,可能这个词使用不当,没有关系,就是对SASS有一股神秘的爱!好了,闲话不多说 ...
- webpack快速入门——CSS进阶:自动处理CSS3前缀
为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...
- webpack快速入门——CSS进阶,Less文件的打包和分离
1.要使用less,首先使用npm安装less服务 cnpm install less --save-dev 还需要安装Less-loader用来打包使用. cnpm install less-loa ...
- webpack快速入门——CSS进阶:SASS文件的打包和分离
1.安裝:因为sass-loader依赖于node-sass,所以需要先安装node-sass cnpm install node-sass --save-dev cnpm install sass- ...
- webpack快速入门——CSS进阶:消除未使用的CSS
使用PurifyCSS可以大大减少CSS冗余 1.安装 cnpm i purifycss-webpack purify-css --save-dev 2.引入glob,因为我们需要同步检查html模板 ...
- CSS进阶之路
下面主要引用http://www.cnblogs.com/wangfupeng1988/tag/css知多少/ CSS进阶笔记: 一.学习CSS的三个突破点 1.浏览器如何加载和解析CSS——CSS的 ...
- css进阶之二:flex弹性布局
布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...
随机推荐
- java8的stream功能及常用方法
Java8中stream对集合操作做了简化,用stream操作集合能极大程度简化代码.Stream 就如同一个迭代器(Iterator),单向,不可往复,数据只能遍历一次,遍历过一次后就用尽了. 一. ...
- 面试官:小伙子,你给我说一下Java中什么情况会导致内存泄漏呢?
概念 内存泄露:指程序中动态分配内存给一些临时对象,但对象不会被GC回收,它始终占用内存,被分配的对象可达但已无用.即无用对象持续占有内存或无用对象的内存得不到及时释放,从而造成的内存空间浪费. 可达 ...
- FL Studio在线面板的作用
FL Studio的在线面板主要是用来显示其自身与Image-Line公司相关的新闻.我们点击它后会看到一个新闻列表菜单,其中每一个项目都包含日期.标题.简介以及URL.详细的内容我们将在下文介绍,一 ...
- vulnhub: DC 3
通过nmap扫描,只开放了80端口,并且该web服务是基于Joomla搭建: root@kali:~# nmap -A 192.168.74.140 Starting Nmap 7.80 ( http ...
- 【CF620E】New Year Tree
(题面来自luogu) 题意翻译 你有一棵以1为根的有根树,有n个点,每个节点初始有一个颜色c[i]. 有两种操作: 1 v c 将以v为根的子树中所有点颜色更改为c 2 v 查询以v为根的子树中的节 ...
- Java集合【9】-- Vector源码解析
目录 1.Vector介绍 2. 成员变量 3. 构造函数 4. 常用方法 4.1 增加 4.2 删除 4.3 修改 4.4 查询 4.5 其他常用函数 4.6 Lambda表达式相关的方法 4.7 ...
- Bootstrap Blazor 组件介绍 Table (二)自定义模板列功能介绍
Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用.通过本套组件可以大大缩短开发周期,节约开发成本.目前已经开发.封装了 70 多个组 ...
- 20200322_【转载】关于C#中使用SQLite自适应Any CPU程序的说明
本文转载, 原文链接: http://luyutao.com/2016/09/14/csharp-sqlite-any-cpu.html 在C#中如果要使程序自适应32位和64位系统,只需要将项目的& ...
- 在之前的EventHandler中的参数类型必须继承EventArgs,现在已经去掉这个约束了。
分别是vs2008和vs2012的对比,可以看到2012已经去掉了约束条件.
- Django之数据库--ORM
一.建立数据库模型类 1.在model里创建模型类.(继承models.Model) from django.db import models # Create your models here. c ...