CSS的历史
HTML发明者李爵士的挪威同事 Håkon Wium Lie 简称赖先生, 1994年以提出CSS而闻名。
CSS的版本
其中以2004-2011年期间的CSS2.1版本是最为广泛运行的版本，CSS3为目前流行的版本
CSS学习方法
- 先熟悉
CSS，再死记CSS规则 CRM(copy-run-modify)学习方法- 学习语法，怎么编写代码
- 学习如何调试，找出错误
- 在正确的地方查询资料
- 了解标准的制定者，权威标准
CSS浏览器兼容性查询网站
CSS基本单位
长度单位
pixel像素em相对于自身font-size的倍数- 百分数
- 整数
rem新增的一个相对单位vw和vh等于viewport宽度的1/100和viewport高度的1/100
颜色
- 十六进制
#FF6600或者#F60 RBGBA颜色rgb(0,0,0)或者rgba(0,0,0,1)hsl颜色hsl(360,100%,100%)
CSS语法
语法一：样式语法
p-选择器 {
color-属性名:red-属性值
/*设置字体颜色*/-注释
}
注意事项
- 所有符号都是英文符号
- 区分大小写，
A和a是不同的东西 - 没有
//注释 - 最后一个分号可以省略，但是不建议省略
- 写错没有任何错误提示
语法二：@语法
@charset "UTF-8";
@import url(2.css);
@media (min-width: 100px) and (max-width: 200px) {
语法一
}
注意事项
@charset必须放在第一行- 前面两个
@必须以分号;结尾 charset是字符集的意思，但是UTF-8是字符编码Encoding,这是历史遗留问题
CSS层叠式概念
- 文件层叠，可以用多个文件进行层叠
- 层叠特性使得
CSS可以被灵活使用，带来便利的同时也留下了很多问题，导致CSS被人吐槽 - 样式层叠, 可以多次对同一选择器进行样式声明，例如
p{
font-size: 50px;
}
p{
color: yellow;
}
- 选择器层叠
<p class="para"></p>
****
<style>
p{
font-size: 50px;
}
p{
color: yellow;
}
.para{
color: blue;
}
</style>
CSS调试
方法一
- 使用W3C validator 在线检查
- 使用
VS Code或者WebStorm查看颜色 - 使用
Developer tools进行查看
方法二：Border调试方法
- 怀疑某个元素有问题，就添加
border给这个元素 - 如果
border没有出现，就表示语法或者选择器错误了 - 如果
bordeer出现，查看border是否符合预期 - 有时候
border会占用空间，可以使用outline来代替，outline不占用像素 - 解决问题后，移除
boder CSS的border调试方法相当于JS的log调试方法，是很Handy的测试方法
Normal flow文档流
CSS重要概念
Normal flow文档流- 块，内联，内联块
margin合并CSS box model(推荐学习Border box)
流动方向
inline元素从左到右，到达最右边，才换行inline-block也是从左到右block元素从上到下，每个都另起一行
宽度
inline宽度为内部inline元素的和，不能用width，内部不能有block元素block默认自动计算宽度，可用width指定，永远不要写宽度100%div的宽度默认接近100%，不是100%inline-block跟block元素类似，可以设置height
高度
inline高度由line-height间接确定，跟height无关block高度由内部文档流元素确定，可以设置heightinline-block跟block类似，可以设置height
overflow 溢出
当内容大于容器
- 当内容的宽度或者高度大于容器，会溢出
- 可以使用
overflow来设置是否显示滚动条 auto是灵活设置scroll是永远显示(有滚动条的情况下，内联元素只在第一屏出现)hidden是直接隐藏溢出部分visible是直接显示溢出部分overflow可以分为overflow-x和overflow-y
脱离文档流
回忆一下
block高度是由内部文档流元素决定，可以设置height- 如果有些元素可以不在文档流中，不影响
block高度
哪些元素脱离文档流
floatposition : absolute/fixed
怎么让元素不脱离文档流
- 不要用上面属性就不脱离了
CSS Model(盒模型)
content-box内容盒
- 内容就是盒子的边界
cotent-boxwidth=内容宽度
border-box边框盒
- 边框才是盒子的边界
border-boxwidth= 内容宽度 +padding+border
比较
border-box 更好用，比如同时使用padding,width,border来测试
margin合并
哪些情况会合并
- 父子
margin合并，例如子margin top和父margin top会合并，只有上下会重叠，左右不影响 - 兄弟
margin合并，例如margin top和margin bottom会合并
如何阻止合并
- 父子合并使用
padding/border挡住 - 父子合并使用
overflow:hidder挡住 - 父子合并使用
display:flex - 父子合并是符合预期
- 父子合并可以用
inline-block消除 - 注意更新
