CSS样式与大项目——前端监控系统|青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第2天
理解CSS样式
例如：
h1{ //选择器
color:black; //属性名：属性值
font-size:14px; //属性名：属性值
}
页面中使用css的三种格式
-
外链式
<link rel="stylesheet" href="/assets/style.css"> -
嵌入式
<style>
li{
margin:0;
list-style:none;
}
p{
margin:lem 0;
}
</style>
- 内联式
<p style="margin:lem 0">Example Content</p>
其中选择器的类型有通配选择器、标签选择器、id选择器、类选择器和属性选择器。伪类分为状态伪类和结构型伪类。
状态伪类：a标签的几种状态伪类
<style>
a:link{ //默认状态下的样式
color:black;
}
a:visited{ //访问过状态下的样式
color:gray;
}
a:hover{ //鼠标移动到链接上的状态样式
color:orange;
}
a:active{ //鼠标点击链接后的状态样式
color:red;
}
</style>
结构型伪类：li标签的几种伪类
<style>
li:first-child{ //li下第一个孩子的样式
color:coral;
}
li:last-child{ //li下最后一个孩子的样式
color:coral;
}
</style>
样式组合：
- 直接组合（AB）：满足a同时满足b
- 后代组合（A B）：选中b，如果他是a的子孙
- 亲自组合（A>B）：选中b，如果他是a的子元素
- 兄弟选择器（A~B）：选中b，如果他在a后且和a同级
- 相邻选择器（A+B）：选中b，如果他紧跟在a后边
样式颜色:
rgb形势下调节，r表示红色，g表示绿色，b表示蓝色。hsl表示颜色，饱和度和亮度。颜色可以写成rgb（255,255,255）；hsl（50%，50%，50%）或者十六进制的#ffffff，其中alpha表示透明度，写法如下：rgba(255,0,0,0.47)
样式字体：
font-family：表示一个字体的家族，font-family中可以设置很多种类的字体，因为浏览器不一定会识别哪一种字体
font-size：
- 关键字：small，medium，large
- 长度：px，em
- 百分数，相对父元素字体大小 font-weight：字重
line-height：行高
继承：某些属性会自动继承我父元素的的计算值，除非显示指定的一个值。
显示继承
*{
box-sizing:inherit;
}
html{
box-sizing:border-box;
}
.some-widget{
box-sizing:content-box;
}
初始值
- css样式中每一个属性都有一个初始值
- background-color的初始值为transparent
- margin-left的初始值为0
- 可以使用initial关键字显示重置为初始值
background-color:initial、
布局
- 确定内容大小和位置的算法
- 依据元素，容器兄弟节点和内容信息来计算
- 相关技术有常规流程，浮动和相对位置
盒子模型
块级 vs 行级
- 块级，不和其他盒子并排摆放，适用于所有盒子模型。
display:block; - 行级，和其他盒子放在一起或者拆开成多行，盒子中weigh，height不适用。
display:inline;
大项目——前端检测系统
前端监测可以更快的发现问题，是产品做决策的依据，为之后的业务拓展提高更多的可能性，检测目标有js错误，资源异常，接口错误，白屏的情况。
前端监控的流程：
首先前端埋点，接着数据采集并上报，数据建模储存、传输、统计，数据化展示并反馈数据，检测中有问题出现触发报警。 买点方法有三种：代码埋点，可视化埋点，无痕埋点。
