第一章 HTML
1. 语义化标签
- header：头部标签
- nav： 导航标签
- article：内容标签
- section：块级标签
- aside：栏标签
- footer：尾部标签
优点：
- 代码结构清晰
- 利于SEO
- 增加代码可读性，易于维护
2. addEventListener
在目标元素上添加事件监听器，接收三个参数：事件类型、回调函数、可选的布尔值参数，用于指定事件是否在捕获阶段触发（默认为false，即在冒泡阶段触发）
document.addEventListener("click", function(event) {}，false);
将函数赋值给一个元素的onclick属性，以响应点击事件
button.onclick = function() { };
onclick在ios上有300ms的延迟 检测元素的touchend事件，在该事件中执行click事件操作，并把300毫秒之后的click事件阻断掉
3. 绘图标签
1）<canvas>：基于像素提供2D绘制函数，只能通过脚本绘制图形
适用场景：绘制图形元素、图片图像处理、复杂动画、视频处理与渲染
实例应用:Echart
2）<svg>：全称是可缩放矢量图形，一种可以描述二维矢量图形的XML标记语言适用场景：绘制图形元素、渲染图标、网站logo、绘制可视化图表
实例应用：hightChart
4. Drag
实现页面元素的拖拽功能
<div id="blue" class="item" draggable="true"></div>
1）事件
拖放元素绑定事件
- dragstart：开始拖放时触发
- darg：正在拖放时触发
- dragend：拖放结束时触发
目标元素绑定事件：分别对应进入、移动、离开、完全进入四个状态
- dragenter：进入目标元素时触发
- dragover：在目标元素内移动时触发
- dragleave：移出目标元素时触发
- drop：在目标元素内释放时触发
2）dataTransfer对象
传递拖拽的数据，实现拖拽时的数据交换
let d = new DataTransfer();
d.setData("a", 123);
d.getData("a"); // 123
5. 页面布局方式
-
自适应布局：根据设备的分辨率自动调整大小，从而兼容多个终端。如rem（postcss-px2rem、px2rem-loader插件）
-
响应式布局：在不同大小的终端上自动伸缩，不会造成排版错乱。如@media媒体查询，%、auto、vw、vh代替固定像素px，display:Flex
6. Flex布局
任何一个容器都可以指定flex布局，行内元素也一样。
设置了display：flex后，子元素的float、clear和vertical-align属性会失效
vertical-align属性定义了行内元素的基线相对于该元素所在行的基线的垂直对齐方式
flex容器中有两条默认轴，水平主轴和垂直的交叉轴； flex容器中的每个单元块称为 flex item；
1）flex容器
.container {
display: flex | inline-flex;
}
| 属性 | 取值 | 作用 |
|---|---|---|
| flex-direction | row 行row-reverse 行，方向相反column 列column-reverse 列，方向相反 | 主轴方向 |
| flex-wrap | nowrap 不换行wrap 自动换行，第一行在上面wrap-reverse 自动换行，第一行在上面 | 是否允许换行 |
| justify-content | flex-start 与主轴启点对齐flex-end 与主轴终点对齐center 与主轴中心点对齐space-between 两端对齐主轴的起点与终点，项目之间的间隔都相等space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 | 项目在主轴上的对齐方式 |
| align-items | flex-start 交叉轴的起点对齐flex-end 交叉轴的终点对齐center 交叉轴的中心点对齐baseline 项目的第一行文字的基线对齐stretch 默认值，如果项目未设置高度或设为auto，项目将占满整个容器的高度 | 项目在交叉轴上对齐方式 |
| align-content | flex-start 与交叉轴的起点对齐flex-end 与交叉轴的终点对齐center 与交叉轴的中点对齐space-between 与交叉轴两端对齐，轴线之间的间隔平均分布space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍stretc 默认值，主轴线占满整个交叉轴 | 多根轴线的对齐方式 |
2）弹性项目
flex：0 1 auto； flex 是 flex-grow 、 flex-shrink、 flex-basis，代表不放大，等比例缩小，宽度平均分配
| 属性 | 取值 | 作用 |
|---|---|---|
| order | number类型 | 项目在容器中的排列顺序数值越小，排列越靠前默认值为 0 |
| flex-basis | autoxxxpxxx% | 在分配多余空间之前，项目占据的主轴空间默认值为auto |
| flex-grow | number类型 | 项目的放大比例默认值为 0，不放大 |
| flex-shrink | number类型 | 项目的缩小比例默认值为 1，等比例缩小 |
| align-self | flex-start 与交叉轴的起点对齐flex-end 与交叉轴的终点对齐center 与交叉轴的中点对齐baseline 项目的第一行文字的基线对齐stretch 默认值，如果项目未设置高度或设为auto，项目将占满整个容器的高度auto 继承父元素的align-items属性 | 单独设置某个项目在交叉轴上的对齐方式 |
flex:1 & flex:0 & flex:auto & flex:none
flex:1=flex: 1 1 0%
- 父元素尺寸不足的时候，会优先最小化内容尺寸
- 适用于等分布局和等比例列表
flex:auto=flex: 1 1 auto
- 父元素尺寸不足的时候，会优先最大化内容尺寸
- 适用于内容动态适配布局，自适应布局，子元素个数不确定时
flex:0=flex: 0 1 0%
- 内容最小化宽度
- 适用于子元素占用最小化的内容宽度时
flex:none=flex:0 0 auto;
- 元素的大小由内容决定，flex-grow，flex-shrink都是0，元素没有弹性，通常表现为内容最大化宽度
- 按钮里面文字不换行处理
7. 盒子模型
1）W3C盒模型：box-sizing：content-box
盒子宽度：左右margin + 左右 border + 左右 padding + width
2）IE 盒模型：box-sizing:border-box 盒子宽度：左右margin + width（width = 内容 + 左右padding + 左右border）
3）其他：box-sizing:padding-box 盒子宽度：width + 左右border + 左右margin（width = 左右padding + 内容）
8. BFC
块级格式化上下文，是一个独立的渲染区域
1）特点
- 是一个块级元素，内部子元素垂直排列
- 子元素的变化不会影响外边元素
- 子元素外边距发生重叠，外边距 = maxMargin - minMargin
- BFC区域不会与浮动的容器发生重叠
- 计算父元素高度时，浮动元素也会参与计算
2）实现BFC
- float：left或者right
- position：absoulte或者fixed
- display：inline-block
- overflow：hidden、auto、scroll
- display：flex
3）应用场景
- 利用BFC阻止元素被浮动元素覆盖
- 利用BFC解决两个相邻元素的上下margin重叠问题；
- 利用BFC解决高度塌陷问题；
- 利用BFC实现多栏布局（两栏、三栏、圣杯、双飞翼）等
高度坍塌：父元素没有设置高度，内部所有子元素都浮动，由于没有子元素悬空不占位的，父元素的高度为0
9. 双飞翼和圣杯布局
两侧宽度固定，中间宽度自适应的三栏布局，核心目的是让中间部分在DOM结构中优先加载，以便先行渲染
1）双飞翼布局：三栏均左浮动，通过设置div的margin-left和margin-right实现互不遮挡
2）圣杯布局：三栏均左浮动，设置外层div的padding-left和padding-right预留位置，通过定位或移动实现互不遮挡
position相对于自身定位（或者使用transform移动优化性能）
第二章 CSS
1. 元素选择器
- last-child 最后一个子元素
- nth-child(n) 第n个子元素
- nth-last-child(n) 倒数第n个子元素
2. 属性选择器
[属性名] {}：包含某个属性名的元素[属性名=值] {}：包含具体属性值的元素[属性名^=值] {}：以具体属性值开头的元素[属性名*=值] {}：包含具体属性值的元素[属性名$=值] {}：以具体属性值结束的元素
3. 边框属性
- border-radius：设置圆角
- border-image：边框图片
4. 背景图属性
- background-image 背景图片
- background-repeat 背景图片是否重复
- background-size 背景图片尺寸
cover: 平铺满整个容器
contain: 将背景图片按照自身缩放比例显示在容器内，不一定占满容器
-
background-position 位置
-
background-origin 背景图片相对于内容框的位置
padding-box: 背景图片相对于内边距定位，默认值
border-box: 背景图片相对于边框定位，以边框左上角为参照物
content-box: 背景图片相对于内容区域定位，以内容区域左上角为参照物
- background-clip 背景图片裁剪
padding-box: 背景图片裁剪到内边距区域
border-box: 背景图片裁剪为边框区域
content-box: 背景图片裁剪到内容区域
5. 媒体查询
mediaqueries ,支持为不同分辨率的设备设定不同的样式
6. 阴影
- 文本阴影：text-shadow
- 盒子阴影：box-shadow
7. 色彩渐变
- 线性渐变：linear-gradient
- 径向渐变：radial-gradient
8. 元素隐藏方法
- overflow:hidden 隐藏除宽高外的内容
- opacity:0 元素在页面不可见，不会改变页面布局，DOM树上仍存在元素，可执行绑定事件
- visibility:hidden 元素在页面不可见，不会改变页面布局，DOM树上仍存在元素，不可执行绑定事件
- display:none 元素在页面不可见，会改变页面布局，DOM树上不存在元素，不可执行绑定事件
display属性值
| 值 | 含义 |
|---|---|
| none | 此元素不会被显示 |
| block | 此元素将显示为块级元素，前后带有换行符 |
| inline | 默认值，此元素会被显示为内联行内元素，元素前后没有换行符 |
| inline-block | 行内块元素，可设置宽高，没有换行符 |
| table | 此元素会作为块级表格来显示，表格前后带有换行符 |
| inherit | 规定应该从父元素继承display属性的值 |
| flex | 弹性盒模型，支持各种对齐方式，支持自适应 |
| grid | 网格布局，最新的布局方式，ie不支持 |
position属性值
| 值 | 含义 |
|---|---|
| absolute | 绝对定位，脱离文档流，相对于父级元素中第一个定位元素 |
| relative | 相对定位，不脱离文档流，参考自身静态位置定位 |
| fixed | 固定定位，固定的对象是浏览器可视窗口而并非是body或是父级元素 |
| static | 默认值，无定位 |
| sticky | 粘性定位，相当于relative 和 fixed 的结合，元素在跨越特定阈值前为相对定位，之后为固定定位。适用于顶部导航栏、标题、操作栏、底部评论等 |
| inherit | 从父元素继承 position 属性的值 |
9. css选择器
- 通配符 * 对所有元素生效
- Id #
- class类名
- 标签
- 后代选择器
- 相邻兄弟 +
- 通用兄弟 ～
- 伪类 ：
!import（最大）
行内样式style（1000）
id选择器（100）
class 选择器（10） 、 属性选择器（10） 、 伪类选择器（10）
标签选择器（1）
通配符选择器*（最小）
10. 高度坍塌处理
浮动元素会影响父元素，如果其父元素未设置高度，就会产生高度塌陷的问题
- 父元素添加overflow:hidden，生成一个BFC
- 父元素设置height
- 在父元素中最后设置一个块级元素, 设置clear:both
11. 文本溢出
- 单行文本溢出
width:100px;
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
white-space: nowrap; // 规定段落中的文本不进行换行
- 多行文本溢出
width:100px;
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
display:-webkit-box; // 作为弹性伸缩盒子模型显示
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3; // 显示的行数
12. css动画
- animation 关键帧动画
.w_animation {
width: 200px;
height: 200px;
animation: myfirst 2s ease 0.5s infinite alternate;
}
@keyframes myfirst {
from {
background:red;
}
to {
background:yellow;
}
}
- transition过渡动画
transition: property duration timing-function delay;
transition-property： 设置过渡效果的css属性名称 ,all表示全部
transition-duration： 完成过渡效果的时间
transition-timing-function：指定过渡函数, 规定速度效果的速度曲线
transition-delay： 过渡效果开始的延迟时间
- transform 转变动画
transform: rotate(45deg);
- rotate() 2D旋转
- rotate(x,y,z,angle) 3D旋转
- scale(x,y) 2D缩放
- scale3d(x, y, z) 3D缩放
- skew 倾斜
- translate(45px) 2D移动
- translate3d(x,y,z) 3D移动
- transform-origin 基准点
13. 元素居中
1）父元素宽度已知
body {
width: 1000px;
height: 1000px;
margin: 0 auto;
}
div {
width: 100px;
margin: calc(500px - 50px);
}
2）父元素宽度未知
行内元素：text-align: center
body {
text-align: center;
}
div {
width: 100px;
display: inline-block;
}
块元素：position: absolute
body {
position: releative;
}
div {
position: absolute；
top：50%；
left： 50%；
transform: translate(-50%,-50%);
}
快元素：display: flex
body {
display: flex;
align-items: center;
justify-content: center;
}
