css 一行显示_CSS笔记1

css历史

李爵士的挪威同事赖先生在1994首先提出css，倡议了web网页应该使用通用字体格式和浏览器可以支持video标签，微软的ie常常成为他的批评对象，他也是web打印概念的倡导者，用html和css写书

css的牛逼之处

css的全称叫做层叠样式表

样式层叠

可以多次对同一选择器进行样式声明

选择器层叠

可以用不同选择器对同一个元素进行样式声明

文件层叠

可以用多个文件进行层叠

这些特性使得css极度灵活，也为后来css被吐槽留下了隐患。

目前世界上使用最广泛的版本是css2.1

http://caniuse.com网站能帮你知道那些浏览器支持哪些特性(社区的力量)

css是艺术

不要问为什么 直接记住结果 所见即所学

体系化学习

学一门语言必须学会什么

语法（怎么写代码）

如何调试（怎么知道自己代码错了）

在哪查资料（其实就是为了抄代码）

标准制定者是谁

如何学

copy——抄文档、抄老师

run——放在自己的机器上运行成功

modify加入一点自己的想法，然后重新运行

语法一

选择器{

属性名：属性值；

/* 注释*/

}

注意事项

所有符号都是英文，如果写错浏览器会警告

区分大小写，a和A是不同的东西

没有//注释

最后一个分号可以省略，建议不要省略

任何地方写错了，都不会报错，浏览器会直接忽略

语法二：at语法

@

注意事项

@charset必须放在第一行

前两个at语法必须以分号；结尾

@media语法会单独教学

charset是字符集的意思，但UTF-8是字符编码encoding，这是历史遗留问题。

UTF-8的渊源

从前字符集和编码是相同的，后来出现了一个叫unicode的字符集，包括UTF-8/UTF-16/UTF-32，只能把一个字符编码放在字符集的位置。

如何调试

使用W3C验证器（在线/命令工具）

使用vscode/webstorm看颜色

使用开发者工具看警告

必掌握：border调试法

怀疑某个元素有问题就给这个元素加border

border没出现说明选择器错了或者语法崩了

border出现了检查边界是否符合预期

bug解决了才可以把border删掉

文档流

几个重要的概念

文档流normal flow

块、内联、内联块

margin合并

两种盒模型（border-box更符合人类思维）

元素已经不分外联元素和块级元素，所有元素都可以是外联元素和块级元素。

不要在inline元素里写block元素

流动方向

inline元素从左到右，到达最右边才会换行

block元素从上到下，每一个都另起一行

inline-block也是从左到右

宽度

inline宽度为内部inline元素的和，不能用width指定

block默认自动计算宽度（auto），可用width指定

inline-block结合前两者特点，可用width

div的默认宽度是auto，不是100%，永远不需要写宽度百分之百，否则会出现bug

高度

inline高度由inline-height间接确定，跟height无关，跟padding也无关

block高度由文档内部流元素决定，可以设heigjt

inline-block跟block类似，可以设height，

如果div里什么都没有，默认高度是0

overflow溢出

当内容大于容器

当内容的宽度或高度大于容器的，会溢出

可用overflow来设置是否显示滚动条

auto是灵活设置（超出时显示，不超出时不显示）

scroll是永远显示（几乎没有人用）

hidden是直接隐藏溢出部分

visible是直接显示溢出部分

overflow是可以分为overflow-x和overflow-y（不是很好用）

脱离文档流

block高度由内部文档流元素决定，可以设height

意味着有些元素可以脱离文档流

float

position：absolute/fixed

不用上面属性就不会脱离

盒模型

content-box和border-box

前者内容就是盒子的边界，后者的边框才是盒子的边界

margin合并

父子/兄弟

只有上下重叠，左右不重叠

取消合并

父子合并用padding/border/overflow:hidden挡住或者display:flex

兄弟合并是符合预期的，可以用inline-block消除

颜色

十六进制颜色码#FFF6600或者#F60

RGBA颜色rgb(0,0,0)或者rgba(0,0,0,1)

hsl颜色hsl(360,100%,100%)

取色软件：snipaste