HTML
VSCode快捷键
| 快捷键 | 作用 |
|---|---|
| Shift + Alt + ↓ / ↑ | 向上/向下复制行 |
| Ctrl + Shift + K | 删除行 |
| ctrl + / | 行注释 |
| shift + alt + a | 块注释 |
| Ctrl + Enter | 快速换行 |
| home | 切换行首 |
| end | 切换行尾 |
| Alt + ↓ / ↑ | 行移动 |
| ALT + Shift + 左键 | 多行修改 |
基本结构组成
每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
| 标签名 | 定义 | 说明 |
|---|---|---|
| <html></html> | HTML标签 | 页面中最大的标签，我们成为根标签 |
| <head></head> | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
| <title></title> | 文档的标题 | 让页面拥有属于自己的网页标题 |
| <body></body> | 文档的主体 | 元素包含文档的所有内容。页面内容基本上都是放到body里面的 |
<!DOCTYPE html>
<!-- 版本号 -->
<html lang="zh-CN">
<!-- 语言 -->
<head>
<meta charset="UTF-8" />
<!-- 解决文字问题 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 解决浏览器兼容性问题，最新版本的浏览器 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 视口，移动端兼容性适配问题 -->
<title>Document</title>
</head>
<body>
</body>
</html>
标准流
- 一个完整的网页布局,只有标准流是不能满足需求,打破常规布局,让多个块级元素水平一行显示并且没有间隙.
- 网页布局: 标准流 + 浮动+ 定位
- 标准流布局规则
- 块级元素:
- 从上往下 垂直布局 独占一行
- 行内 /行内块元素:
- 从左往右 水平布局 一行装不下自动换行
- 块级元素:
HTML常用标签
语义化标签
-
用特定的标签，去表达特定的含义
-
原则：标签的默认效果不重要（后期可以通过CSS随便控制效果），语义最重要！
-
例如：
h1文字效果大，但是重要的是h1的语义效果—十分重要 -
优势：
-
代码结构可读性强
-
有利于
SEO（search engineering optimizing / 搜索引擎优化）-
作用：让网站在搜索引擎上的排名靠前
-
提升
SEO:- 竞价排名
- 将网页制作成HTML后缀
- 标签语义化（合适地方用合适的标签）
SEO三大标签title： 网页标题标签description：网页描述标签（meta–name=“description”）keywords：关键词标签（meta–name=“keywords”）
-
-
方便设备解析
-
标题标签
h1~h6h1最好只写一个，h2~h6可以适当多写h1~h6之间不能相互嵌套
段落标签
- <p></p>
换行标签
- <br />
横线标签
- <hr />
文本格式化标签
加粗：<strong> / <b> （十分重要的内容）
倾斜：<em> / <i> （着重阅读的内容）
删除线：<del> / <s>
下划线：<ins> / <u>
图像标签
-
img -
其中
src必写，title为悬停文字、alt为图裂显示文字
超链接标签
a，（anchor）
href：指定地址，或者ID
target：指定页面打开方式，_self为默认本窗口，_blank为新窗口打开可以嵌套文本或图像，可以不用设置宽高！
代码中的多个空格只会被解析成一个空格！
a元素可以包含除去自身以外的任何元素！
块级元素与行内元素
-
块级元素：独占一行（排版标签全为块级元素）
html、body
h1~h6、hr、p、pre、div
ul、ol、li、dl、dt、dd
table、tbody、thead、tfoot、tr、caption
form、option
-
行内元素：不独占一行
文本标签：br、em、strong、sup、sup、del、ins、span
<a>与<label>
-
行内块元素：
图片元素：img
单元格：td、th
表单控件：input、textarea、select、button
框架标签：iframe
-
使用原则：
- 块级元素中可以写行内元素和块级元素
- 行内元素中只能写行内元素
- p标签中不要写块级元素
HTML特殊字符
| 特殊字符 | 描述 | 字符代码 |
|---|---|---|
| 空格符 |  ； | |
| < | 小于号 | <； |
| > | 大于号 | >； |
| & | 和号 | &； |
| ￥ | 人民币 | ¥； |
| © | 版权 | ©； |
| ® | 注册商标 | ®； |
| ™ | 商标 | &trade； |
| x | 乘号 | ×； |
| ÷ | 除号 | ÷； |
表格标签
-
表格主要作用：非页面布局，主要用来展示数据
-
表格基本语法：
<table> <thead> <tr> <th></th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> </table> -
表格属性：
属性名 属性值 描述 align left、center、right 规定表格相对周围元素的对齐方式。 border 1或"" 规定表格单元是否拥有边框，默认为"",表示没有边框 cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素。 cellspacing 像素值 规定单元格之间的空白，默认2像素。 width 像素值或百分比 规定表格的宽度。 -
合并单元格：
rowspan–行合并colspan–列合并
<!--
跨行合并(垂直合并)
rowspan
跨列合并(水平合并)
colspan
合并步骤:
1. 明确合并方式(跨行/跨列)
2. 通过左上原则，确定保留谁删除谁
• 上下合并→只保留最上的，删除其他单元格
• 左右合并→只保留最左的，删除其他单元格
3. 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
• `rowspan`：跨行合并→垂直方向合并
• `colspan`：跨列合并→水平方向合并
删除的单元格个数= 合并的个数-1
示例代码-->
<table border="1" width="800" height="200" rules="all" align="center">
<tr>
<td></td>
<td></td>
<!-- 跨行合并 -->
<td rowspan="3"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<!-- <td></td> -->
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<!-- <td></td> -->
<td></td>
</tr>
<tr>
<td></td>
<!-- 跨列合并 -->
<td colspan="3"></td>
<!-- <td></td>
<td></td> -->
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
列表标签
-
无序列表：
<ul><li>li { list-style:none; } <!--清除小圆点--> <!-- none:无样式 Disc:实心圆 circle:空心圆 Square:实心方块 --> -
有序列表：
<ol><li> -
自定义列表：
<dl><dt><dd>- 其中dl标签里面只允许包含dt/dd标签
- dt/dd标签里面可以嵌套任意内容(标签)
- dt/dd是兄弟关系
<dl> <dt></dt> <dd></dd> <dd></dd> </dl>
例如：
<h2>如何高效的学习？</h2>
<dl>
<dt>做好笔记</dt>
<dd>笔记是我们以后复习的一个抓手</dd>
<dd>笔记可以是电子版，也可以是纸质版</dd>
<dt>多加练习</dt>
<dd>只有敲出来的代码，才是自己的</dd>
<dt>别怕出错</dt>
<dd>错很正常，改正后并记住，就是经验</dd>
</dl>
表单标签
-
组成：表单域、表单控件、提示信息
-
form常用属性：属性 属性值 作 用 action url地址 用于指定接收并处理表单数据的服务器程序的url地址。 method get/post 用于设置表单数据的提交方式，其取值为get或post。 name 名称 用于指定表单的名称，以区分同一个页面中的多个表单域。 -
表单控件：
input: button / checkbox / radio （name相同绑定）/ image / file / password / reset / submit / text (type)
其余属性：name、value（input元素值）、checked（首次加载是否被选中）、disabled属性（设置表单控件不可用）、maxlength（最大字符数）
-
select：与option共用、selected=“selected”默认选中 -
textarea：clos、rows
tips：以上要标明name属性
具体示例如下：
<!--文本框1-->
<input type="text" placeholder="">
<!--密码框1-->
<input type="password" placeholder="">
<!--单选框-->
<input type="radio" checked name="sex">男
<input type="radio" checked name="sex">女
<!--多选框-->
<input type="checkbox" checked >
<!--
文件上传
multiple:多文件上传
-->
<input type="file" multiple>
<!--提交按钮-->
<input type="submit" value="提交">
<!--重置按钮-->
<input type="reset" value="重置" >
<!--普通按钮1-->
<input type="button"value="普通按钮">
<!--搜索框-->
<input type="search">
<!--图像提交按钮-->
<input type="image" src="./img/btn.png" alt="">
<!--
placeholder:占位符
单选框设置相同的name属性值才可以实现多选一效果
checked 默认被选中
-->
-
label标签：label标签可与表单控件相关联，关联后点击文字，控件会获取焦点- 法一：让
label标签的for属性等于表单控件的id - 法二：把表单控件套在
label里面
- 法一：让
详细示例如下：
<!--
使用方法一：
使用label标签把内容（如：文本）包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值
-->
<label for="nan">男</label>
<input type="radio" name="sex" id="nan">
<label for="nv">女</label>
<input type="radio" name="sex" id="nv">
<!--
使用方法二：
直接使用label标签把内容（如：文本）和表单标签一起包裹起来
需要把label标签的for属性删除即可
-->
<label>文本框:<input type="text"></label>
音频标签（HTML5）
<audio></audio>- 常用属性：
- src:音频路径
- controls:显示播放控件
- autoplay:自动播放
- loop:循环播放
<audio src="./music.mp3" controls autoplay loop></audio>
视频标签（HTML5)
<video></video>- 常见属性:
- src:视频的路径
- controls:显示播放控件
- autoplay:自动播放,但是谷歌需要muted属性才可以实现自动播放
- loop:循环播放
- width:设置宽度
- height:设置高度
<video src="./video.mp4" controls autoplay loop muted width="300"></video>
使用最多标签小结
<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<p>段落标签</p>
<em>倾斜</em>
<strong>加粗</strong>
<img src="图像路径" alt="替换文本" title="提示文本">
<a href="链接路径" target=_self>超级链接</a>
<a href="链接路径" target=_blank>超级链接</a>
<!--无序列表-->
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
....
</ul>
<!--自定义列表-->
<dl>
<dt>自定义列表主题</dt>
<dd>自定义列表每一项</dd>
<dd>自定义列表每一项</dd>
<dd>自定义列表每一项</dd>
....
</dl>
<!--表格基本语法-->
<table>
<tr>
<td></td>
<td></td>
<td></td>
...
</tr>
...
<tr>
<td></td>
<td></td>
<td></td>
...
</tr>
...
</table>
<!--表单标签-->
<!--文本框-->
<input type="text" placeholder="">
<!--密码框-->
<input type="password" placeholder="">
<!--单选按钮(单选按钮需要设置相同的name属性值,才可以实现单选效果)-->
<input type="radio">
<!--多选框-->
<input type="checkbox">
<!--搜索框-->
<input type="search" placeholder="">
<!--普通按钮-->
<button type="button">普通按钮</button>
<!--无语义化标签-->
<div>独占一行</div>
<span>一行显示多个,装不下会自动折行</span>
CSS
element语法
-
生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键，
就可以生成
-
如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
-
如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
-
如果有兄弟关系的标签，用 + 就可以了 比如 div+p
-
如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了
-
如果生成的div 类名是有顺序的，
可以用 自增符号 $
-
如果想要在生成的标签内部写内容可以用 { } 表示
CSS引入方式
-
内嵌式（内联样式）
- 作用于当前页面,后续小项目可以使用
-
外链式（外链样式）
- 作用于多个页面,后续大项目使用，需要使用link标签引入外部的css文件
<link rel="stylesheet" href="CSS路径"> -
行内式（行内样式）
- 作用于当前标签,不建议使用。后续配合js
CSS属性书写顺序
- 布局定位属性
- display
- float、position
- clear
- visibility、overflow
- 盒子模型 + 背景
- width、height
- margin、padding、border
- background
- 文本内容属性
- color、font
- text-decoration
- text-align
- line-height
- white-space
- 其他属性（点缀）
- cursor
- border-radius
- text-shadow
- box-shadow
tips: 开发中多推荐–类 + 后代，类选择器个数推荐不超过三个
CSS三大特性
-
层叠性：相同样式会覆盖
-
继承性：
text-、font-、line-、color属性（不影响布局的，大概率能够继承）
vertical-align不能继承
font:12px/1.5 Microsoft YaHei；
//给body设置，会让后续文本自动调整行高
-
优先级：
选择器 选择器权重 继承或者* 0,0,0,0 元素选择器 0,0,0,1 类选择器，伪类选择器 0,0,1,0 ID选择器 0,1,0,0 行内样式style=“” 1,0,0,0 limportant重要的 无穷大 如果都是继承，则会直接继承父级标签或者最近的祖先标签。
CSS选择器
基础选择器
- 标签选择器（0 0 0 1）
- 类选择器（0 0 1 0）
- id选择器（0 1 0 0）-----不可重复
- 通配符选择器（0 0 0 0）
tips：
!important> 行内样式 > ID选择器 > 类选择器 | 属性选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
复合选择器
-
后代选择器：元素1 元素2 { }
-
子代选择器：元素1>元素2{ }
-
并集选择器：元素1，元素2{ } ------并集选择器优先级是单独计算的
-
交集选择器：元素1元素2{ }
-
伪类选择器：
- 元素：
link/visited/hover/active—LVHA—无访问、访问、悬浮、长按选定 - 元素：
focus—获取焦点的表单元素
- 元素：
-
结构伪类选择器：
1.所有兄弟元素中的第一个：
:first-child2.所有兄弟元素中的最后一个：
:last-child3.所有兄弟元素第n个：
:nth-child(n) 倒数:
nth-last-child(n)4.所有同类型兄弟元素的第一个：
:first-of-type5.所有同类型兄弟元素的最后一个：
:last-of-type6.所有同类型兄弟元素的第n个：
:nth-of-type(n) 倒数 ：
nth-last-of-type(n)
tips:
n从0开始计算，因此
2n（even）偶数、2n+1（odd）奇数、-n+3前三个、n+5从第五个开始到最后一个为止。
-
否定伪类
-
:not（选择器）满足除括号内元素 -
UI伪类
-
:checked / :enable -
属性选择器
-
元素[属性名^=“值”]-------以…开头
-
元素[属性名$=“值”]-------以…结尾
-
元素[属性名*=“值”]-------包含指定元素
-
-
伪元素选择器
- 伪元素就是利用css来创建标签.伪元素创建出来的标签属于行内元素
::first-letter选中第一个字::first-line选中第一行::selection鼠标选中内容::before元素最开始位置创建一个子元素::after元素最后位置创建一个子元素
CSS字体
- 字体系列：
font-family - 字体大小：
font-size - 字体粗细：
font-weight（400–normal 700–bold）100~1000数字越大字越粗 - 字体样式：
font-style（normal、italic）
复合写法：
font：font-style font-weight font-size/line-height font-family（不可更换顺序，且字体连写必须保留size和family 这2个属性）
CSS文本属性
-
文本颜色：
color（重点）-
颜色拓展
/*关键词:*/ background-color: pink; /*rgb:*/ background-color:rgb(255, 255, 255); /*rgba:*/ background-color: rgba(0, 0, 0, .5); /*十六进制*/ background-color: #ff6700;
-
-
对齐文本：
text-align- 在HTML中，行内块元素、行内元素，会被当成文本处理，即可以使用text-align使其居中（给父元素设置）
text-align:left|center|right;
-
装饰文本：
text-decorationnone（无装饰线，常用）、underline（下划线）、overline（上划线）、line-through（删除线）
-
文本缩进：
text-indent（em为当前文字倍数） -
行间距：
line-height
-
字母间距：
letter-spacing -
单词间距：
word-spacing（通过空格识别词）
元素的显示模式
块级元素
- h1~h5 、p、div、ul、ol、li
独占一行
默认宽度撑满父元素，默认高度由内容撑开。
可设置宽高
行内元素
- a、strong、b、em、i、del、s、ins、u、span
一行可以显示多个
宽、高默认由内容撑开
无法设置宽、高，以及margin、padding的垂直方向
a里面可以放块级元素
行内块元素
-
img、input、td、button
可以设置宽高、一行显示多个、本身内容宽度
行内块幽灵空白问题：行内块元素与文本的基线对齐，文本的基线与最底端有一定的距离
- 产生原因：主要是把回车解析成了空格
- 将上一个元素的闭合标签与下一个元素的开始标签写在同一行，或者注释掉中间的回车换行
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
<!-- or -->
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
- vertical-align不为baseline
- 改图片为块元素：display：block
- 给元素加浮动，变成浮动元素
- 给父元素设置font-size：0; 子元素字体大小单独设置
元素显示模式转换
display:block
display:inline
display:inline-block
CSS背景
-
背景色：
background-color：transparent（默认，无色透明） -
背景图片：
background-image：none|url（url）—无引号 -
背景图片大小：
background-size: width height- 数字
- 百分比
- contain：1 : 1会让图片与盒子一致；非比例关系会留白
- cover：1 : 1会让图片与盒子一致；非比例关系仍会拉满，图片变形
- 实际开发中，图片比例一般为1:1结构
-
背景平铺：
background-repeat：repeat（全平铺）|no-repeat|repeat-x|repeat-y -
背景颜色位置：
background-position：x y；- top、center、bottom、left、right
- 指定一个，后一个默认对齐。
-
背景附着：
background-attachment：scroll|fixed（固定） -
复合写法：没有固定顺序，但大小必须写到位置后面
background: color image repeat position/size; /*建议前四个连写，size独写*/ -
背景颜色半透明：
background：rgba（0,0,0,0.3）盒子背景半透明
CSS盒子模型
盒子组成
- margin–border–padding–content
- 盒子默认大小：
border + padding + content
边框
-
border：border-with || border-style || border-color（无固定顺序）- border-style值：none、solid（实线）、dashed（虚线）、dotted（点线）
-
border-top、border-bottom、border-left、border-right
/*上边框*/
border-top:solid 1px red;
/*下边框*/
border-bottom:solid 1px red;
/*左边框*/
border-left:solid 1px red;
/*右边框*/
border-right:solid 1px red;
表格细线边框
border-collapse：collapse- 控制浏览器表格边框方式
- 使得边框合并
怪异盒模型
box-sizing- content-box 默认值
- border-box 怪异盒模型，设置的就是盒子的总大小（自动内减）
盒子大小调整
resize属性可以控制是否允许用户调节元素尺寸- none、both、horizontal、vertical
opacity不透明度
opacity的值为0~1的小数，0为完全透明（整个元素）
opacity与rgba的区别？
- opacity 是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。
- rgba 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。
内边距
- 可能影响盒子的大小(不能为负数)
- 1个值为上下左右，2个值为上下、左右，3个值为上、左右、下，4个值为上、右、下、左
/*上 右 下 左*/
padding:10px;
/*上下 左右*/
padding:20px 30px;
/*上 左右 下*/
padding:20px 30px 40px;
/*上 右 下 左*/
padding:20px 30px 40px 50px;
/*单方向设置*/
padding-top:30px;
padding-bottom:40px;
padding-left:50px;
padding-right:60px;
- 边框与padding不会撑大盒子特殊情况:
- 当子元素不给宽度的时候, 子元素默认宽度就是父元素的宽度(父元素的100%)
- 此时给左右的边框和左右的内边距不会撑大盒子
外边距
- 用于盒子的移动（可以为负数）
- 参考父元素的content计算
- 水平居中：margin：0 auto；
- 给行内元素设置上、下margin无效
/*上 右 下 左*/
margin:10px;
/*上下 左右*/
margin:20px 30px;
/*上 左右 下*/
margin:20px 30px 40px;
/*上 右 下 左*/
margin:20px 30px 40px 50px;
/*单方向设置*/
margin-top:30px;
margin-bottom:40px;
margin-left:50px;
margin-right:60px;
margin正常使用：
- 水平布局的盒子,左右的 margin值互不影响
- 最终的距离为margin左右的和
margin塌陷问题：
- 互相嵌套的块级元素，第一个元素上margin作用在父元素上，最后一个元素下margin作用在父元素上。
- 解决办法：
- 给父元素设置 padding-top或 border-top
- 给父元素设置 overflow: hidden;
- 把子元素转换为行内块 display: inline-block;
- 浮动、绝对定位、相对定位的盒子不会有嵌套块级元素外边距塌陷现象
margin合并问题：
- 垂直布局的块级元素 上下 margin会合并
- 最终的距离为margin的最大值
- 解决办法:
- 只用设置一个外边距即可
布局技巧
-
行内元素、行内块元素可以被父元素当做文本处理
-
子元素水平居中：
- 块级元素：margin：0 auto；
- 行内块、行内元素：text-align: center;
-
子元素垂直居中：
-
块元素：
margin-top: (content - 子元素总高)/2 -
行内、行内块：
height = line-height&&vertical-align:middle（绝对垂直居中：font-size：0）
-
CSS浮动
- 语法：
选择器 {
float:none/left/right;
}
浮动特性
- 浮动元素会脱离标准流
- 浮动的元素比标准流高半个级别,可以覆盖标准流的元素
- 浮动找浮动(同方向浮动) ，下一个浮动元素会在上一个浮动元素后面左右浮动
- 浮动的元素会受到上面元素边界的影响
- 浮动元素会一行内显示并且顶部对齐
- 浮动元素具有行内块元素的特性
- 浮动盒子中间没有缝隙
- 浮动元素经常搭配标准流父级
- 浮动不会像行内块一样被当做文本处理（vertical-align / text-align无法使用）
- margin合并和塌陷全部消失
注意点：
- 先用标准流父级元素排列上下位置，之后内部子元素采取浮动排列左右位置
- 子浮父不浮、兄弟一起浮、一浮全浮
- 浮动只会影响后面的标准流，不会影响前面的标准流
清除浮动
- 清除浮动，父级会根据浮动子盒子自动检测高度
- 如果父级元素本身有高度，则不需要清除浮动（重要）
- 清除浮动本质是清除浮动元素造成的影响
语法：
选择器 {
clear：left/right/both；
}
清除浮动方法：
-
额外标签法：
<div style="clear:both"> </div> -
父级添加overflow属性:设置属性为hidden、auto、scroll
-
父级添加after伪元素：
.clearfix::after { content:''; display:block; clear:both; /*后两项针对老浏览器*/ height:0; visibility:hidden } -
父级添加双伪元素:
.clearfix::after,.clearfix::before { content:''; display:table; } .clearfix::after{ clear:both; } /*双伪元素，其中before的主要作用是解决外边距塌陷问题，本质上after就已经够了*/
为什么清除浮动：
父级元素没有高度、子盒子浮动、影响后续布局
CSS定位
定位应用场景
为什么需要使用定位?
解决盒子之间的层叠问题,可以层叠到其它盒子上面
页面滚动,盒子固定在页面某个位置不动.
定位组成
-
定位：摆放盒子，按照定位的方式移动盒子
-
定位 = 定位模式 + 边偏移
-
定位元素：设置**（绝对定位/固定定位）**后，不管之前是什么元素，一律为定位元素
—默认宽、高都被内容所撑开，且能自由设置宽高。
-
定位模式：
static(静态定位)、relative、absolute、fixed -
边偏移：
top、bottom、left、right
.blue {
/* 定位的使用步骤 */
/* 1 设置定位的方式 绝对定位*/
position: absolute;
/* 2 设置偏移值 */
top: 150px;
left: 150px;
background-color: blue;
}
相对定位
position：relative- 相对于自己的定位
- 没有脱离标准流
- 需要配合方位属性来移动位置
绝对定位
position：absolute- 包含块：
- 对于没有脱离文档流的元素，包含块为父元素。
- 对于脱离文档流的元素，包含块为拥有定位属性的祖先元素。
- 相对于有定位属性的祖先元素
- 脱离标准流
- 不能与浮动同时使用。同时使用则以定位为主
- 需要配合方位属性来移动位置
- 子绝父相：
- 子元素用绝对定位,父元素使用相对定位,让子元素相对于父元素进行移动.那父元素是相对定位,对网页的布局影响比较小
- 子绝父绝：
- 实际开发中在子绝父相的时候,发现父元素有绝对定位,此时父元素里面的孩子直接子绝即可
固定定位
-
position：fixed -
相对于窗口位置，且不随滚动条滚动
-
脱离标准流
-
需要配合方位属性来移动位置
固定定位小技巧： 固定在版心右侧位置。
小算法：
-
让固定定位的盒子
left: 50%. 走到浏览器可视区（也可以看做版心）的一半位置
-
让固定定位的盒子
margin-left: 版心宽度的一半距离。 多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了
黏性定位
sticky会占用原先的位置（relative特点）- 必须添加
top、bottom、left、right其中一个才有效 - 以窗口为参照点（fixed特点），离他最近的拥有滚动机制的祖先元素。
定位总结
| 定位模式 | 是否脱标 | 移动位置 | 是否常用 |
|---|---|---|---|
| static静态定位 | 否 | 不能使用边偏移 | 很少 |
| relative相对定位 | 否(占有位置) | 相对于自身位置移 动 | 常用 |
| absolute绝对定位 | 是(不占有位置) | 带有定位的父级 | 常用 |
| fixed固定定位 | 是(不占有位置) | 浏览器可视区 | 常用 |
| sticky粘性定位 | 否(占有位置) | 浏览器可视区 | 当前阶段少 |
定位叠放次序
z-index- 专门用于元素设置显示层级
选择器 {
z-index:1;
}
/*数值可以为：正数、负数、0、auto，数字越大盒子越靠上（默认为auto）*/
- 不同布局方式元素的层级关系：
- 标准流 <浮动 <定位
- 定位元素之间的层级关系相同(相对定位、绝对定位、固定定位)
示例代码：
<div class="blue"></div>
<div class="green"></div>
<div class="red"></div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 300px;
height: 300px;
}
.red {
/* 相对定位 */
position: relative;
left: 0;
top: 0;
z-index: 2;
background-color: red;
}
.blue {
/* 绝对定位 */
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
background-color: blue;
}
.green {
/* 固定定位 */
position: fixed;
left: 200px;
top: 200px;
z-index: 9999;
background-color: green;
}
定位拓展
-
让定位元素的宽充满包含块
- 块宽一致：同时设置
left和right为0 - 块高一致：同时设置
top和bottom为0
- 块宽一致：同时设置
-
绝对定位的盒子水平居中
绝对定位盒子不能通过margin:0 auto;水平居中，但可以通过计算实现
left:50%;让盒子的左侧移动到父级元素中心margin-left:-100px;左移盒子一半 -
绝对定位的盒子中心居中
/*法一(某些场景可能失效)*/ left:0; right:0; top: 0; bottom: 0; margin: auto;/*法二*/ left: 50%; top: 50%; margin-left: 负的宽度一半; margin-top: 负的高度一半;/*法三，使用transform（建议使用）*/ left: 50%; top: 50%; transform: translate(-50%,-50%) -
绝对定位/固定定位与浮动类似
- 行内元素添加绝/固可以直接设置宽高
- 块级元素添加绝/固如果不设置宽高，默认为内容大小
-
脱标盒子不会触发外边距塌陷问题
-
绝/固会完全压住盒子
绝/固完全脱离标准流，但浮动没有脱离文本流
使用总结
- 标准流：盒子上下或者左右排列
- 浮动：可以让多个块级元素一行显示或者左右对齐盒子
- 定位：最大特点为层叠性（
z-index）如果元素自由在某个盒子内移动就用定位 - 定位特殊性：
- 行内元素加了绝对/固定定位可以设置宽高
- 块级元素加了绝对/固定定位,如果不给宽度,宽度由内容撑开
- 嵌套块级元素加了绝对/固定定位,不会有塌陷问题
圆角边框(CSS3)
border-radius：两个值为左上右下、右上左下，三个值为左上、右上左下、右下- 圆形：border-radius：50% (正方形)
- 矩形圆角：border-radius：h*50%
- 默认是宽度的50%
示例代码：
.box {
width: 300px;
height: 300px;
background-color: #ffa500;
/* 圆形 边框圆角为宽高的一半 */
/* border-radius: 150px; */
border-radius: 50%
}
.box1 {
width: 200px;
height: 60px;
background-color: purple;
/* 胶囊按钮 盒子高度的一半*/
border-radius: 30px;
text-align: center;
line-height: 60px;
font-size: 20px;
color: #fff;
}
.box2 {
width: 200px;
height: 200px;
background-color: pink;
border-radius: 0 50%;
}
边框外轮廓（CSS3）
outline复合属性：width、color、styleoffset（外轮廓与边框的距离）–独立属性
盒子阴影(CSS3)
-
盒子阴影不占用空间
-
阴影可以叠加，使用逗号隔开
-
不能主动添加outset，否则会报错
-
box-shadow: h-shadow v-shadow blur spread color inset;值 描述 h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊距离。只能正值（深、浅） spread 可选。阴影的尺寸。（大、小） color 可选。阴影的颜色。请参阅CSS颜色值。 inset 可选。将外部阴影(outset)改为内部阴影。（不常用）
文字阴影（CSS3）
text-shadow： h-shadow v-shadow blur color ;- 阴影可以叠加，使用逗号隔开
- 属性值为0时，要带单位px
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离。只能正值（深、浅） |
| color | 可选。阴影的颜色。请参阅CSS颜色值。 |
平面转换2D（CSS3）
2D位移
- 使用
transform属性实现元素的位移、旋转、缩放等效果（2D）
-
语法：
/*元素移动到坐标轴的哪个位置*/ /*单个值时，默认为x方向*/ transform: translate(x,y); transform: translateX(); transform: translateY(); -
取值：（可正、负）
- 像素单位
- 百分比（以盒子为参照物）
tips: margin与translate的区别？
- margin的100%是他父元素的100%宽度，translate为元素本身
- margin移动时会影响其他元素位置，translate不会影响其他元素，且未脱离标准流（有相对定位的特点）
小拓展：
- 外边距默认标准流下，只能实现水平居中
- 脱离标准流后
position:absolute,四边方位属性设置为0（left>right , top>bottom），使用margin:auto，可以实现垂直水平居中- 该方法本质是脱标，然后使用
margin：auto使四边边距自适应，得到垂直水平居中的效果
- 该方法本质是脱标，然后使用
2D旋转
rotate：设置旋转角度，指定角度值deg或turn，正顺负逆rotate与transition配合使用才能看到效果
transform: rotate(1turn)
/*1turn为一圈*/
改变转换原点：
-
transform-origin -
语法
transform-origin: 原点水平位置、原点垂直位置； -
取值
- 方位名词（
left、top、right、bottom、center） - 像素单位数值，以左上角为零点
- 百分比
- 方位名词（
-
特点
- 默认原点是盒子中心点
- 修改变换原点对位移没有影响，对旋转和缩放会产生影响
- 百分比相对于自身
- 只写一个值时，第二个默认为50%
多重转换
-
使用
transform复合属性实现多形态转换 -
多重转换技巧：
transform: translate() rotate(); /*先位移后旋转*/ -
原理：
- 旋转会改变网页元素的坐标轴向
- 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换效果（坐标轴改变）
缩放
-
使用
scale改变元素的尺寸 -
语法
transform: scale(x轴缩放倍数,y轴缩放倍数) -
技巧
scale值大于1为放大，小于1为缩小- 缩放可以取负值，先缩小再放大
-
若
scale只设一个值，则表示x和y轴等比例缩放- 缩放只是一种视觉效果，不会影响其他盒子
倾斜
-
使用
skew使元素倾斜 -
语法
transform: skew(角度) /* 正值（整体左斜）斜边在右 负值（整体右斜）斜边在左 也可以： */ transform:skew (x,y) skewX() skewY()
空间转换3D(CSS3)
写在最前：
空间转换一般不用CSS实现，此处仅供学习了解
- 使用
transform属性实现元素在空间内的位移、旋转、缩放等效果 - 空间定义：
- 是从坐标轴角度定义的。
- x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同
- 空间转换也叫3D转换
空间位移
-
与2D位移类似，使用translate实现空间位移效果
-
语法：
transform: translate3d(x, y, z); transform: translateX(值); transform: translateY(值); transform: translateZ(值); -
取值：（正负均可）
- 像素单位数值
- 百分比（相对于自己）
透视
-
使用
perspective实现透视效果 -
属性（添加给父级）
perspective：值- 取值：像素单位，数值在800-1200（推荐取值）
- 值越小，离我越近
- 透视不是3D效果
- 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离
-
作用
- 空间转换时，为元素添加近大远小、近实远虚的视觉效果
空间旋转
-
与2D旋转一样，使用
rotate实现空间旋转效果 -
语法
/*Z轴，正值是顺时针旋转*/ transform: rotateZ(值); /*X轴，正值是沿着X轴正方向从外到内旋转*/ transform: rotateX(值); /*Y轴，正值是沿着Y轴正方向从左到右*/ transform: rotateY(值); -
判断：（左手法则）
- 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
-
拓展：（合并写法）
transform:rotate3d(x,y,z,角度)：用来自定义旋转轴位置以及角度transform: rotate3d(1,1,1,30deg) ; /*意思是： x 、 y 、 z 分别旋转30 度。*/
立体呈现
- 使用
transform-style:perserve-3d- 使子元素处于真正的3D空间
- 默认值为flat，表示子元素在2D平面内呈现
- 空间内，转换元素都有自己独立的坐标轴，互不干扰
空间缩放
-
使用scale实现空间缩放效果
-
语法
transform: scaleX(倍数); transform: scaleY(倍数); transform: scaleZ(倍数); transform: scale3d(x,y,z);
动画（CSS3）
-
多个状态间的变化过程，动画过程可控
-
使用
animation添加动画效果- 构成动画最小单元：帧或动画帧
-
定义动画：
@keyframes 动画名称 { from { } to { } } /*多步骤写法*/ @keyframes 动画名称 { 0% { } 10% { } 100%{ } } -
使用动画：
animation: 动画名称 动画花费时长; /*完整属性*/ animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态; /*animation可以给一个元素添加多个动画效果*/ /*默认为补间动画*/ animation: 动画1， 动画2， 动画N ;
| 属性 | 作用 | 取值 |
|---|---|---|
| animation-name | 动画名称 | |
| animation-duration | 动画时长 | |
| animation-delay | 延迟时间 | |
| animation-fill-mode | 动画执行完毕时的状态 | forwards：最后一帧 backwards：第一帧 |
| animation-timing-function | 速度曲线 | steps（数字）逐帧动画 |
| animation-iteration-count | 重复次数 | infinite无限循环 |
| animation-direction | 动画执行方向 | alternate反方向（来回） |
| animation-play-state | 暂停动画 | paused暂停 |
animation-iteration-count不能与animation-fill-mode、animation-direction一起使用steps实现逐帧动画animation-timing-function: steps(N);- 将动画过程分成N等份
- 与精灵图搭配使用（
background-position）
过渡（CSS3）
transition: 属性 时间 运动曲线（可省略） 何时开始;
- 作用：让样式有慢慢变好的效果，一般添加到默认状态
- 属性：全部属性
all，单个属性直接写属性名且用逗号隔开 - 花费时间： (s) 必须写单位
- 运动曲线：默认
ease - 何时开始：单位是（s）可以设置延迟触发时间，默认为0s
注：display无法设置过渡
渐变（CSS3）
- 使用
background-image属性实现渐变背景效果- 渐变是多个颜色逐渐变化后的视觉效果
- 一般用于设置盒子的背景
- 做遮罩层效果
线性渐变：
background-image: linear-gradient(color1,color2);
/*透明---黑色半透明*/
background-image: linear-gradient(transparent,rgba(0,0,0,0.6));
/*改变颜色渐变方向*/
/*方位名词*/
background-image: linear-gradient(to bottom, red, green);
/*角度*/
background-image: linear-gradient(60deg, red, green);
径向渐变：
- 主要用在网页中，做按钮的渐变色效果
background-image: radial-gradient(半径大小 at 0px 0px , red, green);
布局
-
版心：
一个固定宽度并且水平居中的盒子，用来显示网页的主要内容。
版心类名常用：container、w、wrapper
.container { width: 1200px; margin: 0 auto; } /*版心属性设置*/ -
重置默认样式
* { margin:0; padding:0; } -
常用布局名词
位置 属性名 顶部导航条 topbar 页头 header、page-header 导航 nav、navigator、navbar 搜索框 search、search-box 横幅、广告、宣传图 banner 主要内容 content、main 侧边栏 aside、sidebar 页脚 footer、page-footer
元素显示与隐藏问题
-
让一个元素在页面中显示出来
-
display：属性值：
none/block特点：直接删除，不占用位置
-
visibility：属性值：
visible/hidden特点：隐藏后继续占有位置
-
overflow：属性值：
hidden/visible/scroll（滚动条）/auto（自动显示滚动条） -
opacity：属性值：0（隐藏）、1（显示）、0~1（显示程度）
CSS高级技巧
精灵图
- 目的：为了有效减少服务器接收和发送请求的次数，提高页面加载速度（CSS精灵技术/CSS Sprites/雪碧图）
- 核心原理：把网页中全部的小图整合到一张大图中
- 使用：
div+background-position: x y - 一般使用伪元素 + 精灵图，可以省去一个盒子
tips：精灵图的移动全为x，y的反方向，故x，y像素值为负值
ico图标设置
<link rel="shortcut icon" href="./favicon.ico">
/*设置标题左侧的小图片*/
字体图标
- iconfont（字体图标）
- 展示的是图标，本质为字体
CSS三角
CSS盒子边框为四个等边矩形
/*
1 画一个盒子
2 设置不同边框的颜色
3 宽高设置为0 仅保留边框
4 选择其中一个三角形设置颜色 ,其余的三角形设置为透明色
*/
div {
height:0;
width:0;
border:5px solid transparent;
border-bottom-color:pink;
}
用户界面样式
- 鼠标样式（cursor）
| 属性 | 描述 |
|---|---|
| default | 小白（默认） |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allow | 禁止 |
- 轮廓线outline
input {
outline: none;
}
- 防止拖拽文本域
textarea {
resize: none;
}
vertical-align
- 用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式。（谁有问题给谁设置）
- 只对行内、行内块元素有效
vertical-align: baseline (默认)| middle | top | bottom
baseline:使元素的基线与父元素的基线对齐
top：使元素的顶部与其所在行的顶部对齐
middle：使元素的中部与父元素的基线加上父元素字母x的一半对齐
bottom：使元素底部与所在行的底部对齐
-
图片底部空白间隙问题
1.给图片修改
vertical-align属性2.把图片转换为块级元素
-
浏览器把行内、行内块当做文字处理了
-
文本框和表单按钮无法对齐
-
input和img无法对齐 -
div中文本框，文本框无法贴顶的问题
溢出文字隐藏显示
-
属性名：overflow–控制溢出部分显示与隐藏
hidden：溢出部分隐藏visible：（默认值）溢出部分可见scrol：无论是否溢出，都显示滚动条auto：根据是否溢出，自动显示或隐藏滚动条
-
单行文本
/*1. 先强制一行内显示文本*/
white-space: nowrap; （ 默认 normal 自动换行）
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
- 多行文本
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
