前言：大家好啊，我是小编达闻西。我相信在茫茫的文海之中相遇，这是一份莫大的缘分。在武侠小说中，遇见有缘人都会传你绝世神功，从而你就可以称霸武林，迎娶白富美，走上人生巅峰。而今天你遇到了我，而我就只是一个写代码的，我没有什么绝世神功，要找绝世神功建议你去崖底去找找。所以，我就把我之前在公司实习的时候，学到的html和css基础给你做了一个总结，我的话可能不够官方，都是我自己的大白话、再结合自己的一部分代码。有缘人、希望我的文章能给你的前端之路献上绵薄之力。陌生人、加油。
超文本标记语言
html的最新版本+代指前端的相关技术
万维网联盟：中立非盈利的组织
可扩展的html
最经典的版本
<开始标签 属性=“属性值” 属性=“属性值”>被标记的内容</结束标签>
属性：是对标签进行细节描述的
注意事项
所有的符号都应该是英文输入状态下的符号
属性值可以是单引号或者双引号都可以
基础代码示例
<html><head><meta charset="utf-8"><title></title></head><body>内容文字<body>
</html>
| 绝对路径 | 从盘符或者协议出发得到的路径 |
|---|---|
| 相对路径 | 从当前文件出发得到的路径 |
| 同级 | 直呼其名（默认./自动添加了的） |
| 上级 | …/ |
| 下级 | /文件名 |
| 加粗 | < strong> < /strong> 或者< b>< /b> |
|---|---|
| 倾斜 | < em>< /em>或者< i>< /i> |
| 变大 | < big>< /big> 注意：浏览器默认·字体大小为16px，最小为12px |
| 变小 | < small> < /small> 注意：最小不能小于12px |
| 上标 | < sup> < /sup> 实例： 42 |
| 下标 | < sub> < /sub> 实例： H2O |
| & gt； | 大于 |
|---|---|
| & lt; | 小于 |
| & nbsp； | 小空格 |
| & emsp； | 大空格 |
| & copy； | 版权符号： |
| & reg; | 商权符号； |
| 命名规范 | 注意 |
|---|---|
| 1 | 由数字、字母、下划线组成、不能数字开头 |
| 2 | 尽量使用对应内容英文 |
| 3 | 推荐使用驼峰命名（小驼峰命名） |
置换元素：浏览器根据元素的属性和属性值。决定渲染的什么效果【img、button、input】
非置换元素：不是置换元素的元素
块级元素里面可以有任何元素、行级元素里面只能放行级元素
p元素里面就只能有行级元素
a元素可以包裹块级元素
ol、ul里面只能有li，li外面只能有ol、ul
| 标题 ：hn | < hn>标题内容< /hn> n:1-6 |
|---|---|
| 段落： | < p> < /p> |
| 水平线 | < hr> |
| 换行 | < br> |
| 图片标签 | <img src=”图片地址" alt=“故障时显示文字”> |
概念：从一个位置跳到另一个位置
<a href="https:www.jd.com" target="_blank（新窗口页面） | _self(当前页面)">显示到网页的字体或者图片放置处</a>
概念：就是实现在本页面的相关跳转
语法
<a href="#对应区域的id名">链接的内容</a>
<div id="区域的id名">区域内的内容</div>
代码示例
<!DOCTYPE html>
<html lang="en">
<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><style>div{height: 300px;width: 100%;/* background-color: skyblue; */border: 1px red solid;}.right{width: 85px;height: 150px;background-color: pink;position: fixed;right: 0;top: 50%;line-height: 30px;}</style>
</head>
<body><div id="content1">内容1</div><div id="content2">内容2</div><div id="content3">内容3</div><div id="content4">内容4</div><div class="right"><a href="#content1">跳到内容1</a><a href="#content2">跳到内容2</a><a href="#content3">跳到内容3</a><a href="#content4">跳到内容4</a></div>
</body>
</html>
div:默认独占整行，可以设置宽高
<div>块级标签</div>
span: 有多宽占据多款，无法设置宽高
<span>行及标签（无意义标签）</span>
使用方法：
盒子模型（扩展）：
优点：
h5新增的结构化的标签
| 页头 | < header>< /header> |
|---|---|
| 导航 | nav |
| 主体 | main |
| 侧栏 | aside |
| 文章 | article |
| 页脚 | footer |
| 独立的区域 | section |
图文列表标签
<figure><img><figure>内容</figure></figure>
高亮标签：
<mark>黄色</mark>
标题组：
<hgroup></hgroup>
对话框：
<dialog open>内容</dialog>[有open属性才能实现显示、没有就隐藏]
画布：
<canvas><canvas>
<audio controls autoplay loop><source src="放资源的路径">
</audio>说明：
controls是播放控件。不添加就没有进度条
autoplay：自动不妨、谷歌不支持
loop：循环
如果没有source标签、可以将src放在audio身上
多个source、会按顺序解析类型是否支持、支持就播放、不支持就往下解析。。。不支持给提示
<video controls width="" height="" poster=''><source src='路径'>
</video>
<embed src='图片、视频、音频的路径'>
form
<form novalidate autocomplete='on / off'></form>
| novalidate | 设置表单不做验证(提交一次后自动填充) |
|---|---|
| autocomplete | 设置是否打开提示 |
input
<input type="" name="" value="值" placeholder="占位符" autofocus minlength="最小长度" maxlength="最长长度" multiple required checked>| autofocus | 自动获取焦点 |
|---|---|
| minlength | 最小长度 |
| maxlength | 最大长度 |
| multiple | 设置多选（选中文件的时候可以多选type=‘file’） |
| required | 设置为必选（条款选项不看不通过按钮） |
| checked | 只有单选和复选有该属性、实现默认选项已选中 |
| readonly | 只能读 |
<input list="对应的datalist的id值"><datalist id=""><option value="值">内容</option></datalist>
注意事项；有值就会显示值和内容、没有就会显示内容、但是不可以value值为空；
代码演示
<ul><li>列表项</li><li>列表项</li>
</ul>
代码示例
<ol><li>列表项目</li><li>列表项目</li>
</ol>
用处：商场导航、图文列表时，很少用到
代码示例
<dl><dt>零食分区</dt><dd>旺仔小饼干</dd><dd>旺仔果冻</dd><dt>饮料分区</dt><dd>可乐</dd><dd>雪碧</dd></dl>
| 名称 | 概念 |
|---|---|
| 表单标签 | 负责数据提交的地址和方式 |
| 表单域 | 数据填入的部分 |
| 表单按钮 | 负责时间的标识（提交按钮、重置按钮、普通按钮） |
| 表单 | 页面中负责数据采集功能的 |
<form action='数据提交的地址' method="数据提交的方式 get|post">表单域表单按钮
</form>
| get | post |
|---|---|
| 小，快，不安全（数据量小、不太安全、传输速度快） | 大，慢，相对安全 |
| 会追加到地址栏上面 | 不会追加到地址栏上，会以服务器的方式 |
| 2Kb | 4MB |
| 表单域 | 写法 |
|---|---|
| 文本输入框 | < input type=‘text’ name=‘名字’> |
| 密码输入框 | < input type=‘password’ name=‘password’> |
| 单选输入框 | < input type=‘radio’ name=“名字”> |
| 复选输入框 | < input type=“checkbox”> |
| 文件 | < input type=‘file’> |
| 隐藏域 | < input type=‘hidden’ value=‘要提交的值’> |
| 提交 | < input type=‘submit’ value=‘按钮上的值’> |
| 重置 | < input type=‘reset’ value=‘按钮上的值’> |
| 普通 | < input type=‘button’ value=‘按钮上的值’> |
| 提交按钮 | < button type=‘submit’>提交按钮< /button> |
|---|---|
| 重置按钮 | < button type=‘reset’>重置按钮< /button> |
| 普通按钮 | < button type=‘button’>普通按钮< /button> |
<fieldset><legend>字段集的标题< /legend>
< /fieldset>
<input id="id名">
<label for="要关联选项的id名">内容< /label>
语法2
<label><input>要关联的内容
<label>
<select name="" ><option value="值">内容</option><option value="值">内容</option></select>提交的时候、先提交value的值、如果没有设置value属性提交option的内容option的属性selected代表默认选中该选项
多行文本域
注意：标签之间不能有任何的空格和换行
<textarea name="" placeholder=""></textarea>
form
<form novalidate autocomplete='on / off'></form>
| novalidate | 设置表单不做验证(提交一次后自动填充) |
|---|---|
| autocomplete | 设置是否打开提示 |
input
<input type="" name="" value="值" placeholder="占位符" autofocus minlength="最小长度" maxlength="最长长度" multiple required checked>| autofocus | 自动获取焦点 |
|---|---|
| minlength | 最小长度 |
| maxlength | 最大长度 |
| multiple | 设置多选（选中文件的时候可以多选type=‘file’） |
| required | 设置为必选（条款选项不看不通过按钮） |
| checked | 只有单选和复选有该属性、实现默认选项已选中 |
| readonly | 只能读 |
7.8.1表单新增的标签
<input list="对应的datalist的id值"><datalist id=""><option value="值">内容</option></datalist>
注意事项；有值就会显示值和内容、没有就会显示内容、但是不可以value值为空；
| 第一步 | 实现基本表格 |
|---|---|
| 第二步 | 判定跨行还是跨列，给单元格添加属性（colspan跨列|rowspan跨行） |
| 第三步 | 属性值是占据的单元格数量，有几格写几个数字 |
| 第四步 | 给对应行多的单元格删除{从后往前删除} |
表格快速生成语法：
table>tr*3行>td*3列
表格具体写法：
<table border='边框粗度' cellspacing='双线边框之间的间隔' cellpadding='边框和内容之间的间隔'><tr><td>内容（单元格）</td><td colspan="2（跨两列）"></td><td rowspan="2（跨两行）"></td></tr>
</table>
border-spacing：*px； 表格双线边框之间的间隔
border-collapse:collapse; 表格细边框 【如果要实现真正意义上的细边框，需要td也设置边框】
table-layout：fixed； 单元格按价等分
empt-cells:hide|show；空单元格是否显示
caption-side：left | right |top |bottom；设置表格标题的位置
css层叠样式表：多个样式可以叠加在一个元素身上
语法
选择器：
{属性：属性值；属性：属性值；}
概念：
| 内联式、行内式 | 在标签里面加一个style标签直接写css样式 |
|---|---|
| 内部式 | 就是在head头部里面加一个style标签，在里面写样式 |
| 外链式 | 新建一个.css文件夹，在文件夹里面去写css代码，然后引入进来 |
<p style="color: pink;font-size: 40px;">这是一段话</p>
<!DOCTYPE html>
<html lang="en">
<head><style>p{color: pink;font-size: 40px;}</style>
</head>
<body><p>使用内部式，变换样式</p>
</body>
</html>
新建一个以,css为后缀的css文件
在head标签里面写link标签
<head><link rel="stylesheet" href="css文件路径">
</head>
在css文件里面写对应代码
代码示例
<!DOCTYPE html>
<html lang="en">
<head><link rel="stylesheet" href="./4、外链.css">
</head>
<body><p>这是使用外链式的代码</p>
</body>
</html>
css代码：
p{color: pink;font-size: 40px;
}
通配符*选中所有的元素
*{ }
标签选择器 --选中所有对应的标签
标签名（a|P）{ }
id选择器 --选中指定id名
<head>#id名{}
</head><元素 id=“自己取得名字”>内容<元素>
类选择器 --选中所有指定类名的元素
.类名{}
<元素 class="自己取得类名">内容</元素> --类名就是属性值
| 选中有attr属性的元素e | e[attr] |
|---|---|
| 选中有attr属性的值为val的元素e | e[ attr=‘val’] |
| 选中有attr属性的值为val开头的元素e | e[ attr^=‘val’] |
| 选中有attr属性的值为val结尾的元素e | e[attr$=‘val’] |
child系列
| e:first-child | 选中第一个元素e |
|---|---|
| e:last-child | 选中最后一个元素e |
| e:nth-child | 选中第n个元素 |
| e:nth-last-child | 选中倒数第n个元素 |
| n是一个乘法因子 | 可以是数字，单词even偶数、odd奇数、可以是带n的数学表达式 |
| e:only-child | 选中唯一元素e【场景判定】 |
| 注意事项 | child系列强调的是元素在父元素的所有子元素中的排序 |
tupe系列强调的是元素在所有同类型的兄弟元素之间的排序
#search .container div:nth-child(2){width: 64px;height: 20px;background-color: red;}
| e:enbled | 可用的e元素设置样式 |
|---|---|
| e:disabled | 不可用的e元素设置样式 |
| e：cheched | 给选中的元素e设置样式 |
e:target=>当选中e是目标元素的时候
| 优先级等级 | 类别 |
|---|---|
| 无穷 | ！important（属性：属性值 ！important；） |
| 1000 | 行内样式{内嵌式} |
| 100 | id |
| 10 | class |
| 1 | 标签 |
| 0 | * |
| -1 | 继承 |
| -2 | 默认 |
概念：是一种布局属性，实现一行多列的效果
作用：
实现多个元素横着排列
实现元素周围有文字环境[ 图文环绕]
三种写法
| float浮动 | 三种写法 |
|---|---|
| float（左边） | left |
| float (右边) | right |
| float (不浮动) | none |
清楚浮动、高度塌陷的解决方案：
方案1：给浮动元素最后一个添加一个空的兄弟元素div给div设置类名clear设置样式 .clear{clear:both |left |right;} 注意：加的元素不能有任何其他的样式和内容方案2：(推荐指数：满天星)给浮动元素元素的父亲添加类名clearfix;设置样式.clearfix:after{display:block; 设置是一个块元素content:''; 设置内容为空clear:both; 清除浮动height:0; 解决兼容问题}方案3：给浮动元素的父亲设置overflow：hidden;
概念：是一种思维模型，主要用于实现布局效果。由尺寸大小+内边距+外边距+边框组成
border：*px（线的宽度） solid（线的形状） red（边框的颜色）;
| solid | 实线 |
|---|---|
| dashed | 虚线 |
| dotted | 点线 |
| double | 双线 |
| 设置上边框 | border-top 线性 边框的颜色 |
|---|---|
| 设置下边框 | border-bottom |
| 设置左边框 | border-left |
| 设置右边框 | border-right |
复合和单个同时出现，单个效果在复合后面
<!DOCTYPE html>
<html lang="en">
<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><style>.size{width: 400px;height: 300px;border-top: 10px dashed green;border-left: 10px double red;border-right: 10px solid blue;border-bottom: 10px dotted blue;}</style></head>
<body><div class="size"></div>
</body>
</html>
概念：盒子边框和内容之间的距离
| 设置上内边距 | padding-top： *px； |
|---|---|
| 设置右内边距 | padding-right： *px； |
| 设置下内边距 | padding-bottom： *px； |
| 设置左内边距 | padding-left： *px； |
| 设置四个边的内边距 | padding：*px；属性值可以是1-4个，顺时针出发。有缺时取对边 |
| 设置上外边距 | margin-top： *px； |
|---|---|
| 设置右外边距 | margin-right： *px； |
| 设置下外边距 | margin-bottom： *px； |
| 设置左外边距 | margin-left： *px； |
| 设置四个边的外边距 | margin：*px；属性值可以是1-4个，顺时针出发。有缺时取对边 |
概念：是一种新的布局模式、主要应用于手机端、让元素有能力控制子元素的排列
多根轴线侧轴的排列设置【单根无效】
项目中的排序【了解】
order:*;
默认为0，从小到大的顺序排列
项目是否缩小
flex-shrink:*;
默认是1，会缩小，设置为0，不缩小。
如果是其他值，就用需要缩小的值，除以所有项目的flex-shrink的总和，得到一份的值、然后每个项目缩小指定份数
项目是否放大
flex-grow:*;
默认是0，不放大，设置为1，会放大
项目的基准尺寸【了解】
flex-basis:*px;等价于width
项目的复合属性
flex:flex-grow flex-shrink flex-basis;
说明：flex:1;代表的含义是1 1 auto；
项目单独的排列方式
align-self:stretch拉伸 |flex-start |center |flex-end |baseline基线；
粘连问题、父岁子动（可内可外，一定用内）
解决方案1：给父元素设置padding来实现（记得修改padding撑大后的值）
解决方案2：给父元素添加一个上边框。
border:1px solid transparent(透明色);
解决方案3：给父元素添加overflow:hidden；
塌陷问题：在mrgin垂直方向上，边距大的会吃掉小的
注意事项：在做项目之前先清除所有元素的内外边距
盒子水平居中
margin：0 auto；
他们都是盒子模型、只是模式不一样、元素实际占据的宽高的计算方式不一致
标准模式下实际占据的宽度= width + border + padding + margin
怪异模式下实际占据的宽度= width + margin
设置盒子模型的语法：
| 四种表示方式 | 颜色表示 |
|---|---|
| 1 | 英文单词 |
| 2 | #16进制 |
| 3 | rgb（R，G，B） ； |
| 4 | rgba（R,G,B,a（0-1））； |
font-family:'类型一'，'类型二';
注意不带单位
400|normal ：正常
700|bold：加粗
font-weight：100-900;
| font-style:normal； | 正常 |
|---|---|
| font-style:italic； | 倾斜 |
| font-style:oblique； | 倾斜 |
| text-decoration:none； | 无修饰线 |
|---|---|
| text-decoration:through； | 删除线 |
| text-decoration:underline； | 下划线 |
注意：行级元素不能使用该元素
text-align:left|center|right|justify两端对齐
text-indent:*px |*em;
| 设置宽度 | width：*px； |
|---|---|
| 强制不换行 | white-sapce：nowrap； |
| 超出隐藏 | overflow：hidden； |
| 溢出的标识是省略号 | text-overflow：ellipsis； |
white-space：参数；
normal正常
nowrap不换行
pre保留空格以及换行
overflow：参数；
hidden：隐藏
auto：自动判定是否需要滚动条
visible：可见的； 【内容超出的时候的相关设置】
scroll 必须有滚动条
text-overflow：参数；
clip:裁剪
ellipsis：省略号【文本溢出的标识的设置】
英文大小写转换
word-break:break-all; 单词是否打断（继承相关属性）
背景的复合属性
background:颜色 url（路径） 重复方式 x的位置 y的位置 ;[不分先后以及个数]
背景相关属性
| 背景颜色 | background-color：颜色； |
|---|---|
| 背景图片 | background-image：url（图片地址）； |
| 背景图的平铺方式【重复】 | background-repeat：np-repeat；【不重复】 |
| 背景图的起始位置 | background-position：x的位置，y的位置； |
| 背景图固定 | background-attachment:fixed;[了解] |
使用图片
使用背景
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><style>.banner{width: 590px;height: 470px;border: 3px solid red;margin-left: 60px;position: relative;}.banner div{width: 20px;height: 60px;background-color: skyblue;}.left{position: absolute;left:0%;top: 50%;margin-top: -30px;}.right{position: absolute;right:0%;top: 50%;margin-top:-30px;}</style></head>
<body><div class="banner"><a href="https:www.jd.com"><img width="590" height="470" src="https://img20.360buyimg.com/pop/s1180x940_jfs/t1/219820/23/14530/71295/6231376dE48d3177e/3ffd0f997591be3b.jpg.webp" alt="jd"></a><div class="left"><</div><div class="right">></div></div>
</body>
</html>
步骤：
1、实现一个指定大小的盒子
2、将精灵图设置成盒子的背景图
3、设置背景图的起始位置、调整出想要的背景图的位置【background-position】
| 精灵图的优点 | 精灵图的缺点 |
|---|---|
| 减少请求、提升性能 | 步骤繁琐 |
| 减少文件数量、降低命名难度 | 增删图片麻烦 |
| 减少内存占用 |
普通渐变
background: linear-gradient(颜色1，颜色2);
设置渐变方向
background: linear-gradient(to 方向，颜色1，颜色2..);
设置对角渐变
background: linear-gradient(to 方向1，方向2，颜色1，颜色2);
设置渐变角度
background: linear-gradient(*deg， 颜色1，颜色2);
设置渐变比例
background: linear-gradient(颜色1，*%，颜色2，*%。。);
设置普通渐变
background: radial-gradient(颜色1，颜色2...);
设置渐变比例
background: radial-gradient(颜色1，*%，颜色2 *%..);
设置渐变图形
background: radial-gradient(circle圆或者ellipse椭圆，颜色1，*%，颜色2 *%..);
注意事项：必须要有比例才能看到效果
设置重复线性渐变
background: raepeating-linear-gradient(颜色1，*%，颜色2，*%。。);
设置重复径向渐变
background: -linear-gradient(颜色1，*%，颜色2，*%。。);
background-size:宽度 高度；
概念：将元素放在指定的位置上：以后特指position
position：定位方式；
left：*px；或者 right： *px；
top：*px；或者bottom： *px；
注意事项
4.absolute绝对定位：基于最近的被设置非静态定位的上级元素进行定位，如果没有就基于浏览器第一屏
第一种
第二种
<!DOCTYPE html>
<html lang="en">
<head><style>body{height: 3000px;background-color: pink;}.right{border:1px red solid;background-color: blue;height: 300px;width: 300px;/* 第一种居中方式 *//* position: fixed;left: 50%;margin-left:-150px;top: 50%;margin-top:-150px; *//* 第二种居中方式 */position:fixed;top:0;bottom: 0;left: 0;right: 0;margin: auto;}</style>
</head>
<body><div class="right"></div>
</body>
</html>
概念：
不设置宽度
使用百分比
使用最大最小宽度
max-width：*px; 设置最大宽度
min-width：*px; 设置最小宽度
在项目中的整屏 的盒子设置最小宽度为版心的宽度
注意存在问题：
清楚浮动、高度塌陷的解决方案：
方案1：给浮动元素最后一个添加一个空的兄弟元素div给div设置类名clear设置样式 .clear{clear:both |left |right;} 注意：加的元素不能有任何其他的样式和内容方案2：(推荐指数：满天星)给浮动元素元素的父亲添加类名clearfix;设置样式.clearfix:after{display:block; 设置是一个块元素content:''; 设置内容为空clear:both; 清除浮动height:0; 解决兼容问题}方案3：给浮动元素的父亲设置overflow：hidden;
代码示例
<!DOCTYPE html>
<html lang="en">
<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><style>.clearfix{width: 100%;background-color: pink;}.clearfix .box1{border: 1px red solid;width: 100px;height: 100px;float: left;}/* .wrap .clear{clear: both;} */.clearfix:after{display: block;content: '';clear: both;height: 0;}</style>
</head>
<body><div class="clearfix wrap"><div class="box1"></div><div class="box1"></div><div class="box1"></div><!-- <div class="clear"></div> --></div>
</body>
</html>
注意事项：在项目中给高度可变的盒子不设置高度了，如果遇到浮动、就记得给他的父元素添加类名clearfix，清楚浮动。
如果要实现一整屏的页面，需要设置
html,body{height:100%;
}
min-height:*px; 最小高度
max-height:*px; 最大高度
css像素：逻辑像素-写代码使用的单位
物理像素：设备像素-屏幕出厂就决定了的像素
dpr = 物理像素/ 逻辑像素
视觉视口：看到的区域
布局视口:整个网页区域
理想视口：视觉视口：布局视口 = 1：1
设置移动端视口
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1px边框问题：
概念：快格式化上下文、是一个独立的区域、区域与区域之间不会互相影响。
BFC的应用：
解决margin的bug
清除浮动
实现两列的自适应布局
左边固定宽度，左边左浮动。右边不设置宽度，设置overflow:hidden
概念：浏览器厂商不一样、解析不一样、导致页面效果不一样
hack：针对特定的浏览器、写特定的代码、以达到页面效果统一
前缀 代表浏览器 浏览器内核
| 前缀 | 代表浏览器 | 浏览器内核 |
|---|---|---|
| -o- | 欧朋 | presto |
| -ms- | IE | trident |
| -moz- | 火狐 | gecko |
| -webkit- | 谷歌safari | webkit |
| 欧朋和谷歌联合开发 | blink |
步骤：
1、实现一个指定大小的盒子
2、将精灵图设置成盒子的背景图
3、设置背景图的起始位置、调整出想要的背景图的位置【background-position】
| 精灵图的优点 | 精灵图的缺点 |
|---|---|
| 减少请求、提升性能 | 步骤繁琐 |
| 减少文件数量、降低命名难度 | 增删图片麻烦 |
| 减少内存占用 |
图片3px问题：解决的两种方式
图片外面有链接、在低版本浏览器会有边框
图片是png24格式的时候、子低版本会显示成不透明的样子
| gif | 动图 |
|---|---|
| svg | 矢量图、放大缩小不失帧 |
| jpg | 可以提高、降低图片压缩级别、会自动填充透明色为白色 |
| png | 带透明格式 |
切图步骤
cursor:hand;低版本
cursor:pointer;高版本
cursor:url(.ico)；
transition:过度的属性1 执行的时间 延迟时间 变化曲线，过度的属性2 执行的时间 延迟的时间 变化的曲线；
变化的曲线-匀速liner
一个盒子100*100 鼠标悬停的时候，先用1秒修改高度为300，然后再修改高度为300，再加背景
.box1{width: 100px;height: 100px;background-color: aqua;transition: width 1s,height 1s 1s,background 2s 2s ;}.box1:hover{width: 300px;height: 300px;background-color: blue;/* transition: width 1s,height 1s 1s; */}
@keyframs 动画名{
0%{开始状态的形式
}
*%{中间状态的形式
}
100%{最终状态的形式
}
}
animation:动画名1 动画执行时间 延迟时间 执行次数 变化次数 执行的方向，动画名2 动画执行时间 延迟时间 执行次数 变化次数 执行的方向
执行次数infinite是无穷次
执行方向 alternate交叉
动画的执行状态
animation-play-state:paused暂停 | running选择；
| 列数 | column-count:*; |
|---|---|
| 列宽 | column-width:*; |
| 列间宽 | column-gap：*px; |
| 列边框 | column-rule:*px 线性 颜色； |
transform：rotate（*deg） 平面旋转
transform：rotateX（*deg）x平面旋转
transform：rotateY（*deg）y平面旋转
transform：rotateZ（*deg）z平面旋转
transform：rotate3d(x,y,z,*deg) 前面3个值为0/1代表不旋转或旋转
position:sticky:当元素移动到父元素的指定位置时 会固定下来
top:*px; | bottom :*px;
版权声明：本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间：8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态
