type
status
date
slug
summary
tags
category
icon
password
CSS的历史
CSS是谁发明的？
李爵士的挪威同事赖先生首先提出CSS
赖先生生平
生平
- 1991年获得MIT媒体实验室视觉研究理学硕士学位
- 1994年提出CCS概念而闻名
- 1999年任Opera的CTO
- 2005年他写公开信给比尔盖茨问为什么IE不支持Web标准，盖茨说IE 7马上发布，他写了Acid2用来验证
- 2006年通过了博士论文答辩
- 2006年他倡议Web网页应使用通用字体格式
- 2007年他倡议浏览器可以支持video标签
观点
- 微软的IE常常成为他的批评对象
- 他也是Web打印概念的倡导者，用HTML和CSS写书
CSS的牛X之处在哪？
CSS得到全称是层叠样式表
层叠指的是什么
- 样式层叠可以多次对同一选择器进行样式声明
- 选择器层叠可以用不同选择器对同一个元素进行样式声明
- 文件层叠可以用多个文件进行层叠
- 这些特性使得CSS极度灵活这也为CSS后来被吐槽留下了隐患
CSS的版本
版本 | 时间 | 重点 |
CSS 1 | 1996年 | 不用管 |
CSS 2 | 1998年 | 添加定位，z-index ,media |
CSS 2.1 | 2004年~2011年 | 使用最广泛的版本（IE支持） |
CSS 3 | 1999年开始起草 | 现代版本，分模块（IE 8部分支持） |
CSS 4* | 分模块升级 | ㅤ |
我怎么知道哪些浏览器支持哪些特性呢？
- 方法一：几十种浏览器全部跑一遍
- 方法二：caniuse.com
为什么CSS这么难学？
因为CSS是艺术，就像画画，折纸，你需要用感性思维来理解CSS 不要用理性思维，既不要问 为什么会这样？ 而是说 原来是这样 浏览器说是怎么样，就是怎么样
CSS的语法是怎样的？
- 语法一：样式语法
注意事项
- 所有符号都是英文符号，如果写错了，浏览器会警告
- 区分大小写，a和A是不同的东西
- 没有//注释
- 最后一个分号可以省略，但建议不要省略
- 任何地方写错了，都不会报错，浏览器会直接忽略
- *语法二: at语法
注意事项
- @charset必须放在第一行
- 前面两个at语法必须以分号;结尾
- charset是字符集的意思，但UTF-8是字符编码encoding，这是历史遗留问题
如何调试CSS？
方法
- 使用W3C验证器（在线/命令行工具）
- 使用VSCode看颜色
- 使用WebStorm看颜色
- 使用开发者工具看警告
如何使用开发者工具
- 找到你脑中的标签
- 看它是否有选择器
- 看它的样式是否被划掉
- 看它的样式是否有警告
Border调试法
- 步骤
- 怀疑某个元素有问题
- 就给这个元素加border
- border没出现？ 说明选择器错了或者语法错了
- borer出现了？看看边界是否符合预期
- bug解决了才可以把border删掉
- 记住
- CSS的border调试法
- 就想当于JS的log调试法
在哪里查资料？
- Google 搜索关键词时加上 MDN
- CSS tricks（英文）
- 张鑫旭的博客
在哪里搜练习素材？
PSD
- Freepik搜索PSD web
- 365PSD里的UI套件
效果图（不提供下载）
- dribble.com 顶级设计师社区
- 可以用肉眼模仿它
商业网站
- 直接模仿你常去的网站
不要沉迷于临摹：每个类型的临摹一两个即可 PC网站，手机网站，UI套件
CSS的标准制定者是谁？
W3C搜索CSS spec 可以找到CSS最新标准，但是没有人能看完它，可以去看看CSS 2.1标准的中文版
CSS文档流
基本概念
要理解几个重要的概念
- 文档流Normal Flow
- 块，内联，内联块
- margin合并
- 两种和模型（border-box 更符合人类思维）
文档流
文档流的英文名是Normal Flow ,就是正常的流动方向，指的是文档中元素的流动方向
流动方向
- inline元素从左到右，到达最右边才会换行
- block元素从上到下，每一个都另起一行
- inline-block 也是从左到右
宽度
- inline元素宽度为内部inline元素的和，inline元素不能用width指定
- block元素默认自动计算宽度，可以用width指定
- inline-block结合前两者特点，可用width
高度
- inline高度由line-height间接确定，跟height无关
- block高度由内部文档流元素决定，可以设置height
- inline-block跟block类似，可以设置height
新的HTML5的标准是部分内联元素，和块级元素的，所有的元素都可以是内联元素或者块级元素
span元素的宽度是由它内联元素宽度的总和决定的 span元素不能设置宽度
div元素的宽度不是100%，而是auto,能有多宽占多宽 如果div里什么都没有，div的高度是0 永远不要写宽度为100%
overflow溢出
当内容大于容器
- 等内容的宽度或高度大于容器的，会溢出
- 可用overflow来设置是否显示滚动条
- auto是灵活设置
- scroll是永远显示
- hidden是直接隐藏溢出部分
- visible是直接显示溢出部分
- overflow可以分为overflow-x和overflow-y
脱离文档流
回忆
- block高度是由内部文档流元素决定的，可以设为height
- 这句话的意思是说，有些元素可以不在文档流中
哪些元素脱离文档流
- float
- position: absolute / fixed
怎么让元素不脱离文档流
- 不用上面的属性就不会脱离了
盒模型
两种盒模型
分别是
- content-box内容盒-内容就是盒子的边界
- border-box边框盒-边框才是盒子的边界
公式
- content-box width = 内容宽度
- border-box width = 内容宽度 + padding + border
哪个好用
- border-box 好用
- 同时指定padding,width,border就知道为什么了
什么是盒模型?CSS盒模型分两种，一种是content-box , 一种是border-box,那content-box和border-box的区别是，content-box的宽度只包含conent，border-box的宽度包含到border , 分别是边框(border) ， 内边距(padding)和内容(content)
margin合并
哪些情况会合并
- 父子margin合并
- 兄弟margin合并
- 上下margin合并
- 左右margin不合并
如何阻止合并
- 父子合并用padding/border挡住
- 父子合并用overflow:hidden挡住
- 父子合并用display:flex,不知道为什么
- 兄弟合并是符合预期的
- 兄弟合并可以用inline-block消除
- CSS的属性逐年增多，每年都可能有新的
基本单位
长度单位
- px 像素
- em相对于自身font-size的倍数
- 百分数
- 整数
- rem
- vw和vh
颜色
- 十六进制#FF6600或者#F60
- RGBA颜色rgb（0,0,0）或者rgba(0,0,0,1)
- hsl颜色hsl(360,100%,100%) (色相，饱和度，亮度)或者hsla