前端与 HTML | 青训营笔记——第二课
这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
一、CSS是什么？
JavaScript（行为） CSS（样式） HTML（内容）
-
Cascading Style Sheets
-
用来定义页面元素的样式
- 设置字体颜色
- 设置位置和大小
- 添加动画效果
在页面中使用CSS
外链 嵌入 内联
二、CSS是如何工作的？
- 加载html
- 解析html 加载css 解析css
- 创建DOM树
- 展示页面
选择器Selector
-
找出页面中的元素，以便给他们设置样式
-
使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
通配选择器*
标签选择器
id选择器#
类选择器
属性选择器
伪类（pseudo-classes）
-
不基于标签和属性定位元素
-
几种伪类
- 状态伪类
- 结构性伪类
三、调试CSS
-
右键点击页面，选择【检查】
-
使用快捷键
- ctrl+shift+I（Windows）
- Cmd+Opt+I（Mac）
四、布局（Layout）是什么？
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
布局相关技术
- 常规流：行级、块级、表格布局、FlexBox、Grid布局
- 浮动
- 绝对定位
overflow（溢出）：visible全部、hidden藏、scroll滚动
五、块级vs行级
块级
- 不和其他盒子并列摆放
- 适用所有的盒模型属性
行级
- 和其他行级盒子一起放在一行或拆开成多行
- 盒模型中的width、height不适用
块级元素
- 生成块级盒子
- body、div、main、section、h1-6、p、ul、li等
- display：block
行级元素
- 生成行级盒子，内容分散在多个行盒（line box）中
- span、em、strong、cite、code等
- display：inline
position
position：relative
- 在常规流里面布局
- 相对于自己本应该在的位置进行偏移
- 使用top、left、bottom、right设置偏移长度
- 流内其他元素当它没有偏移一样布局
position：absolute
- 脱离常规流
- 相对于最近的非static祖先定位
- 不会对流内元素布局造成影响
六、学习CSS的几点建议
- 充分利用MDN和W3C CSS规范
- 保持好奇心，善用览器的开发者工具
- 持续学习，CSS新特性还在不断出现
