web标准
| 构成 | 语言 | 说明 |
|---|---|---|
| 结构 | html | 页面元素和内容 |
| 表现 | css | 网页元素的外观和位置等页面样式（颜色、大小等） |
| 行为 | javascript | 网页模型的定义与页面交互 |
HTML基础
html页面固定结构
vscode中用！+回车可以直接出此框架
/* 文档类型申明，告诉浏览器该网页的html版本：默认为html5 */
<!DOCTYPE html>
/* 标识网页使用的语言 作用：搜索引擎归类+浏览器翻译*/
/* 常见语言：zh-CN 简体中文 en 英文 */
<html lang="en">
<head>
/* 标识网页使用的字符编码 */
/* 作用：保存和打开的字符编码需要统一设置，否则可能会出现乱码 */
/* 常见字符编码：UTF-8 万国码，国际化的编码 GB2312 6000+汉字 GBK 20000+汉字 */
/* 开发中统一使用UTF-8字符编码 */
<meta charset="UTF-8">
/* IE/edge浏览器 ie的兼容性差 */
<meta http-equiv="X-UA-Compatible" content="IE=edge">
/* 将宽度设置为设备宽度 常用于移动端网页 */
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>骨架结构</title>
</head>
<body>
<h1 align="center">Hello World</h1>
<p align="center">动手改变世界</p>
</body>
</html>
语法规范
注释
作用：为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码，浏览器执行代码时会忽略所有的注释
<!--这是注释-->
<!--快捷键：ctrl+/-->
标签的组成和关系
结构：<开始标签> 包裹内容<结束标签>
结构说明：
- 标签由<、>、/、英文单词和字母组成，并且<>里的内容为标签名
- 常见标签由两部分组成，称为双标签
- 少数标签只由一部分组成，即单标签，自成一体，无法包裹内容
关系：
父子关系（嵌套关系）：
<head>
<title></title>
</head>
兄弟关系（并列关系）：
<head></head>
<body></body>
标签学习
属性注意点：
- 格式：属性名=“属性值”
- 标签的属性可以写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性直接按必须以空格隔开
- 属性之间没有顺序之分
标题标签
代码：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
语义：1-6级标题，重要程度依次递减
特点：
- 文字都有加粗
- 文字都有变大，并且从h1-h6文字逐渐减小
- 独占一行
排版标签
段落标签
代码：
<p>我是一段文字</p>
语义：段落
特点：
- 段落之间存在间隙
- 独占一行
换行标签
代码：
<br>
语义：换行
特点：
- 单标签
- 让文字强制换行
水平线标签
代码：
<hr>
语义：主体的分割转换
特点：
- 单标签
- 在页面中显示一条水平线
文本格式化标签
代码：
| 标签 | 说明 | 标签 | 说明 | |
|---|---|---|---|---|
| b | 加粗 | strong | 加粗 | |
| u | 下划线 | ins | 下划线 | |
| i | 倾斜 | em | 倾斜 | |
| s | 删除线 | del | 删除线 |
语义：突出重要性的强调语境，常用第二列
媒体标签
图片标签
<img src="目标图片路径" alt="替换文本" title="提示文字" width="宽度" height="高度">
特点：
- 单标签
- img标签需要展示对应的效果，需要辅助标签的属性进行设置
src属性注意点：
- 当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）
- 路径的情况其他情况
- "./"表示当前位置
- "…/"表示返回上一级文件夹
alt属性注意点：
- 当图片加载失败时，才显示alt的文本
title属性注意点：
- 当鼠标悬停时才显示的文本
width和height属性注意点：
- 如果只设置了其中一个，另一个没设置的会自动等比例缩放（图片不会变形）
- 如果同时设置了两个，若设置不当此时图片可能会变形
路径
页面需要加载图片，需要先找到对应的图片
绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
相对路径（常用）：从档期那文件开始出发找目标文件的过程
相对路径分类:
- 同级目录：当前文件和目标文件在同一目录中
<img src="目标图片.gif>
<img src="./目标图片.gif">
- 下级目录：目标文件在下级目录中
<img src="img/目标图片.gif>
- 上级目录：目标文件在上级目录中
<img src="../目标图片.gif>
音频标签
<audio src="./music.mp3" controls></audio>
常见属性：
| 属性名 | 功能 |
|---|---|
| src | 音频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（部分浏览器不支持） |
| loop | 循环播放 |
注意点：
- 音频标签目前支持三种格式：mp3,wav,ogg
视频标签
<video src="./video.mp4" controls></video>
常见属性：
| 属性名 | 功能 |
|---|---|
| src | 视频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（谷歌浏览器中需配合muted实现静音播放） |
| loop | 循环播放 |
注意点：
- 音频标签目前支持三种格式：mp4,webm,ogg
链接标签
<a href="./目标网页.html" target="_属性值"> 超链接</a>
特点：
- 双标签，内部可以包裹内容
- 如果需要a标签点击之后去指定页面，需要设置a标签的href属性
target属性（目标网页的打开方式）：
| 取值 | 效果 |
|---|---|
| self | 默认值，在当前窗口中跳转（覆盖原网页） |
| blank | 在新窗口跳转（保留原网页） |
列表标签
无序列表
标签组成：
| 标签名 | 说明 |
|---|---|
| ul | 表示无序列表的整体，用于包裹标签 |
| li | 表示无序列表的每一项，用于包含每一行的内容 |
显示特点：列表的每一项前面默认显示圆点标识
注意点：
- ul标签中只允许包含li标签
- li标签可以包含任意内容
有序列表
标签组成：
| 标签名 | 说明 |
|---|---|
| ol | 表示有序列表的整体，用于包裹标签 |
| li | 表示有序列表的每一项，用于包含每一行的内容 |
显示特点：列表的每一项前面默认显示序号标识
注意点：
- ol标签中只允许包含li标签
- li标签可以包含任意内容
自定义列表
标签组成：
| 标签名 | 说明 |
|---|---|
| dl | 表示自定义列表的整体，用于包裹dt/dd标签 |
| dt | 表示自定义列表的主题 |
| dd | 表示自定义列表的针对主题的每一项内容 |
显示特点：dd前会默认显示缩进效果
注意点：
- dl标签中只允许包含dt/dd标签
- dt/dd标签可以包含任意内容
表格标签
基本标签：
| 标签名 | 说明 |
|---|---|
| table | 表格整体，可用于包裹多个tr |
| tr | 表格每行，可用于包裹td |
| td | 表格单元行，可用于包裹内容 |
注意点：标签的嵌套关系：table > tr > td
表格相关属性
| 属性名 | 属性值 | 效果 |
|---|---|---|
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
注意点：实际开发中建议使用css
表格标题和表格单元格标签
| 标签名 | 名称 | 说明 |
|---|---|---|
| caption | 表格大标题 | 表示表格整体大标题，默认在表格整体顶部居中位置显示 |
| th | 表格单元格 | 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示 |
注意点：
- caption标签书写在table标签内部
- th标签书写在tr标签内部（用于替换td标签）
表格的结构标签
| 标签名 | 名称 |
|---|---|
| thread | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格底部 |
注意点：
- 表格结构标签内部用于包裹tr标签
- 表格的结构标签可以省略
合并单元格
将水平或垂直多个单元格合并成一个单元格
合并单元格步骤：
- 明确合并哪几个单元格
- 通过左上原则，确定保留谁删除谁
- 上下合并——只保留最上的，删除其他
- 左右合并——只保留最左的，删除其他
- 给保留的单元格设置：跨行合并或者跨列合并
| 属性名 | 属性值 | 说明 |
|---|---|---|
| rowspan | 合并单元格的个数 | 跨行合并，将多行的单元格垂直合并 |
| colspan | 合并单元格的个数 | 跨列合并，将多列的单元格水平合并 |
注意点：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）
表单标签
input系列标签
input标签可以通过type属性值的不同展示不同效果
type属性值：
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | text | 文本框，用于输入单行文本 |
| input | password | 密码框，用于输入密码 |
| input | radio | 单选框，用于多选一 |
| input | checkbox | 多选框，用于多选多 |
| input | file | 文件选择，用于之后上传文件 |
| input | submit | 提交按钮，用于提交 |
| input | reset | 重置按钮，用于重置 |
| input | button | 普通按钮，默认无功能，之后配合js添加功能 |
文本框text与密码框password属性：
| 属性名 | 说明 |
|---|---|
| placeholder | 占位符，提示用户输入内容的文本 |
单选框radio：
属性：
| 属性名 | 说明 |
|---|---|
| name | 分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中 |
| checked | 默认选中，对多选框同样适用 |
注意点：
- name属性对于单选框有分组功能
- 有相同name属性值的单选框为一组，一组中同时只能有一个被选中
文件选择file属性：
| 属性名 | 说明 |
|---|---|
| multiple | 多文件选择 |
按钮：
属性值：
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | submit | 提交按钮，点击之后提交数据给后端服务器 |
| input | reset | 重置按钮，点击之后恢复表单默认值 |
| input | button | 普通按钮，默认无功能，之后配合js添加功能 |
注意点：
- 如果需要实现以上按钮，需要配合form标签（表单域标签）使用
- form使用方法：用form标签把表单标签一起包裹起来
- value可为按钮修改文字
button系列标签
在网页中显示用户点击的按钮
属性值：
| 标签名 | type属性值 | 说明 |
|---|---|---|
| button | submit | 提交按钮，点击之后提交数据给后端服务器 |
| button | reset | 重置按钮，点击之后恢复表单默认值 |
| button | button | 普通按钮，默认无功能，之后配合js添加功能 |
注意点：
- 谷歌浏览器中button默认是提交按钮
- button标签是刷给你标签，便于包裹其他内容：文字、图片等
select下拉菜单标签
标签组成：
| 标签名 | 说明 |
|---|---|
| select标签 | 下拉菜单的整体 |
| option标签 | 下拉菜单的每一项 |
常见属性：
| 属性值 | 说明 |
|---|---|
| selected | 下拉菜单的默认选中 |
textarea文本域标签
在网页中提供可输入多行文本的表单控件
常见属性：
| 属性值 | 说明 |
|---|---|
| cols | 规定了文本域内可见宽度 |
| rows | 规定了文本域内可见行数 |
注意点：
- 右下角可以拖拽改变大小，可使用css禁用
- 实际开发中针对样式效果常用css
- 文字太长一行放不下会自动换行
label标签
常用于绑定内容与表单标签的关系
使用方法一：
- 使用label标签把内容（如文本）包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性值
使用方法二：
- 直接使用label标签把内容（如文本）和表单标签一起包裹起来
- 需要把label标签的for熟悉感删除即可
语义化标签
没有语义的布局标签
| 标签名 | 说明 |
|---|---|
| div | 一行只显示一个（独占一行） |
| span | 一行可以显示多个 |
有语义的布局标签（了解）–手机端
常用于手机端页面设置
| 标签名 | 说明 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
注意点：以上标签显示特点和div一致，但是比div多了不同的语义
字符实体
能通过字符实体在网页中显示特殊符号
css（层叠样式表）基础
css语法规则
写在style标签中，style标签一般写在head标签里面，title标签下面
格式：选择器{css属性名: 属性值;}
选择器：查找标签
css引入方式
内嵌式：css写在style标签中，可写在页面任意位置，但默认写在head标签中
外联式：css写在一个单独.css文件中，需要通过link标签在网页中引入
行内式（不常用）：css写在标签的style属性中
| 引入方式 | 书写位置 | 作用范围 | 使用场景 |
|---|---|---|---|
| 内嵌式 | css写在style标签中 | 当前页面 | 小案例 |
| 外联式 | css写在单独css文件中，通过link标签引入 | 多个页面 | |
| 行内式 | css写在标签的style属性中 | 当前标签 | 配合js使用 |
基础选择器
作用：选择页面中对应的标签，方便后续设置样式
标签选择器
结构：标签名{css属性名: 属性值;}
作用：通过标签名，找到页面中多有这类标签，设置样式
注意点：
- 标签选择器选择的是一类标签，而不是单独某一个
- 标签选择器无论嵌套关系有多深，都能找到对应的标签
类选择器
结构：.类名{css属性名: 属性值;}
作用：通过标签名，找到页面中所有带有这个类名的标签，设置样式
注意点：
- 所有标签都有class属性，class属性的属性值称为类名
- 类名可以由数字、字母、下划线、中划线组成，但不能以数字开头或者中划线开头
- 一个标签可以同时有多个类名，类名之间以空格隔开
- 类名可以重复，一个类选择器可以同时选中多个标签
id（常用于js）选择器
结构：#id属性值{css属性名: 属性值;}
作用：通过id属性值，找到页面中所有带有这个id属性值的标签，设置样式
注意点：
- 所有标签上都有id属性
- id属性值类似于身份证号码，在一个页面中是唯一的，不可重复(可以但不符合规则)
- 一个标签只能由一个id属性值
- 一个id选择器只能选中一个标签
通配符选择器
结构：
*{css属性名: 属性值;}
作用：找到页面中的所有标签，设置样式
注意点：
- 开发中极少使用，只会在特殊情况下才会用到
- 常用于去除标签默认的margin和padding
字体和文本样式
字体样式
字体大小
属性名：font-size
取值：数字+px
注意点：
- 谷歌浏览器默认字体大小是16px
- 单位需要设置，否则无效
字体粗细
属性名：font-weight
取值：
- 关键字：
| 效果 | 关键字 |
|---|---|
| 正常 | normal |
| 加粗 | bold |
- 纯数字：100~900的整百数：
| 效果 | 取值 |
|---|---|
| 正常 | 400 |
| 加粗 | 700 |
注意点：
- 不是所有字体都提供了九种粗细，因此部分取值页面无变化
- 实际开发中以：正常、加粗两种取值使用最多
字体样式（是否倾斜）
属性名：font-style
取值：
| 效果 | 取值 |
|---|---|
| 正常(默认值) | normal |
| 倾斜 | italic |
字体类型
属性名：font-family
常见取值：
- 具体字体：‘Microsoft YaHei’,微软雅黑、黑体、宋体等
- 字体系列：sans-serif、serif、monospace等
渲染规则：
- 从左到右按照顺序查找，如果电脑中未安装改字体，则显示下一个字体
- 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
注意点：
- 如果字体名称中存在多个单词，腿脚使用引号包裹
- 最后一页字体系列不需要引号包裹
- 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示
- windows默认字体为微软雅黑，macos默认字体为苹方
字体类型
属性名：font属性连写
取值：font:style weight size family;
省略要求：只能省略前两个，如果省略了相当于设置了默认值
注意点：如果需要同时设置单独和连携形式
- 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面
样式的层叠问题
如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效
注意：
- css层叠样式表
- 层叠即叠加，表示样式可以一层一层的层叠覆盖
文本样式
文本缩进
属性名：text-indent
取值：
- 数字+px
- 数字加em（1em=当前标签的font-size的大小）
文本水平对齐方式
属性名：text-align
取值：
| 属性值 | 效果 |
|---|---|
| left | 左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
注意点：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素
水平居中方法总结 text-align:center
text-align:center能让文本、span标签、a标签、input标签、img标签居中
注意点：如果要让以上元素水平居中，text-align:center需要给以上元素的父元素设置
文本修饰
属性名：text-decoration
取值：
| 属性值 | 效果 |
|---|---|
| underline | 下划线（常用） |
| line-through | 删除线（不常用） |
| overline | 上划线（几乎不用） |
| none | 无装饰线（常用） |
注意点：开发中会使用text-decoration:none清楚a标签默认的下划线
行高
作用：控制一行的上下行间距
属性名：line-height
取值：
- 数字+px
- 倍数（当前标签font-size的倍数）
应用：
- 让单行文本垂直居中可以设置line-height:文字父元素高度
- 网页精准布局时，会设置line-height：1 取消上下行间距
行高与font连写的注意事项：
- 如果同时设置了行高和font连写，注意覆盖问题
- font:style weight size/line-height family;
颜色常见取值
属性名：
- 文字颜色：color
- 背景颜色：background-color
属性值：
| 颜色表示方法 | 表示含义 | 属性值 |
|---|---|---|
| 关键词 | 预定义的颜色名 | red、green、blue等 |
| rgb表示法 | 取值：0-255 | rgb(255,255,255) |
| rgba表示法 | a表示透明度，取值：0-1 | rgba(255,255,255,0.5) |
| 十六进制表示法 | #开头，将数字转换成十六进制表示 | #000000 |
标签居中
让div、p、h水平居中：通过margin：auto实现，左右auto即水平居中
注意点：
- 如果需要让div、p、h水平居中，直接给当前元素本身设置即可
- margin:0 auto,一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度
css进阶
选择器进阶
后代选择器：空格
作用：根据html嵌套关系，选择父元素后代中满足条件的元素
选择器语法：选择器1 选择器2{css}
结果：在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式
注意点：
- 后代包括：儿子、孙子、重孙子…
- 后代选择器中，选择器与选择器之间通过空格隔开
子代选择器：>
作用：根据html嵌套关系，选择父元素子代中满足条件的元素
选择器语法：选择器1 > 选择器2{css}
结果：在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式
注意点：
- 子代只包括儿子
- 子代选择器中，选择器与选择器之间通过 > 隔开
并集选择器
作用：同时选择多组标签，设置相同的样式
选择器语法：选择器1 ，选择器2{css}
结果：找到选择器1和选择器2选中的标签，设置样式
注意点：
- 并集选择器中的每组选择器之间通过，分割
- 并集选择器中的每组选择器可以是基础选择器或是复合选择器
- 并集选择器中的每组选择器通常一行写一个，提高代码的可读性
交集选择器
作用：选中页面中同时满足多个选择器的标签
选择器语法：选择器1 选择器2{css}
结果：找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式
注意点：
- 交集选择器中的选择器之间时紧挨着的，没有东西分割
- 交集选择器如果由标签选择器，标签选择器必须写在最前面
hover伪类选择器
作用：选中鼠标悬停在元素上的状态，设置样式
选择器语法：选择器：hover{css}
注意点：
- 伪类选择器选中的元素的某种状态
- 任何标签都可以添加伪类
emmet语法
作用：通过简写语法，快速生成代码
语法：
| 记忆 | 示例 |
|---|---|
| 标签名 | div |
| 类选择器 | .red |
| id选择器 | #one |
| 交集选择器 | p.red#one |
| 子代选择器 | ul>li |
| 内部文本 | ul>li{我是li的内容} |
| 创建多个 | ul>li*3 |
背景相关属性
背景颜色
属性名：background-color(bgc)
属性值：颜色取值
注意点：
- 背景颜色默认是透明：rgb(0,0,0)、trandparent
- 背景颜色不会影响盒子大小，并且能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色
背景图片
属性名：background-image(bgi)
属性值：background-image:url(‘图片的路径’);
注意点：
- 背景图片中url中可以省略引号
- 背景图片默认是水平和垂直方向平铺的
- 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的
背景平铺
属性名：background-repeat(bgr)
属性值：
| 属性值 | 效果 |
|---|---|
| repeat | （默认值）水平和垂直方向都平铺 |
| no-repeat | 不平铺 |
| repeat-x | 沿着水平方向（x轴）平铺 |
| repeat-y | 沿着水平方向（y轴）平铺 |
背景位置
属性名：back-ground-position(bgp)
属性值：back-ground-position:水平方向位置 垂直方向位置;
注意点：方位名词取值和坐标取值可以混用，第一个取值表示水平，第二个取值表示垂直
背景相关属性连写
属性名：background(bg)
属性值：单个属性值的合写，取值之间以空格隔开
书写顺序：推荐：background: color image repeat postion 顺序可改变，且可按需求省略
省略问题：特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background:url()
注意点：如果需要设置单独的样式和连写
- 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面
img标签和背景图片的区别
- img标签是一个标签，不设置宽高默认会以原尺寸显示
- div标签+背景图片：需要设置div的宽高，因为背景图片知识装饰的css样式，不能撑开div标签
元素显示模式
块级元素
显示特点：
- 独占一行
- 宽度默认是父元素的宽度，高度默认有内容撑开
- 可以设置宽高
代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer
行内元素
显示特点：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
代表标签：a、span、b、u、i、s、strong、ins、em、del
行内块元素
显示特点：
- 一行可以显示多个
- 可以设置宽高
代表标签：
- input、textarea、button、select…
- 特殊形况：img标签有行内块元素特点，但是chrome调试工具中显示结果是inline
元素显示模式转换
目的：改变元素默认的显示特点，让元素符合布局要求
语法：
| 属性 | 效果 | 使用频率 |
|---|---|---|
| display：block | 转换成块级元素 | 较多 |
| display：lnline-block | 转换成行内块元素 | 较多 |
| display：inline | 转换成行内元素 | 极少 |
html嵌套规范注意点
- 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等，但是p标签中不要嵌套div、p、h等块级元素
- a标签内部可以嵌套任意元素，但是不能嵌套a标签
css特性
继承性
特性：子元素有默认继承父元素样式ide特点（子承父业）
可以继承的常见属性（文字控制属性都可以继承）：
- color
- font-style、font-weight、font-size、font-family
- text-indent、text-align
- line-height等
注意点：可以通过调试工具判断样式是否可以继承
继承失效的特殊情况：
- a标签的color会继承失效
- h系列标签的font-size会继承失效
层叠性
特性：
- 给同一个标签设置不同的样式—此时样式会层叠叠加—会共同作用在标签上
- 给同一个标签设置相同的样式—此时样式会层叠覆盖—最终写在最后的样式会生效
注意点：当样式冲突时，只有当选择器优先级相同时，才会通过层叠性判断结果
优先级
特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式
优先级公式：继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<！important
注意点：
- !important写在属性值的后面，分号的前面
- !important不能提升继承的优先级，只要是继承优先级最低
- 实际开发中不建议使用!important
css盒子模型
介绍
概念：
- 页面中的每一个标签，都可看作是一个‘盒子’，通过盒子的视角更方便的进行布局
- 浏览器在渲染（显示）页面时，会将网页中的元素看作是一个个的矩形区域，称为盒子
盒子模型：
- css中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型
内容区域的宽度和高度
作用：利用width和height属性默认设置盒子内容区域的大小
属性：width/height
常见取值：数字+px
边框 （border）
连写形式
属性名：border
属性值：单个取值的连写，取值之间以空格隔开，如：border：边框粗细 边框类型 边框颜色;
快捷键：bd+tab
单方向设置
场景：只给盒子的某个方向单独设置边框
属性名：border-方位名词
属性值：连写的取值
单个属性 （不常用）
作用：给设置边框粗细、边框样式、边框颜色效果
单个属性：
| 作用 | 属性名 | 属性值 |
|---|---|---|
| 边框粗细 | border-width | 数字+px |
| 边框样式 | border-style | 实线solid，虚线dashed，点线dotted |
| 边框颜色 | border-color | 颜色取值 |
内边距（padding）
注意：padding属性会把盒子撑大，设计时需注意减去padding的大小
css3盒子模型（自动內减）
需求：给盒子设置border或者padding时，不希望盒子被撑大
解决方案一：手动內减
- 操作：自己计算多余大小，手动在内容中减去
- 缺点：项目中计算量太大，较麻烦
解决方案二：自动內减
- 操作：给盒子设置属性box-sizing：border-box;即可
- 优点：浏览器会自动计算多余大小，自动在内容中减去
外边距（margin）
清除默认内外边距
默认边距：
- body标签默认有margin:8px
- p标签默认有上下的margin
- ul标签默认有上下的margin和padding-left
方法：
- 列出所有标签{margin:0;padding:0;}
- 星号{margin:0;padding:0;}
版心居中
版心：网页有效内容
设置：margin：0 auto;
外边距折叠现象
合并现象
场景：垂直布局的块级元素，上下的margin会合并
结果：最终两者距离为margin最大值
解决方法：只给其中一个盒子设置margin即可
塌陷问题(坑爹)
场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上
结果：导致父元素一起向下移动
解决方法：
- 给父元素设置border-top或者padding-top会作用在父元素上
- 给父元素设置overflow:hidden
- 转换成行内块元素
- 设置浮动
行内元素的内外边距问题
场景：通过margin或padding修改行内元素的垂直位置时，不生效，即行内标签的margin/padding-top/bottom不生效
css浮动
结构伪类选择器
作用：根据元素在html中的结构关系查找元素
优势：减少对于html中类的依赖，有利于代码整洁
场景：常用于查找某父级选择器中的子元素
选择器：
| 选择器 | 说明 |
|---|---|
| E:firsst-child{} | 匹配父元素中第一个子元素，并且是E元素 |
| E:last-child{} | 匹配父元素中最后一个子元素，并且是E元素 |
| E:nth-child(n){} | 匹配父元素中第n个子元素，并且是E元素 |
| E:nth-last-child(n){} | 匹配父元素中倒数第n个子元素，并且是E元素 |
n的注意点：
- n为：0、1、2、3、4、5、6…
- 通过n可以组成常见公式
| 功能 | 公式 |
|---|---|
| 偶数 | 2n、even |
| 奇数 | 2n+1、2n-1、odd |
| 找到第五个 | -n+5 |
| 找到从第五个往后 | n+5 |
伪元素
伪元素：一般页面中的非主体内容可以使用伪元素
区别：
- 元素：html设置的标签
- 伪元素：由css模拟出的标签效果
种类：
| 伪元素 | 作用 |
|---|---|
| ：：before | 在父元素内容的最前添加一个伪元素 |
| ：：after | 在父元素内容的最后添加一个伪元素 |
注意点：
- 必须设置content属性才能生效
- 伪元素默认是行内元素
标准流
标准流：又称文档流，是浏览器在渲染网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见标准流排版规则：
- 块级元素：从上往下，垂直布局，独占一行
- 行内元素或行内块元素：从左往右，水平布局，空间不够自行折行
浮动
作用：图文环绕（早期）、网页布局（现在）
特点：
- 浮动元素会脱离标准流的控制，在标准流中不占位置
- 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
- 浮动找浮动，下一个浮动元素会在上一个浮动元素的左右浮动
- 浮动的标签是顶对齐的，加margin-top可改变
- 浮动元素有特殊的显示效果：一行可以显示多个，可以显示宽高（即具备行内块的特点）
注意点：浮动的元素不能通过text-align:center或者margin:0 auto调整位置
css书写顺序
好处：执行效率高
顺序：
- 浮动或display
- 盒子模型相关属性：margin border padding 宽度高度背景色
- 文字样式
清除浮动
含义：清除浮动带来的影响（如果子元素浮动了，此时子元素不能撑开标准流的块级父元素）
原因：子元素浮动后托标——不占位置
目的：需要父元素有高度，从而不影响其他元素的布局
解决方法一：直接设置父元素高度
- 优点：简单粗暴，方便
- 缺点：有些布局中不能固定父元素高度，如：新闻列表等
解决方法二：额外标签法
- 操作：在父元素内容的最后添加一个块级元素，给添加的块级元素设置clear:both
- 缺点：会在页面中添加额外的标签，会让页面的html结构变得复杂
解决方法三：单伪元素清除法
- 操作：用伪元素替代额外标签
基本写法：
.clearfix::after{
content：'';
display:block;
clear:both;
}
补充写法：
.clearfix::after{
content：'';
display:block;
clear:both;
/*补充代码：在网页中看不到伪元素，在高版本浏览器中无影响*/
height:0;
visibility:hidden;
}
- 优点：项目中使用，直接给标签加类即可清除浮动
解决方法四：双伪元素
- 操作：
.clearfix::before，
.clearfix::after{
content:'';
/*转换成表格显示模式*/
display:table;
}
.clearfix::after{
clear:both;
}
- 优点：项目中使用，直接给标签加类即可清除浮动，塌陷问题也可以用此部分代码解决
解决方法五：给父元素设置overflow:hidden
- 操作：直接给父元素设置overflow:hidden
- 优点：方便
css定位装饰
定位
网页常见布局方式
标准流：
- 块级元素独占一行——垂直布局
- 行内元素/行内块元素一行显示多个——水平布局
浮动：
- 可以让原本垂直布局的块级元素变成水平布局
定位：
- 可以让元素自由的摆放在网页的任意位置
- 一般用于盒子之间的层叠情况
定位的基本使用
使用步骤
一、设置定位方式
属性名：position
属性值：
| 定位方式 | 属性值 |
|---|---|
| 静态定位 | static |
| 相对定位 | relative |
| 绝对定位 | absolute |
| 固定定位 | fixed |
二、设置偏移值
- 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
- 选取的原则一般是就近原则（离哪边近用哪个）
| 方向 | 属性名 | 属性值 | 含义 |
|---|---|---|---|
| 水平 | left | 数值+px | 距离左边的距离 |
| 水平 | right | 数值+px | 距离右边的距离 |
| 垂直 | top | 数值+px | 距离上边的距离 |
| 垂直 | bottom | 数值+px | 距离下边的距离 |
静态定位
相对定位
介绍：自恋型定位，相对于自己之前的位置进行移动
代码：position:relative;(por)
特点：
- 需要配合方位属性实现移动
- 相对于自己原来位置进行移动
- 在页面中仍然占位置——没有脱标
- 仍然具有标签原有的显示模式特点
应用场景：
- 配合绝对定位组cp（子绝父相）
- 用于小范围的移动
注意：
- 不设置水平、垂直距离时，位置不移动
- 水平若左右都设置，则以左为准
- 垂直若上下都设置，则以上为准
绝对定位
介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动
代码：positon:absolute;
特点：
- 需要配合方位属性实现移动
- 默认相对与浏览器可视区域进行移动
- 在页面中不占位置——脱标
- 标签原有模式特点被改变为行内块的特点（一行共存、宽高生效）
应用场景：配合相对定位组cp（子绝父相）
注意：
- 即使未设置水平垂直距离，位置仍会改变
- 找已定位的父级，若有，则以该父级为参照物
- 若有父级，但父级没有定位，则以浏览器窗口为参照进行定位
子绝父相
注意：只要父级有定位，且子级定位方式为absolute，则子级相对父级进行定位；但一般设置为子绝父相
水平居中设置
绝对定位的盒子不能使用左右margin auto居中
position: absolute;
/* 水平居中 */
left: 50%;
/* 向左移盒子的一半 */
margin-left: -150px;
/* 垂直居中 */
top: 50%;
/* 向上移盒子的一半 */
margin-top: -150px;
位移居中
优点：省去修改代码时的工作量
position: absolute;
/* 水平居中 */
left: 50%;
/* 垂直居中 */
top: 50%;
/*相对自己左上各移动-50%*/
transform: translate(-50%, -50%);
固定定位
介绍死心眼型定位，相对于浏览器进行定位移动
代码：position:fixed;
特点：
- 需要配合方位属性实现移动
- 相对于浏览器可视区域进行移动
- 在页面中不占位置——脱标
- 具备行内块特性：若不设置大小，则由内容撑开
应用场景：让盒子固定在屏幕中的某个位置
元素的层级关系
不同布局方式元素：标准流 < 浮动 < 定位
不同定位：
- 相对、绝对、固定默认层级相同
- html中写在下面的元素层级更高，会覆盖上面的元素
改变优先级：设置z-index：整数数字（默认值为0）
注意：z-index配合定位使用才能生效
装饰
文字对齐方式
场景：解决行内/行内块元素垂直对齐问题
问题：当图片和文字在一行中显示时，底部没有对齐
原因：浏览器遇到行内/行内块标签当作文字处理，默认文字是按基线对齐
垂直对齐方式
属性名：vertical-align
属性值：
| 属性值 | 效果 |
|---|---|
| baseline | 默认，基线对齐 |
| top | 顶部对齐 |
| middle | 中部对齐 |
| bottom | 底部对齐 |
光标类型
场景：设置鼠标光标在元素上时显示的样式
属性名：cursor
常见属性值：
| 属性值 | 效果 |
|---|---|
| default | 默认值，通常是箭头 |
| pointer | 小手效果，提示用户可以点击 |
| text | 工字型，提示用户可以选择文字 |
| move | 十字光标，提示用户可以移动 |
边框圆角
场景：让盒子四个角变得圆润，增加页面细节，提升用户体验
属性名：border-radius
常见取值：数字+px、百分比
赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角
应用：
- 画正圆：先画正方形盒子，然后设置border-radius:50%
- 胶囊按钮：先画长方形盒子，然后设置border-radius:盒子高度的一半
溢出部分显示效果
溢出部分：盒子内容部分所超出盒子范围的区域
场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条…
属性名：
常见属性值：
| 属性值 | 效果 |
|---|---|
| visible | 默认值，溢出部分可见 |
| hidden | 溢出部分隐藏（常用） |
| scroll | 无论是否溢出，都显示滚动条 |
| auto | 根据是否溢出，自动显示或隐藏滚动条 |
元素本身隐藏
场景：让元素本身在屏幕中不可见，如：鼠标：hover之后元素隐藏
常见属性：
- visibility:hidden
- display:none
元素整体透明度
场景：让某元素整体（包括内容）一起变透明
属性名：opacity
属性值：0(完全透明)—1(完全不透明)
注意点：opasity会让元素整体透明，包括里面的内容，如：文字、子元素等
补充
精灵图
介绍
场景：项目中将多张小图片合并成一张大图片，这张大图片称之为精灵图
优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
使用步骤
- 创建一个盒子，设置盒子的尺寸和小图尺寸相同
- 将精灵图设置为盒子的背景图片
- 修改背景图位置：通过pxcook测量小图片左上角坐标，分别分别取负值设置给盒子的background-position:x（水平） y（垂直）;（改变背景图片的位置）
背景图片大小
作用：设置背景图片的大小
语法：background-size：宽度 高度
取值：
| 取值 | 场景 |
|---|---|
| 数字+px | 简单方便，常用 |
| 百分比 | 相当于当前盒子自身的宽高百分比 |
| contain | 包含，将背景图片等比例缩放，直到不会超出盒子的最大,若比例不同，会导致背景有留白 |
| cover | 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白 |
盒子阴影
作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
属性名：box-shadow
取值：
| 参数 | 作用 |
|---|---|
| h-shadow | 必须，水平偏移量，允许负值 |
| v-shadow | 必须，垂直偏移量，允许负值 |
| blur | 可选，模糊度 |
| spread | 可选，阴影扩大 |
| color | 可选，阴影颜色 |
| inset | 可选，将阴影改为内部阴影 |
过渡
作用：让元素的样式满满的变化，常配合hover使用，增强网页交互体验
属性名：transition
常见取值：
| 参数 | 取值 |
|---|---|
| 过渡的属性 | all：所有能过渡的属性都过渡，具体属性名如：width：只有width有过渡 |
| 过渡的时长 | 数字+s |
注意点：
- 过渡需要，默认状态和hover状态样式不同，才能有过渡效果
- transition属性给需要过渡的元素本身加
- transition属性设置在不同状态中，效果不同：
给默认状态设置：鼠标移入移出都有过渡效果；给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果
seo三大标签
seo：搜索引擎优化
作用：让网站在搜索引擎上的排名靠前
提升方法
- 竞价排名
- 将网页制作成html后缀
- 标签语义化（在合适的地方使用合适的标签）等
三大标签
- title：网页标题标签
- description：网页描述标签
- keywords：网页关键词标签
favicon标题图标
场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标
常见代码：
<link rel="shortcut icon" href="ico图标路径" type="image/x-icon">
468
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
