这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
前端与HTML
前端技术栈:
HTML(内容)、CSS(样式)、JavaScript(行为)
HTML——HyperText Markup Language
文档根标签<html></html>
呈现的内容<body></body>
DOM树：把HTML里的标签转化成一个树结构
列表
有序列表<ol><li></li></ol>
无序列表<ul><li></li></ul>
定义列表<dl><dt><dd></dd></dt></dl>
走进前端技术栈-CSS
Selector{
Property:Value
}
CSS嵌入方式
外链
<link rel="stylesheet" href="xxx.css">
嵌入
<head><style>body{}</style></head>
内联
<p style="margin: 0px"></p>
选择器
- id选择器： 看HTML标签中的id
.xxx {
}
- 类选择器： 看HTML中的class
#xxx {
}
- 属性选择器： 看HTML中设置的属性
[xxx] {
}
伪类
- 不基于标签和属性定位元素
- 几种伪类
- 状态伪类
①、:link 默认
②、:visited 访问过
③、:hover 鼠标移动到
④、:active 鼠标点击
⑤、:focus 聚焦 - 结构性伪类
①、:first-child 第一个
②、:last-child 最后一个
- 状态伪类
white-space处理空白符
- normal：默认，多个空格合并
- nowrap：不换行
- pre：保留所有（空格、换行）
- pre-wrap：一行内显示不下，自动换行，保留空格
- pre-line：合并空格，保留换行
深入CSS
margin collapse
margin 垂直方向上，取值大的那个外边距，而不是上下值相加
| 块级 | vs | 行级 |
|---|---|---|
| 不和其他盒子并列摆放 | 和其他行级盒子一起放在一行或拆开成多行 | |
| 适用所有的盒模型属性 | 盒模型中的width、height不适用 |
display属性：
- block：块级盒子
- inline：行级盒子
- inline-block：本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
- none：排版时可以完全忽略
行级排版上下文
- 只包含行级盒子的容器会创建一个IFC
- IFC内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align 决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素*
块级排版上下文
- 某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow 值不是 visible 的块盒
- display：flow-root
BFC内的排版规则
- 盒子从上到下摆放
- 垂直 margin 合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
Flex Box 是什么？
- 一种新的排版上下文
- 它可以控制子级盒子的：
- 摆放的流向
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
display:grid
- 使元素生成一个块级的Grid容器
- 使用grid-template相关属性将容器划分为网格
- 设置每一个子项占哪些行/列
position
- static---默认值，非定位元素
- relative---相对自身原本位置偏移，不脱离文档流
- absolute---绝对定位，相对非static祖先元素定位
- fixed---相对于视口绝对定位（滚动时固定区域）
鹏北海，凤朝阳。又携书剑路茫茫。
