如何体系化的学习
层叠的概念
CSS就是层叠样式表。
可以不停的对已经有的样式进行覆盖。
-
样式层叠
- 选择器层叠
- 文件层叠
如何知道哪些浏览器支持哪些特性？
- 几十种浏览器全部跑一遍
- 使用caniuse.com
如何查看css文档？
谷歌css spec可以找到CSS的最新标准。推荐看CSS2.1标准的中文版
如何学(crm)?
Copy-抄文档
Run-在自己的机器运行成功
Modify-加入自己的想法，重新运行
语法一：
选择器{
属性名：属性值；
/注释/
}
区分大小写任何地方写错了，浏览器都不会报错，会直接忽略。
语法二：at语法
@charset "UTF-8";
@import url(1.css);
@media (min-width:100px) and (max-width:200px){
语法一
}
注意事项：
- @charset 必须放在第一行
- 前两个@必须以分号结尾
- charset是字符集的意思，但UTF-8是字符编码encoding,这是历史遗留问题。
如何调试CSS
- 使用W3C验证器(在线/命令行工具) 不推荐
- VSCode看颜色
- 使用WebStorm(推荐)
- 使用开发者工具看警告（
找到你想要的标签
看它是否有选择器
看他的样式是否被划掉，是否有警告）
Border调试法
怀疑哪个元素有问题就给这个元素加Border，Border没出现说明选择器或者语法错了，如果出现就要看边界是否符合预期。只用一行代码，就能确定错误是在上边还是下边。
说明上边一行代码有问题
在哪查资料？
- 想搜的词 + MDN
- 想搜的词 + CSS tricks(英文)
- 想搜的词 + 张鑫旭的博客
在哪里搜索练习素材
PSD
- Freepik搜索PSD web
- 365PSD中的UI套件不错。
效果图
- dribbble.com顶级设计师社区
- 可用肉眼模仿
直接模仿商业网站
不要沉迷于临摹，每个类型的临摹一两个即可。
如PC网站，手机网站，UI套件。
文档流
要理解的几个重要概念
- 文档流Normal Flow
- 块、内联、内联块
- margin合并(背下来就好)
- 两种盒模型(border-box更符合人类思维)
文档流和文档没什么关系，而指的是文档中元素的流动方向。
流动方向
内联(inline)元素(比如span)从左到右，排满了才会另起一行。 内联元素一般不能包含块级元素。
BLOCK元素(可以理解为DIV元素)，每个占一行。
inline-block也是从左到右，但也有block的属性，同一元素放不下要另起一行，不会跨两行
注意：HTML 5 中已经抛弃了「内联元素」的概念，所有元素都可以通过 CSS 变成内联的。
也就是说，上边那种将span视为内联，div视为BLOCK元素的方法已经过时了。现在可以通过设置属性。
display:inline;
display:block;
display:inline-block;
注意：不要在inline元素里写block元素，会出现bug。
宽度
inline元素不接受width和height设置宽高，其宽度由内容决定。
div标签没有设置宽度的时候，默认为auto能有多宽占多宽，不是100% 。一般情况下不要写width:100%;
高度
inline的高度与inline-hight有关(默认100px左右，与字体有关)，与height无关。
block和inline-block类似，高度由内部文档流元素决定，可设置height。
溢出
当内容大于容器时，就会产生溢出。
可通过设置
overflow:visible;（默认）
overflow:hidden;直接隐藏溢出的部分
overflow:auto;(推荐)
overflow:scroll;(基本没人用)
脱离文档流
block高度由内部文档流元素决定，也就是说有些元素可以不在文档流中。
哪些元素脱离文档流？
- float
- position:absolute/fixed
盒模型
重点关注四个区域和宽度widthw(宽度决定盒模型的类型)。
content-box width = 内容宽度 内容就是盒子的边界
border-box width = 内容宽度 + padding + border 边框才是盒子的边界
在盒模型处右键检查。
margin合并
这个属性方便我们合并写
如果不想要margin合并(通常不会这么写)
父元素和子元素的外边距合并，只存在于上下合并，不存在左右合并。
哪些情况会合并
- 父子margin合并
- 兄弟margin合并
如何阻止合并
阻止父子合并 - 父元素加border
- 父元素加padding
- overflow:hidder;
- display:flex;
兄弟合并是符合预期的，可以用inline-block消除。
基本单位
长度单位
- px像素
- em相对于自身font-size的倍数
- 百分数
- 整数
- rem
- vm和vh
颜色
- 十六进制#FF6600或者#F60
- RGBA颜色rgb(255,255,255)或者rgba(0,0,0,1)
rgb三个数值分别对应红绿蓝，数值在0~255之间变动，数值越大对应的颜色越深。
rgba中的a表示透明度，数值在0~1之间变动，越靠近0越透明。 - hsl颜 hsl(360,100%,100%)
推荐一个截图软件Snipaste，可以在rgb和十六进制颜色之间切换。
可以做个彩虹小练习
github-rainbow
预览地址
七个div层层嵌套
给body设置颜色后，会自动填充背景色。
网友评论