凌歆的博客

HTML与CSS学习脑图

文件路径 绝对路径 相对路径超链接标签 1.语法格式 2.属性 3.类别HTML注释和特殊字符HTML标签结构 兄弟关系 父子关系HTML常用标签 标题标签 段落标签 换行标签 格式化标签 div和span标签 图像标签 h5新增标签 音频标签 视频标签o 水平线标签vscode编辑器 快捷键HTML语法介绍 1.基本语法 2.结构图web标准 1.定义 2.作用 3.构成网页 1.网页介绍 2.HTML本质

表格标签 1.基本语法 2.表头标签 3.属性 4.结构标签 5.合并单元格列表 1.无序列表 2.有序列表 3.自定义列表表单标签 1.表单域 2.表单控件 1.input 2.select 3.textarea 4.label空格字符合并现象 空格，换行解析出一个空格有语义的布局标签 本质是div header nav section aside footer article表单案例

chorm调试工具CSS 层叠样式表选择器 标签选择器 类选择器 id选择器 通配符选择器字体和文本样式 字体 1.font-size 字体大小 2.font-weight 字体粗细 3.字体样式 font-style 4.字体家族 font-family 文本样式 1.文本缩进 text-indent 2.text-align 文本水平对齐方式 3.文本修饰 水平居中方式总结 行高颜色常见取值 1.关键词表示 2.rgb表示 3.rgba

选择器进阶 1.复合选择器 1.后代选择器 2.子代选择器 2.并集选择器 3.交集选择器 4.hover伪类选择器 5.选择器总结emmet语法（vscode）背景相关属性 1.背景颜色 background-color 2.背景图片 background-image：url（） 3.背景平铺 background-repeat 4.背景位置 background-position 5.背景属性连写 1，2，3，4 6.img标签与背景图片的区别 7.背景图片大小

pxcook的使用盒子模型 1.盒子模型的介绍 2.盒子模型内容的高度和宽度（width和height） 无自动内减 3.盒子的边框（border） 单方向设置 4.盒子的内边距（padding） 单方向设置 5.盒子的外边距（margin） 单方向设置 6.盒子实际大小的计算 7.不会撑大盒子的特殊情况 8.盒子的自动内减和手动内减 9.清除默认边距 10.外边距折叠和塌陷 11. 行内元素padding和margin无效现象

结构伪类选择器 1.作用 选择父元素中的子元素 2.选择器 1.E:firstchild{} 2.E:lastchild{} 3.E:nth-child(n){} 4.E:nth-last-child(n){} 3.nth-of-type选择器伪元素 1.::after 2.::before标准流 浏览器渲染页面的一套排版规则浮动 1. 作用 1.图文环绕 2.网页布局 2.浮动属性 1.left 2.right 3.浮动的特点 脱标

定位 1.网页常见布局方式 1.标准流 2.浮动 3.定位 2.定位的使用 3.静态定位（static） 4.相对定位（relative） 5.绝对定位(absolute) 6.子绝父相 儿子绝对定位，父亲相对定位 7.固定定位(fixed) 8.定位总结元素层级关系 1.定义 2.修改元素层级装饰 1.垂直对齐方式 1.基线 2.文字对齐方式 3.垂直对齐方式 2.垂直对齐方式应用 1.行内块元素默认基线对齐 2.input与img无法对

精灵图 1.定义 2.使用方法背景图片大小 背景图片连写形式阴影效果 1.文字阴影 2.盒子阴影过渡效果 transition项目部分 1.一些HTML骨架知识 2.SEO 三大标签 3.icon图标设置 4.版心 5.css书写顺序 6.项目结构图

小兔香案例 1.项目布局思路 2.一些技巧 3.命名规范

字体图标 1.定义 本质是字体，展示是图标 2.优点 3.下载 4.使用 5.矢量图片转换成图标平面转换 1.定义 1.位移 2.旋转 3.缩放 2.位移 transform :translate 3.旋转 transform: rotate 角度单位deg 旋转中心点 4.缩放 transform:scale渐变 多个颜色逐渐变化的视觉效果

空间转换 1.定义 2.使用 3.位移（空间） transform:translate3d(x,y,z) 透视 z方向观察不到效果，需要设置属性 4.旋转（空间） 1.绕x轴旋转 transform:rotateX() 2.绕y轴旋转 transform:rotateY() 3.绕z轴旋转 transform:rotateZ() 4.左手定则 **左手定则：左手握住旋转轴，拇指指向旋转轴的正值方向，手指弯曲的方向为旋转正值方向** 5.缩放（空间

移动端特点 1.移动端与pc端网页布局的区别 2.视口 根据设备的不同网页宽度不同 3.二倍图 解决低分辨率在高分辨率设备下失真的问题 4.移动端主流设备分辨率百分比布局 流式布局 宽度自适应，高度固定flex布局 1.定义 浏览器提倡的布局模型 2.布局模型 3.主轴对齐方式 主轴可以更改，默认x轴 4.侧轴对齐方式 1.弹性盒子的一系列特点 侧轴可以更改，默认y轴 5.伸缩比 flex属性 代表子元素占父元素宽度的份数

flex布局 1.修改主轴对齐方式 2.弹性盒子显示特点 默认情况下，**弹性盒子沿主轴方向依次排列，不换行**，当**总的盒子的宽度之和大于父盒子时**，**子盒子会被压缩（每个子盒子的宽度变小），仍然不换行** 3.弹性盒子的换行 4.换行后行与行之间的对齐方式省略显示过长的文字 子主题 1

移动适配 定义：元素的宽高随着设备的宽高等比缩放长度单位 1.rem 1rem=1HTML字号大小 2.移动适配原理 根据设备视口的不同，相应的修改html字号 媒体查询 检测视口宽度，设置差异化的css 3.rem适配 html字号目前为视口宽度的1/10 4.根据设计稿确定rem 5.手淘移动适配js插件 flexible.jsless语法 1.完成px单位到rem单位的转换 2.less简介 3.vdcode安装easyless插件 4.less注

长度单位 1.vw 1vw=1/100视口宽度 2.vh 1vh=1/100视口高度 3.根据设计稿确定vw/vh尺寸

媒体查询 1.媒体查询的目的 根据不同的视口宽度，设置差异化的css样式 2.媒体查询开发中的使用方法 3.媒体查询-隐藏内容BootStrap 1.UI框架 2.简介 3.下载 4.使用 5.布局版心类 6.栅格系统 7.其他类 1.表格效果 2.按钮效果 3.表单效果 4.图片效果 5.布局类BootStrap组件 字体图标BootStrap插件 轮播图