随堂一
表单
form:创建表单
语法：
<form action="#" method="GET"></form>
action属性: url路径，将表单提交至哪里。
method属性：指定表单提交数据的方式。 GET / POST
input ：定义输入框，按钮
语法：
<input type="submit">
type：核心属性，值不同对应input的功能，样式都会发生相对应的改变。
text：文本输入框。
password：密码输入框，输入内容将会被掩码。
checkbox：复选框。
radio：单选框。
button：定义可点击的按钮。
submit：自动提交按钮。
reset：重置按钮，会清空 form表单数据。
HTML属性 name ：定义input名字。 value ： 定义input的值。 placeholder ： input输入框的提示语“只能用在输入框”。 autofocus : 自动成为输入焦点 autocomplete ： 是否启用自动完成功能，on开启"默认值"，off关闭。 required ： 输入框的字段是必填的。 readonly ：只读模式。 disabled ： 禁用一个input。
<input type="text" name="user" value="111" placeholder="电视 家电"autofocus autocomplete="off" required readonly disabled>
value讲解 input标签的value属性的作用是由input标签type属性的值决定的。
-
当type值为 button，reset，submit中的其中一个时，value的值表示按钮上的文本描述。
-
当type值为 text，password，hidden中的其中一个时，value的值表示输入框中的初始值，初始值可以更改在提交表单的时候可以把value属性的值发送给服务器（即是初始值，也是提交至服务器的值）。
-
当type值为 checkbox，radio中的其中一个时，value的值表示提交给服务器的值“携带的数据”,或者复选框被勾选的状态，默认为on。
-
当type值为 image, value的值表示用户的点击位置“鼠标位于图片的x和Y坐标”并提交给服务器。
name讲解 name属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过JS引用表单数据. 只有设置了name属性的表单元素才能在提交表单的时候传递它们的值，因为服务器端获取表单数据通过元素的name属性的值而得到的，没有name属性就无法得到表单元素提交给服务器的值。
获得焦点
语法：
<label for="user">user</label> <input type="text" id="user" value="921024317">
label：给input添加标注。扩大input的使用范围。
作用：label的for值与input的ID值一致，点击label会让input获取焦点。
fieldset
将表单内的元素进行分组，会产生一个边框。
legend : 为fieldset元素定义标题
<fieldset> <legend>定义标签：</legend> </fieldset>
下拉菜单
select：定义下拉菜单
multiple属性：规定输入字段可以选择多个值
optgroup ：定义下拉菜单的选项组。
label属性：添加选项组的描述
option ： 定义列表中的一个选项内容
selected属性： 在页面加载的时候预先选中的选项。
<select name="skill" id="skill"> <optgroup label="客户"> <option value="">帮助中心</option> <option value="">售后服务</option <option value="" selected>在线客服</option> </optgroup> <optgroup label="商户"> <option value="">合作招商</option> <option value="">学习中心</option> </optgroup> </select
清除下拉列表右侧的小箭头
-
appearance: none;
-
-moz-appearance: none;
-
-webkit-appearance: none;
textarea
textarea：定义多行文本输入，文本区域可以容纳无限量的文本
cols：定义文本区域的宽，容纳的字符数量
rows：定义文本的高，容纳文本的字符数量
<textarea name="" id="" cols="30" rows="10"></textarea>
调整文本输入框的宽高
resize ：规定用户是否可以调整元素的大小
auto：允许用户调整元素。
none： 不允许用户调整。
horizontal:允许用户调整宽度。
vertical :允许用户调整高度
语法
textarea{
resize:auto
}
注意：当元素宽高由clos/rows设置，字体大小会影响元素大小
表格
-
table：表格定义标签
-
thead：头部
-
tbody：身体
-
tfooter：底部
-
tr：行
-
th：头单元格
-
td：标准单元格
注意：
-
设置table元素的大小会影响单元格宽高尽量不设置
-
th单元格默认文本加粗，水平居中
-
设置某单元格的大小会影响一行/一列的单元格大小
-
表格合并
-
colspan：跨列合并
-
rowspan：跨行合并
表格的边框合并
-
设置单元格之间的间距，默认为2px ，0没有，1有*/
border-spacing: 0;
-
设置单元格边框是否合并 separate不合并，collapse合并
border-collapse: collapse;
-
流式布局
流式布局：
默认的：根据元素的特性，从上至下，从左至右排列。
重要：
1. 元素特点：布局方式
块元素：div，p ，独占一行，多个块级元素从上至下排列，设置任何的css样式均有效。
行内元素：span，a，img 多个元素按照从左至右的顺序排列，设置宽高无效，margin上下无效。
行内块：input ， 多个元素按照从左至右的顺序排列，设置宽高margin均有效。
元素的转换：display: block, inline, inline-block;
盒子
盒子模型 ：content + padding + border + margin
content ：元素的宽高。
content ：内边距，调整边框到内容之间的距离 “撑大盒子”。
border ：边框，撑大盒子。
margin ： 外边距，从自身边框开始到另一个元素边框之间的间距“垂直方向，margin的合并问题”,水平方向从自身到另个元素margin之间的距离，没有margin合并。
盒子的塌陷
margin穿透问题：“第一个子元素的上margin和最后一个元素的下margin会穿透父元素”。
会造成父盒子塌陷问题，
解决方案三个：
1. overflow: hidden; (推荐，溢出内容的部分会隐藏)
2. padding：0.1px; (值不小于等于0即可)
3. border:1px solid; (麻烦)
盒子分成两种：
content-box 标准盒子(元素大小 = content + padding + border)
border-box 怪异盒子(元素大小 = content(content + padding + border) )
随堂二
选择器
标准选择器
-
标签选择器
-
类名选择器
-
id选择器
-
通配符选择器
复合选择器
后代选择器
<style>
/* 把ol的li改成红色*/
ol li{
list-style:none;
color:red;
}
/* 把ol的a改成blue*/
ol li a{
color:blue;
}
</style>
<body>
<ol>
<li>ol的孩子</li>
<li>ol的孩子</li>
<li>ol的孩子</li>
<li><a href "#">ol的孙子</a></li>
</ol>
<ul>
<li>ul的孩子</li>
<li>ul的孩子</li>
<li>ul的孩子</li>
</ul>
</body>
-
元素ol 和元素li 中间用空格隔开
-
元素li可以是儿子也可以是孙子
子代选择器
<style>
div>a{
}
</style>
<body>
<div>
<a href= "#">我是儿子</a>
<p>
<a href="#">我是孙子</a>
</p>
</div>
</body>
-
元素div和元素a 用> 隔开
-
元素a必须是元素div儿子级的其他的不归他管
并集选择器
<style>
/* 把鸡狗改成红色 */
div,p{
color:red;
}
/* 把鸡狗改成红色 小猪一家改红色*/
div,p,.pig li{
color:red;
}
</style>
<body>
<div>
鸡
</div>
<p>
狗
</p>
<span> 兔</span>
<ul class="pig">
<li>小猪</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
</body>
-
并集选择器可以多组标签
-
元素用英文逗号隔开
伪类选择器
超链接伪类
a:link：选择所有未被访问的链接
a:visited：选择所有已被访问的链接
a:hover：选择鼠标位于其上的链接
a:active：选择活动链接
<style>
/* 未访问的链接*/
a:link{
color:#333;
}
/*访问过的链接*/
a:visited{
color:red;
}
/* 选择鼠标经过的那个链接*/
a:hover{
color:blue;
}
/* 选择是我们的鼠标按下还没有弹起的链接*/
a:active{
color:#369;
}
</style>
<doby>
<a href="#">链接</a>
</doby>
-
为了确保生效，清按照LVHA的顺序声明:link :visited :hover :active.
:focus ：伪类选择器用于选取获得焦点元素
<style>
/*获得光标的input表单元素选取出来*/
input:focus{
background-color: red;
color: blue;
}
</style>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
UI伪类
input:enabled：选择元素启用后的状态
input:disabled：选择被禁用的input元素
input:focus：input获取输入焦点后的状态
input:checked：选择被选中的input元素（使用与checkbox，radio，option）
伪元素选择器
伪元素选择器：
简称：伪元素，相当于创建了一个html元素。
伪类选择器 和 伪元素选择器的区别：
-
前缀不同，伪类: ， 伪元素:: 。
-
伪类用于向选择器添加特殊的效果。伪元素将特殊的效果添加到某些元素上进行操作。
-
::berfore 增加前缀
-
::after 增加后缀
-
:: fist-letter 第一行第一个文本
-
::first-line 第一行
-
::-webkit-input-placeholder 设置input元素内的placeholder属性的文本
-
::selection 用户选中的文本内容
描点
特点：像迅速定位器，可以迅速找到与之绑定的元素
使用方式：a标签的href和元素的id值绑定
作用：当点击某一个a可以迅速找到与之帮等的元素
语法
<body>
<ul>
<li><a href="#box1">1</a></li>
<li><a href="#box2">2</a></li>
<li><a href="#box3">3</a></li>
<li><a href="#box4">4</a></li>
</ul>
<div id="box1" style="background-color: purple;">1</div>
<div id="box2" style="background-color: olive;">2</div>
<div id="box3" style="background-color: orangered;">3</div>
<div id="box4" style="background-color: orchid;">4</div>
</body>
随堂三
基线对齐
基线：多个元素水平方向排列，元素的垂直方向按照基线进行对齐。
基线：空块或图片默认的基线在底部，文本元素基线在四线三格的第三线“文本的中下部分”。
解决方案：vertical-align: middle“基线调整至中线” top“基线调整至顶部” bottom“基线调整至底部” baseline“四线三格的第三线”;
使用场景：1.流式布局中元素一行排列。 2.图片和文本在一行排列，不对齐问题。
雪碧图
什么是雪碧图：也叫精灵图
就是将很多个图片放置到一个大的图片上面，精灵图主要是当做背景图使用的。
之所以要将多个图片放到一张大图上，是因为很多时候我们的背景图片都是放在服务器上的，当需要使用某个图片时需要向服务器发送请求资源，如果图片过多服务器压力会比较大，所以精灵图可以减轻服务器压力。
使用方式：背景插入
背景插入：background-image: url();
背景图片的位置 background-position:-100% 100%；
1.关键字取值
2.百分比取值
3.像素取值
方式一：跟距图片的大小设置精灵图片的大小
默认背景图平铺
x为正值，显示的是左侧拼接的图片“Y轴同理”
查找某个精灵图：遵循正值“倒着找”，负值“正着找
方式二：窗口的大小给定情况。
原理：设置显示范围的固定大小，设置背景图的大小符合一张小图的显示宽高即可
隐藏显示
隐藏
-
隐藏，清除元素。 隐藏后不占据原来的位置。
display: none;
-
隐藏元素：隐藏后还占据原来的位置。
visibility: hidden;
-
设置元素的透视度，取值范围0-1，0为完全透视，1为完全不透视。
opacity: 0;
显示
-
配合display none; 作为显示元素使用“值是除了none以外的任何一个均可
display: block;
-
配合 visibility: hidden; 显示元素
visibility: visible;
-
配合opacity: 0; 作为显示元素使用
opacity: 1;
tooltip
toopltip：提示工具 在鼠标移动到指定的元素后触发
代码实现
<style>
.tooltip {
display: inline-block;
border: 1px solid #000000;
border-radius: 10px;
padding: 5px;
}
.tooltiptext {
width: 80px;
background-color: olive;
padding: 5px;
border-radius: 6px;
position: absolute;
top: 50px;
left: 100px;
visibility: hidden;
}
/* 鼠标移入到元素后显示提示 */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body>
<div class="tooltip">鼠标移动到这
<span class="tooltiptext">提示文本</span>
</div>
</body>
定位
-
定位的由来，将盒子定在某一位置上，所以定位也是摆放盒子，按照定位的方式移动盒子
定位的组成：定位=定位模式+边偏移
定位模式：用于指定一个元素在文档中的定位方式
定位模式他是通过css的position属性来设置的，值可以分为五个：static静态定位
relative相对定位，absoulute 绝对定位，fixed固定定位，sticky 粘性定位
边偏移：定位的盒子移动到最终位置。有top.bottom.left.right四个属性
静态定位（了解）static
是元素默认的定位方式，简单理解无定位的意思
静态定位按照标准流特性摆放位置，它是没有偏移的
相对定位 ：position:relative
1.他是相对于子级原来的位置来移动的
（移动位置的时候参照点是原来的位置）
2.原来在标准流位置继续占有，后面的盒子依然
以标准流方式对他（不脱离文档流，继续保留
原来的位置）
绝对定位 ： positive:absolut
1.如果没有祖先元素或者祖先元素没有定位
择以浏览器为准定位
2.如果这个父元素有定位（相对.绝对.固定）
则以最近一级的有定位的祖先元素为参考点移动位置
3.不占有原来的位置（脱离文档流，不保留原来位置）
相对定位和绝对定位倒是有什么使用场景
子绝夫相：子级使用绝对定位，父级则需要使用相对定位
子绝：子级用绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，
不会影响盒子里的其他兄弟
父相：父盒子布局时，需要占有位置，因此父亲只能是相对定位
总结：因为父级需要占有位置，因此是相对定位，
子盒子不需要占有位置，则使用绝对定位
子绝父相不是永远不变的，也可以子绝父绝，子绝父固，子绝父粘
固定定位：positive:fixed
固定定位使用场景：可以在浏览器页面滚动时
元素的位置不会改变
特点1.以浏览器的可视窗口为参照点移动元素。跟父元素
没有任何关系，不随滚动条滚动
特点2.固定定位不占有原先位置（脱离文档流）
粘性定位：positive:sticky
特点1.以浏览器的可视窗口为参照点移动元素（固定定位）
特点2.占有原先的位置不脱离文档流（相对定位）
特点3.必须添加top.left.bottom.right.其中一个才有效果
随堂四
浮动
浮动：让元素按照指定的方向进行运动，直到遇到父级元素的边界停下。
特点：
1.元素使用浮动后，脱离文档流，在流式布局的上层显示。
2.文本和浮动元素相遇，文本会在其周围环绕停留“不被覆盖”。
3.多个浮动元素相遇，会按照“内联排列”方式在一行展示。
清除浮动：
1.父级元素定义height，解决父元素不能被浮动元素撑出高度问题，height要>=浮动元素“把浮动元素关起来”。
2.添加属性clear:both; 可以给浮动元素添加，或者两个浮动元素之间添加空块添加，让多个浮动元素不内联排列。
3.浮动元素的结尾处添加空块并设置clear:both;，会让父级后元素自动获取高度。
4.使用overflow；
清除浮动
-
元素设置浮动后会脱离文档流，会对流式布局或文本内容产生影响，所以要清除浮动“控制浮动元素”。
1.父级元素定height
-
原理：给父元素内块定义height，解决父元素因子元素浮动无法获取高度的情况。
-
优点：简单，代码少，容易掌控。
-
缺点：只适用于有固高的布局，父元素高度和浮动子元素的高度不同也会有影响。
-
建议：不建议使用，只建议有固高的布局使用。
2，结尾处加空div标签 clear:both
-
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
-
优点：简单、代码少、浏览器支持好、不容易出现怪问题
-
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好
-
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法
3，父级div定义 伪类:after 和 zoom
-
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
-
优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
-
缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
-
建议：推荐使用，建议定义公共类，以减少CSS代码。 /清除浮动代码/ .clearfix:after{content:"";display:block;clear:both;visibility:hidden;height:0} .clearfix{zoom:1}
4，父级div定义 overflow:hidden
-
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
-
优点：简单、代码少、浏览器支持好
-
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。
-
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
5，父级div定义 overflow:auto
-
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
-
优点：简单、代码少、浏览器支持好
-
缺点：内部宽高超过父级div时，会出现滚动条。
-
建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
6，父级div 也一起浮动
-
原理：所有代码一起浮动，就变成了一个整体
-
优点：没有优点
-
缺点：会产生新的浮动问题。
-
建议：不推荐使用，只作了解。
7，父级div定义 display:table
-
原理：将div属性变成表格
-
优点：没有优点
-
缺点：会产生新的未知问题。
-
建议：不推荐使用，只作了解。
8，结尾处加 br标签 clear:both
-
原理：父级div定义zoom:1来解决IE浮动问题，结尾处加 br标签 clear:both
-
建议：不推荐使用，只作了解。
随堂五
css同胞选择器，获取同级元素中的某个元素
不区分类型：
:first-child 匹配同级元素中的第一个元素。
:last-child 匹配同级元素中的最后一个元素。
:nth-child(n) 匹配指定的位置的同级元素，参数可以是number/even/odd
区分类型：
:first-of-type 匹配同级元素中的第一个元素。
:last-of-type 匹配同级元素中的最后一个元素。
:nth-of-type(n) 匹配指定的位置的同级元素，参数可以是number/even/odd
盒子阴影
语法
box-shadow: h-shadow v-shadow blur spreod color inset
h-shadow: 必需，水平阴影的位置，允许负值
v-shadow: 必需，垂直阴影的位置，允许负值
blur：可选。模糊距离
spreod：可选。阴影尺寸
color ：可选阴影的颜色，请参阅css颜色值
inset：可选，将外部阴影改为内部阴影
文本阴影
语法
text -shadow: h-shadow v-shadow blur spreod
h-shadow: 必需，水平阴影的位置，允许负值
v-shadow: 必需，垂直阴影的位置，允许负值
blur：可选。模糊距离
spreod：可选。阴影尺寸
背景渐变
线性渐变：linear-gradient() 默认颜色从上至下渐变
background: linear-gradient(pink, lemonchiffon, lightcyan, orange);
第一个参数：可以添加“to 方向” 控制渐变的方向。 “0-360deg”改变渐变的方向通过角度调整。
background: linear-gradient(120deg, pink, lemonchiffon, lightcyan, orange);
后面的参数：颜色，任意的数量(颜色后面 跟“number + 单位”用来控制颜色的面积
background: linear-gradient(to right, pink 200px, lemonchiffon 60%, lightcyan, orange 85%);
重复线性渐变 repeating-linear-gradient()
background: repeating-linear-gradient(#000 0% 10%, red 10% 30%);
径向渐变：从中心动出发以椭圆形往外渐变，至最远的角落。
circle : 改变为圆形渐变。
background: radial-gradient(circle, pink 20%, lemonchiffon 50%, lightcyan, orange);
重复径向渐变
background: repeating-radial-gradient(#fff, #000 10%);
border-radius: 50%;
文本排列
writing-mode 定义文本在元素内水平或垂直方向的排版方式。
horizontal-tb 默认值，默认水平方向排列。
vertical-lr 垂直方向，自左而右的书写方式。
vertical-rl 垂直方向，自右而左的书写方式。
语法
writing-mode:vertical-rl
调整字间距
letter-spacing: 10px;
设置首行缩进，每一段文本开始的位置设置的间距
text-indent: 50px;
站点favicon
favicon.ico 是显示在浏览器网页标题旁边的小图标，显示在浏览器标签/地址栏左边和收藏夹。
作用：用来展示网站个性的缩略logo标志。
最早是由IE发明的，只支持ico格式。现代浏览器已经支持png/jpg格式
注意：图片格式尽量选择 1616,3232…… 的小图片
语法
<link rel="shortcut icon" href="./baidu.ico" type="image/x-icon">
2D图转换
2D：在2维平面内元素进行的平移，缩放，旋转，倾斜等效果。
transform 设置图形转换
translate() 平移
参数number+单位，正值负值均可，从当前的位置开始平移。
两个值: 第一个参数作用X轴，第二个作用域Y轴。
一个值: 该值作用于X轴，Y轴默认为0。
transform: translate(100px);
设置单轴的位置移动
transform: translateX(50px); transform: translateY(-20px);
多值同时使用
transform: translateX(50px) translateY(-20px);
scale() 缩放，参数number,元素放大或缩小的倍数“文本随同缩放”。
两个参数分别作用X，Y轴。 一个参数两个轴相同。
transform: scale(2, 1);
单独设置某个方向的缩放。
transform: scaleX() scaleY();
rotate() 旋转，参数为number+deg，默认沿中心点顺时针/逆时针旋转
transform: rotate(30deg); transform: rotateX(0deg); transform: rotateY(0deg);
默认元素旋转的原点在center center的位置
两个值作用于X，Y轴。
一个值作用X轴，Y轴默认为center。
值可以是number+单位“调整X,Y轴” 或 使用 “方向调整”
transform-origin: center center; transform-origin: 10px; transform-origin: top left;
skew() 倾斜，值number+deg ， 沿指定的轴倾斜多少度
transform: skew(10deg, 0deg);
过度
设置需要过渡的css属性名
transition-property: all;
设置过渡效果花费的时间
transition-duration: 2s;
设置延迟执行过渡的时间
transition-delay: 0.5s;
设置过渡的速度类型 linear ：匀速。 ease：默认值，逐渐减速。 ease-in：加速。 ease-in-out先加速后减速。
transition-timing-function: linear;
缩写式
transition: all 5s linear;
过渡：从一种样式逐渐转换为另一种样式的过程。
使用需求：配合事件触发实现过渡。
注意：过渡事件取消后会按照指定的时间原路返回。
随堂六
3D转换
3D : 在3维空间内对元素进行的转换。
使用条件：盒子嵌套关系(观察者位置盒子， 3D盒子， 盒子的面)
<!-- 观察者位置 -->
<section class="wrap">
<!-- 3维空间盒子 -->
<div class="box-3d">
<!-- 盒子的面设置定 -->
<p class="p1">正面</p>
<p class="p2">反面</p>
<p class="p3">左侧</p>
<p class="p4">右侧</p>
<p class="p5">顶部</p>
<p class="p6">底部</p>
</div>
</section>
transform-style:设置元素是在平面还是在三维空间
flat：默认值，二维平面内。
preserve-3d 指定元素在3D空间内
transform-style: preserve-3d;
rotate3d设置3D旋转：前三个参数分别为X，Y，Z轴是否旋转“0/1” 第四个参数为旋转的角度
transform: rotate3d(1,1,0,240deg);
translate3d 设置3D平移：分别作用于X, Y, Z轴
transform: translate3d(0,0,200px);
scale3d 设置3D缩放：分别作用于X，Y，Z轴的缩放比例
transform: scale3d(0.5, 0.5, 0.5) rotateX(260deg) rotateY(160deg );
perspective :设置景深。设置透视距离。即观察者距离平面[z=0]的距离，让元素形成透视效果，不允许负值。
perspective: 2000px;
设置观察者位置的原点，值与transform-origin相同
perspective-origin: top left;
动画
动画：让指定的元素在指定的时间之内做出不同的样式改变。
-
设置动画名
animation-name: move;
-
设置动画的执行时间
animation-duration: 3s;
-
设置动画的速度类型
animation-timing-function: linear;
-
设置动画的执行次数，默认执行1次，值number“次数” / infinite"无限次"
animation-iteration-count: 1;
-
设置动画延迟执行时间
animation-delay: 0s;
-
设置动画结束的状态。 backwards“返回到起点”，forwards“保持结束的状态”
animation-fill-mode: forwards;
设置动画的运动方向。 normal“默认值。从开始到结束” reverse“反方向，从结束到开始” alternate"先正常方向再反方向" alternate-reverse“相反” 注意：这两个值在动画次数为多次时有效。
animation-direction: alternate;
缩写
常用属性：只要前两个名称和时间添加后即可执行，后面的顺序可打乱不影响。
animation: name duration timing-function delay iteration-count direction fill-mode;
设置动画的状态。 running“播放动画”。 paused“暂停动画”
animation-play-state: paused;
keyframes 创建动画，关键帧。 identifier 动画名。 { }设置动画的每一帧状态。
语法：@keyframes identifier {}
0% {
transform: translateX(0) translateY(0) rotate(0deg);
}
/* 动画的结束状态，注意：开始状态的属性要和结束状态的属性保持一致。*/
90% {
transform: translateX(500px) translateY(0) rotate(1000deg);
}
91%,
93% {
transform: translateX(500px) translateY(100px) rotate(1000deg);
}
94%,
97% {
transform: translateX(500px) translateY(-50px) rotate(1000deg);
}
98%,
100% {
transform: translateX(500px) translateY(60px) rotate(1000deg);
}
随堂七
多重背景
添加多个背景，使用逗号隔开即可
background: url(../作业/tp/16.正方体美景图/1\ \(1\).webp),
url(../作业/tp/16.正方体美景图/1\ \(2\).webp),
url(../作业/tp/16.正方体美景图/1\ \(3\).webp);
注意：多重背景设置，调整图片的效果，可以多个值使用逗号隔开，如果只设置一个值默认所有图片使用
background-size: 100px 80px, 200px 160px, 100% 100%;
背景裁剪:根据元素的盒子模型范围设置背景的展示的区域
background-clip:控制背景的渲染区域
border-box ：默认值，渲染至边框区域
padding-box：渲染至内边距区域
content-box:渲染至内容区域
语法：
background-clip: content-box;
filter滤镜
filter属性，用来定义元素“通常设置img的可视效果”
背景滤镜
把图片变成灰色效果，就是“黑色”和“白色”两种颜色。
参数：默认值为100%，值越小颜色越接近于原图。
filter: grayscale(100%);
sepia，把图片变成褐色效果，复古风滤镜，值越大越重。
filter: sepia(100%);
opacity ，设置图片的透视度，取值范围0-1之间
filter: opacity(0.5);
hue-rotate，色相设置，改变图片的色调。 参数?deg"色相旋转"
filter: hue-rotate(0deg);
saturate， 图片饱和度，值越大饱和度越高
filter: saturate(5);
brightness， 图片的亮度调整。值越大亮度越高0为不亮
filter: brightness(2);
invert 效果类似于照相机底片的效果
filter: invert(100%);
blur 设置模糊度，值越大越模糊，参数number+单位
filter: blur(1px);
设置图片的阴影，可以根据图片的轮廓添加阴影。
filter: drop-shadow(10px 10px 10px red) blur(5px);
注意：多个效果同时使用，可使用空格隔开即可。
弹性布局
弹性布局：flex布局，是Css3新出的布局方式，能够代替传统的float布局。
使用条件："父子嵌套" 父元素指挥，子元素排版方式，父元素称为“容器”,自元素称为“项目”。
弹性布局中依赖两根轴进行排列，“主轴” 和 “交叉轴” ，开启弹性布局后默认元素按照主轴方向排列“X轴”。
轴决定了元素排列的方向，决定元素未设置大小的时候“主轴方向靠内容撑出，交叉轴铺满整个容器”。
开启弹性布局，子元素默认会按照从左至右的顺序排版。
display: flex;
改变主轴方向
row：默认值，主轴为X，从左至右排列。
row-reverse： 主轴为X，从右至左排列。
column：主轴为Y，从上至下排列。
column-reverse ：主轴为Y，从下至上排列。
flex-direction: row;
限制元素最大化和最小化的属性设置 max- / min-*/
max-width: 500px; min-height: 200px;
flex-basis 设置项目的伸缩基准，(占据主轴方向的多大空间)
当元素设置此属性时，元素的width/height值会被替代 ，但是不能控制max-/min-宽高*/
flex对齐方式
主轴方向对齐
center:居中
justify-content: center;
flex-start:头部对齐
justify-content: flex-start;
flex-end：尾部对齐
justify-content: flex-end;
right：尾部对齐
justify-content: right;
space-evenly：分散对齐1 元素之间间距和元素容器之间间距，距离等分
justify-content: space-evenly;
space-around：分散对齐1 元素之间间距，距离等分 。元素容器之间间距是元素之间间距的一半
justify-content: space-around;
pace-between：俩端对齐 元素之间间距，距离等分 。元素容器之间间距和元素之间间距没有间距
justify-content: space-between;
交叉轴方向对齐
center:居中
align-items: center;
flex-start/left:头部对齐
align-items: flex-start;
flex-end/right：尾部对齐
align-items: flex-end;
baseline:基线对齐
align-items: baseline;
弹性换行
开启弹性布局之后，如果我们不设置换行，我们的项目不会自动换行，会自动收缩自身大小
换行属性nowrap默认值 不换行
wrap换行 。wrap-reverse换行后逆序排列 。换行后，从溢出容器的元素开始换行
flex-wrap: wrap;
space-evenly：分散对齐1 元素之间间距和元素容器之间间距，距离等分
space-around：分散对齐1 元素之间间距，距离等分 。元素容器之间间距是元素之间间距的一半
pace-between：俩端对齐 元素之间间距，距离等分 。元素容器之间间距和元素之间间距没有间距
flex-start /left:头部对齐
flex-end/right：尾部对齐
center:居中
align-content: space-evenly;
随堂八
flex空间分配
flex-grow:设置元素的放大比例，默认值为零，将主轴剩余空间按照比例grow的值划分给每一个grow的元素
flex-grow: 1;
flex-shrink:设置项目的收缩比例，当我们的空间b不足项目多占空间缩小，默认为一根据元素的大小平均收缩值设置为0不收缩，值越大收缩的速度越快（可通过调整容器的大小来测试）
flex-shrink: 10;
单位
px ：像素，固值，页面中最小的显示单位。
% ：相对单位，相对父级的元素的字号或大小作为标准计算。
cm：厘米，固值。
mm：毫米，固值。
pt：磅，印刷单位。
rem：相对单位，以根元素“html”的字号为标准进行计算，倍数关系“是根元素的几倍”。
em: 相对单位，以父级元素的字号作为标准计算，倍数关系“多层元素都使用此单位会形成逐级相乘状态”
vw：相对单位，以浏览器窗口的宽度大小为标准计算“把窗口宽度分为100份，占其中几份？”。
vh：相对单位，以浏览器窗口的高度大小为标准计算“把窗口高度分为100份，占其中几份？”。
视口
<!-- 编码：可以放置中文乱码，UTF-8 | BG2312 -->
<meta charset="UTF-8"> <!-- meta元数据， 视口是元数据中的一种，主要为了响应式开发，一般要应用移动端。 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 网站的描述信息，主要为了推广，SEO--> <meta name="description" content="百度，百度新闻，最大的搜索网站"> <!-- 关键字，为了搜索引擎上方便搜索。 --> <meta name="keywords" content="百度，百度新闻"> <!-- 兼容IE浏览器的edge版本 --> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 刷新，在n秒后，跳转到另外的页面中 --> <meta http-equiv="refresh" content="5; url=https:///www.baidu.com"> <!-- 页面标题 --> <title>Document</title>
响应式布局
响应式开发：在同一页面下不同的屏幕尺寸，页面结构发生不同的变化。
响应式开发方案：媒体查询。(Css3 Media Query)
@media 媒体查询，可以针对不同的"媒体类型"定义不同的css样式
screen ："Media Type" 媒体类型，表示电脑，平板，智能手机显示器，包含有关用户的显示屏幕信息。
and: 操作符，所有的条件都成立时，才能使用样式表。
(): 条件判断，max-width 判断宽度，其中“max- 相当于<=” or “min- 相当于>=” (原因是html页面中不能解析><符号)
@media screen and (max-width: 800px){
.box{
background-color: red;
}
}
not 排除，取反。
排除媒体类型：没有条件在媒体类型前面添加not为排除。
条件取反：媒体类型后面跟的有条件时使用。
@media not screen and (max-width: 1200px){
.box{
background-color: green;
}
}
媒体查询
媒体查询的三种使用方式
-
和css一起书写，缺点css代码太多，没有章法。
-
通过@import 导入外部css文件，再关联media信息使用，不推荐使用。
-
使用link引入外部样式表，在link标签内添加media属性绑定信息使用，推荐。
使用link引入外部样式边表， 添加meida属性
orientation:landscape 横屏状态
orientation:portrait 竖屏状态
<link rel="stylesheet" href="./index.css" media="screen and (orientation:portrait)">
扫一扫
628
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
