CSS|青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第3天

选择器的优先级是跟它的特异度相关的， 我们可以看下面这个例子，来判断一下哪条规则会生效：

<article>
 <h1 class="title">拉森火山国家公园</h1>
</article>
<style>
 .title{
   color:blue;
 }
 article h1{
  color:red;
 }
</style>

上述问题就涉及到选择器的优先级问题，它是由选择器的特异度值决定的，特异度就是选择器特殊的程度，越特殊选择器的优先级越高。

继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值。一般CSS中和文字相关的属性都是可以继承的，跟盒模型相关的都是不可以继承的。对于不可继承的元素，想要其继承父元素，可以使用inherit表示显示继承，例如

*{
 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

CSS求值过程

布局（Layout）是什么？

• 确定内容的大小和位置的算法
• 依据元素、容器、兄弟结点和内容等信息来计算

布局的相关技术

• 常规流
  • 行级
  • 块级
  • 表格布局
  • FlexBox
  • Grid布局
• 浮动
• 绝对定位

后面是一些JavaScript的知识点

如何写好JavaScript

写好JavaScript的一些原则

• 各司其职：让HTML、CSS和JavaScript职能分离
• 组件封装：好的UI组件具备正确性、扩展性、复用性
• 过程抽象：应用函数式编程思想

组件是指Web页面上抽出来一个个包含模板（HTML）、功能(JS)和样式（CSS）的单元，好的组件具备封装性、正确性、扩展性、复用性

组件封装总结：

• 组件设计的原则：封装性、正确性、扩展性、复用性
• 实现组件的步骤：结构设计、展现效果、行为设计
• 三次重构
  • 插件化
  • 模块化
  • 抽象化（组件框架）

过程抽象

• 用来处理局部细节控制的一些方法
• 函数式编程思想的基础应用

高阶函数 HOF

• 以函数作为参数
• 以函数作为返回值
• 常用于作为函数装饰器