移动端工程师学习javascrip的笔记和归纳，内容非常基础。
CSS特性
继承性
继承性：子级默认继承父级的文字控制属性
注意：如果标签自己有样式，则生效自己的样式，继承自己没有设置的样式
<style>
body {
font-size: 30px;
color: blue;
}
p {
color: red;
}
</style>
<body>
<div>div 标签</div>
// 如果标签自己有样式，则生效自己的样式，继承自己没有设置的样式
<p>p 标签</p>
<span>span 标签</span>
</body>
层叠性
特点：
- 相同的属性会
覆盖：后面的CSS属性覆盖前面的CSS属性 - 不同的属性会
叠加：不同的CSS属性都生效
<style>
div {
color: red;
font-size: 30px;
}
div {
color: blue;
font-weight: 700;
}
</style>
</head>
<body>
<div class="div">div标签</div>
</body>
优先级
优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则
规则：选择器优先级高的样式生效
公式：通配符选择器 < 标签选择器 < 类选择器 < d选择器 < 行内样式 < !important
选中标签的范围越大，优先级越低 !important 提权功能，优先级最高，慎用
<style>
* {
color: red !important;
}
div {
color: blue;
}
.div {
color: aqua;
}
#div {
color: bisque;
}
</style>
</head>
<body>
<div di="div" id="div" style="color: blueviolet;">div标签</div>
</body>
优先级 - 叠加计算规则
叠加计算：如果是复合选择器，需要权重叠加计算
公式：行内样式，id选择器个数，类选择器个数，标签选择器个数
- 每一级之间
不存在进位
规则：
从左向右比较个数，同一级个数多的优先级高；个数相同，则向后比较- ！important权重最高
- 继承权重最低
<style>
/* 0 0 2 1 */
.c1 .c2 div {
color: blue;
}
/* 0 1 0 1 */
div #box3 {
color: green;
}
/* 0 1 1 0 */
#box1 .c3 {
color: orange;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
div标签颜色orange
</div>
</div>
</div>
</body>
Emmet写法
- HTML
- CSS：大多数为属性字母的首字母，多属性用+号连接
背景属性
背景平铺方式 background-repeat bgr
- no-repeat：不平铺
- repeat：平铺 默认
- repeat-x：水平方向平铺
- repeat-y：垂直方向平铺
背景图位置 background-position bgp
关键字：
- left
- right
- center
- top
- bottom
坐标：数字 + px，正负都可以
提示：
- 只写一个关键字，另一方向默认为居中
- 只写一个数字表示水平方向，垂直方向为居中
背景图缩放 background-size bgz
关键字：
- cover：定比缩放以完全覆盖背景区，可能部分看不见；
- contaner：等比缩放以完全装入背景区，可能部分空白
百分比：
- 根据盒子尺寸计算图片大小
数字 + 单位
背景图固定 background-attachment bga
属性：fixed
复合属性 background
属性值：背景色 背景图 平铺方式 位置/缩放 固定 （空格隔开，不区分顺序）
div {
width: 400px;height: 400px;
background: pink url(./images/1.png) no-repeat right center/cover;
}
显示模式
显示模式：标签的显示方式
块级元素
- 独占一行
- 宽度默认父级的100%
- 添加宽高属性
生效 - 如：div
行内元素
- 一行共存多个
- 尺寸由内容撑开
- 添加宽高属性
无效 - 如：span
行内快元素
- 一行共存多个
- 尺寸由内容撑开
- 添加宽高属性
生效 - 如：img
转换显示模式
属性名：display
属性值：
- block：块级
- inline-block 行内块
- inline：行内
