移动端工程师学习javascrip的笔记和归纳，内容非常基础。
结构伪类选择器
作用：根据元素的结构关系找出元素
| 选择器 | 说明 |
|---|---|
| E:first-child | 查找第一个 E 元素 |
| E:last-child | 查找最后一个 E 元素 |
| E:nth-child(N) | 查找第N个 E 元素（第一个元素N值为1） |
li:first-child {
backgournd-color: green
}
:nth-child(公式)
作用：根据元素的结构关系，查找多个元素
| 功能 | 公式 |
|---|---|
| 偶数标签 | 2n |
| 奇数标签 | 2n+1；2n-1 |
| 5的倍数的标签 | 5n |
| 找到第5个以后的元素 | n+5 |
| 找到第5个以前的元素 | -n+5 |
伪元素选择器
作用：创建虚拟元素（伪元素），用来摆放装饰性的内容
| 选择器 | 说明 |
|---|---|
| E::before | 在E元素里面最前面添加一个伪元素 |
| E::after | 在E元素里面最后面添加一个伪元素 |
必须设置content:""属性，用来设置伪元素的内容，如果没有内容，则引号留空- 伪元素默认是
行内显示模式 权重和标签选择器相同
<style>
div {
width: 300px;
height: 300px;
background-color: red;
}
div::before {
content: "老鼠";
}
div::after {
content: "大米";
}
</style>
<body>
<div>爱</div>
</body>
盒子模型
盒子模型重要组成部分
- 内容区域：width height
- 内边距：padding
- 边框线：border
- 外边距：margin
边框线 border bd
属性名：border 属性值：粗细 线条样式 颜色
| 属性值 | 线条样式 |
|---|---|
| solid | 实线 |
| dashed | 虚线 |
| dotted | 点线 |
单方向边框线
- 属性名：broder-方位名词（bd+方位名词首字母，例如：bdl）
- 属性值：粗细 线条样式 颜色
内边距 padding
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
padding多值写法：
从上开始顺时针转一圈，如果当前方向没有数值，取值跟对面一样
内减模式 box-sizing: border-box
默认情况下：盒子尺寸 = 内容尺寸 + border + padding。
给盒子加border/padding，会撑大盒子。
解决方法：
- 手动做减法：减掉border/padding
- 内减模式：
box-sizing：border-box
div {
width: 1000px,
height: 200px,
padding: 20px
box-sizing: border-box
}
版心居中 margin: 0 auto
- 版心居中要求：盒子要有宽度
div {
width: 1000px,
height: 200px,
margin: 0 auto
}
清除标签默认样式
清除标签默认样式，比如：默认的内外边距
<style>
* {
margin: 0;
padding
}
// 去掉列表的项目富豪
li {
list-style: none;
}
</style>
元素溢出 overflow
作用：控制溢出元素的内容的显示方式
属性名：overflow
| 属性值 | 效果 |
|---|---|
| hidden | 隐藏溢出 |
| scroll | 溢出滚动（无论是否溢出，都显示滚动条位置） |
| auto | 溢出滚动（溢出时才显示滚动条位置） |
外边距问题
合并问题
场景：垂直排列的兄弟元素，上下margin合并
现象：取两个margin中的较大值生效
塌陷问题
场景：父子级的标签，子级的添加上下边距会产生塌陷问题
现象：导致父级一起上下移动
解决方法：
- 方法1：取消子级margin，父级添加padding
- 方法2：父级设置overflow：hidden
- 方法3：父级设置 border-top
行内元素 - 内外边距问题
场景：行内元素添加margin和padding，无法改变元素垂直位置
解决方法：
- 行内元素添加
line-height，改变垂直位置
span {
margin: 50px;
padding: 30px;
line-height: 100px;
}
圆角 border-radius
属性名：border-radius
属性值：数字+px / 百分比
阴影 border-shadow
属性名：border-shadow 属性值：x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
- x轴偏移量 y轴偏移量 必须
- 默认外阴影，内阴影添加inset
CSS书写顺序
- 盒子模型属性
- 文字样式
- 圆角阴影等装饰属性
