简易入门

内容

选择器"."、颜色和字体、位置、盒模型margin、flex

文件名__一定__不要用中文

类选择器 class "."开始  
11 多个地方被使用  
1.2 一个地方使用多个  
__后面的优先级高__

element选择器 page {}、view {}

组合选择器，逗号分隔

ID 选择器 "\#"开始

后代选择器 包含元素放在前面，父类里面的子类（空格分隔）

边框属性

border四周边框 solid实心 dashed虚线
border-可以单独设置一边

字体设置

font-weight 加粗 普通
font-family 字体样式（一般不调）
font-size 字体大小

盒模型

· margin外边距（在最外层）
· padding内边距（在内容之外）
· border边框（padding之外）
做小程序的时候，尽量不用 px， 用"%"来代替px
box-sizing content-box border-box

位置偏移

1. relative相对于自己位置偏移
2. absolute相对于非static最近的父级元素
3. fixed一般来说相对于视窗（滚动条，始终在视窗中）

位置

1. display:flex; （设置在父元素，里面有很多子元素）
2. justify-content 设置主轴的分布
3. align-items设置侧轴的对齐
4. 10vh是把屏幕分成多少份的意思
5. scroll-y=“true” 实现y轴上的可以滑动
6. 因为scroll无法使用flex-grow: 1所以需要在外面再给它包裹一层让底部可以现实
7. line-hight:1 行距设小

耶！！跟着视频敲终于敲出来，大致上是相似了，因为前端知识只是粗略了解了，但是布局真的是个大难题，看着视频敲很简单，但是自己操作的话就很难，例如这个头部这里的设置也是一个麻烦！