html基本标签
标签分类
| 类型 | 说明 | 特点 |
|---|---|---|
| 块级元素 | 块元素会独自占据一整行，或者多行，可以任意设置其大小尺寸、一般去包裹其他元素，p标签不做包裹 | =块级元素有以下几个特点：总是另起一行（特立独行） 可以设置其宽度、高度，内外边距； 在不手动设置宽度的情况下，宽度默认为所在容器的100%（即容器宽度） 可以容纳行内元素和其他块元素。盒模型属性生效 如： body from select textarea h1-h6 html table button hr p ol ul dl cnter div |
| 行内元素 | 行内元素也称为内联元素，行内元素不占有独立区域，其大小仅仅被动的依赖于自身内容的大小（例如文字和图片），所以一般不能随意设置其宽高、对齐等属性。常用于控制页面中文本的样式。 | 行内元素的特点： 总是和相邻的行内元素在同一行上（物以类聚）《《设置宽高无效》》，水平方向的padding和margin属性可以设置，但是垂直方向上的==《《无效》》==。 默认宽度是他自身内容的宽度。 行内元素只能容纳其他行内元素或者文本。 如：heda meat title lable span br a style em b i strong |
| 行内块元素 | 在行内元素中就有那么几个特殊标签，比如<img>/<input>/<td>,可以给他们设置宽高、对齐属性，我们把这样特殊的一类标签称为行内块元素。 | 行内块元素的特点： 和相邻行内元素在同一行，但是之间会有空白缝隙。 默认宽度是他本身内容的宽度。 宽度、高度、行高、外边距以及内边距都可以手动设置。盒模型属性生效如：img input td |
一般将行标签转为块标签，之后设置其浮动从而实现标签按行排列。
快标签转为行标签，或使用浮动可以实现按行排列
几乎所有的标签都可以使用title属性
calc(100% - 300px):计算属性
行内元素标签之间的空格、换行符等均可导致行内元素间存在间隙
元素类型的转换—display（隐藏元素）
| 类型 | 说明 |
|---|---|
| none | 隐藏标签，相当于元素从文档流中去除 |
| block | 转换为块级元素 |
| inline | 转换为行级元素 |
| inline-block | 转换为行内块元素 |
/**
1.==内联元素添加浮动后会转换成块级元素==
2.解决横向排列的元素之间的空格
1)将标签代码写在通过一行
2)添加浮动
3）给元素添加一个父元素，设置font-size：0；然后单独设置该元素的字体大小
*/
visibility:hidden;隐藏元素，元素仍存在在文档流
-
转义字符
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tc5DEslz-1603767312032)(C:\Users\20424\AppData\Roaming\Typora\typora-user-images\image-20200925110541174.png)]
-
布局标签
- div 划分网页板块
- 双标签/不带任何自带样式/独占一行
- span 小文本
- 双标签/不带任何自带样式/在同一行显示
- div 划分网页板块
-
列表标签
-
无序列表
<ul> <li><b>哈哈哈</b></li> <li><a href="">嘿嘿嘿嘿</a></li> <li>嘻嘻嘻</li> </ul>- 快速生成列表 ul里面10个li ul>li*10
- 花括号里面写内容： ul>li*10{哈哈哈$}
- $代表从1开始的数字
- 应用场景：网页的导航/新闻列表/商品列表
- 快速生成列表 ul里面10个li ul>li*10
-
有序列表
<ol type="a" start="2"> <li>嘻嘻嘻1</li> <li>嘻嘻嘻2</li> <li>嘻嘻嘻3</li> </ol>- type: 排序方式 1/A/a/I/i
- start: 排序的起始值，必须是数字
-
自定义列表
<dl> <dt>图片/名词</dt> <dd>图片说明/名词的解释</dd> <dd></dd> <dd></dd> </dl>- 应用场景：1.上面的图片，下面是文字 2.左边是图片，右边是文字
-
表格表单
表格表单的基础
-
表格: 主要用在后台系统展示数据，一般不用在前台网页布局
- table 表格
- 边框 border=“数字” 像素px
- 宽度 width=“数字” 高 height=“数字”
- 表格水平位置 align
- left 默认值
- center 居中
- right 居右
- 单元格之间的间距 cellspacing=“数值” 一般设置0 去掉单元格之间的间距
- 调整内容到单元格的距离 cellpadding=“数值”
- 快速生成表格 table>tr10>td8{$} 10行8列的表格
- tr 行
- 水平对齐方式 align
- left 默认值
- center 居中
- right 居右
- 垂直对齐方式 valign
- middle 居中 默认值
- top 居上
- bottom 居下
- 水平对齐方式 align
- td 列
- 水平和垂直的对齐方式和tr一样
- 列合并 colspan
- 行合并 rowspan
- 合并的步骤：
- 补全表格，有几行几列就生成几行几列的表格
- 观察属于行合并还是列合并，哪个不同合并哪个
- 确定属性之后，观察合并几个单元格，属性对应的值就是几
- 将合并的属性放到合并的起始的单元格
- 注释掉多余的单元格
-
表单 form
<form action="" method=""></form>-
action: 提交路径
-
method: 提交方式 GET/POST
- GET一般用来获取数据 POST一般提交信息
- GET请求安全系数较低
- get可以传送的数据量较小 一般不超过2kb post可以传送的数据量较大 理论上不受限制
-
表单元素 单标签/在同一行显示
-
文本输入框
请输入姓名：<input type="text" placeholder="请输入姓名" value="小白"> placeholder：提示信息 value：默认值 -
密码输入框
请输入密码： <input type="password"> -
-
提交按钮
<input type="submit" value="搜索"> value：按钮文本-
重置按钮
<input type="reset" value="重新"> value：按钮文本 -
普通按钮
<input type="button" value="普通按钮">
-
- table 表格
表格表单的补充
表格
-
标题标签
<caption style="caption-side: bottom;">标题</caption> <!--caption-side: bottom;标题的位置--> -
列标题
<tr> <th>列1</th> <th>列2</th> <th>列3</th> </tr> -
行分组
类型 说明 thead 定义表格的页眉 tbody 定义表格的主体 tfoot 定义表格的页脚 -
列分组
类型 colgroup 定义表格列的组 col 定义用于表格列的属性 <colgroup> <col span="1" style="background-color:red"> <col span="2" style="background-color:yellow"> <col span="1" style="background-color:green"> </colgroup> -
新增的css
类型 说明 border-spacing 单元格间距(该属性必须给table添加) 表示单元格边框之间的距离， 不可取负值 border-collapse 合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值collapse(边框合并) empty-cells 定义当单元格无内容时，是否显示该单元格的边框区域；show：显示 ；hide：隐藏； table-layout 1）在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的；2）在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。fixed:提高浏览器的加载速度 vertical-align 可以在表格中生效
表单
补充
-
单选按钮
<!--列表间互斥，name值一样--> 单选列表：<input type="radio" name="sex" checked>男 <input type="radio" name="sex">女 <input type="radio" name="sex" disabled>中性 -
多选按钮
<!--checked:默认选中 disabled:禁止修改--> 多选列表:<input type="checkbox" checked disabled>a1 <input type="checkbox">a1 <input type="checkbox">a1 <input type="checkbox">a1 -
下拉列表
下拉列表： <select> <option selected>b1</option> <option>b2</option> <option>b3</option> <option>b4</option> </select> -
多行文本
<textarea name="" cols="" rows="" ></textarea>内联块元素
多行文本。rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符。
阻止浏览器对窗口的拖动设置:{resize:none;}（css属性）
<textarea style="resize: none"></textarea><!--resize: none--> -
文件上传
<input type="file"> <search></search><!--搜索框，H5新增的-->
标签
-
提示信息标签
关联文本与控件，提高用户体验outline:none;去掉表单元素获取标点时候的边框
- 扩大表单选中范围 label
- for的属性值指向选择元素的id名
<label for="man"> <input type="radio" name="sex" id="man">男 </label>
- 扩大表单选中范围 label
-
字段级标题
legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的唯一个元素。
- 表单字段集 fieldset
- 字段集标题 legend
<fieldset> <legend>标题</legend> <input type="text"> </fieldset>
- 表单字段集 fieldset
-
表单字段集
相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset在其内部可以设置多个fieldset对象。disabled定义空间禁制可用。
初识css
css的引入方式
内联式
<!--使用style属性引入CSS样式。
示例：-->
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>
<!--实际在写页面时不提倡使用，在测试的时候可以使用。-->
内部样式表
在style标签中书写CSS代码。style标签写在head标签中。
示例：
<head>
<style type="text/css">
h3{
color:red;
}
</style>
</head>
外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。
语法：
1、链接式
链接式和导入式的区别
1、属于XHTML
2、优先加载CSS文件到页面
@import
1、属于CSS2.1
2、先加载HTML结构在加载CSS文件。
，@import 语句必须出现在内部样式之前，否则文件引入无效。当然不推荐使用 @import 的方式引用外部样式文件，原因见另一篇博客：CSS 引入方式。
CSS中的优先级
1、样式优先级
行内样式>内部样式>外部样式(后两者是就近原则)
例如：
行内样式和内部样式比较优先级：
…
内部样式表和外部样式表使用就近原则，即谁写在下面以谁为准。
注意：导入式和链接式的优先级也是使用就近原则。
-
层叠样式表
-
样式表
- 内联/行内样式表：加在哪个标签，哪个标签才生效
- 给标签生成一个style的属性
- style的属性值为css属性:css属性值;css属性:css属性值;
- 内部样式表
- 外部样式表
- 内联/行内样式表：加在哪个标签，哪个标签才生效
-
css属性
- 宽度 width:数值px必须有单位 0可以不加单位
- 高度 height:数值px必须有单位 0可以不加单位
- 字体颜色 color:英语单词
- 背景色 background-color: 英语单词
-
层叠
css
内联样式表
<div style="width:200px;height:100px;background-color:red;color:blue;"></div>
内部样式表
- 在head标签里面，生成一个style的双标签
- 在style的标签里面写对应的css样式
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
外部样式表
- 新建一个css文件夹
- 在css文件夹的下面新建一个.css后缀的文件
- 在html文件的head标签里面生成一个link单标签
<link rel="stylesheet" href="css/外部样式表.css" type="text/css">
rel: 当前关联的文件类型 stylesheet：样式表
href：css文件的路径
type：文件类型 默认就是css文件类型
css语法
选择器{
属性:属性值;（声明）
属性:属性值;（声明）
属性:属性值;（声明）
……
}
-
选择器和声明组成
-
每条声明以分号结尾
-
最后一条声明可以省略分号
-
样式表的权重(优先级)
- 内联>内部
- 内联>外部
- 内部和外部,根据就近原则，离得近的优先显示
-
样式表的选择
p{color:red;}
+ id选择器 - 给标签添加id的属性，值为id名 <div id="box">Lorem ipsum dolo</div> - #id名 选择元素 ```css #box { background-color: pink; }1. id名不能重复- id只能有一个
-
class(类)选择器
- 给标签添加class的属性，值为class名
Lorem ipsum```- .class名选择元素 ```css .box { color: red; } .box1 { background-color: royalblue; } ``` 1. class名可以重复- 一个标签可以有多个class名,多个之间用空格隔开
-
通用选择器
*{ margin:0; 外边距 padding:0; 内填充 }
-
-
选择器的权重
同一个元素，设置相同的属性，设置不同的属性值
类型 权重 !important 无穷大 内联样式 1000 id 100 class/伪类选择器/伪元素/CSS3新增的选择器 10 标签 1 继承样式 0 - 权重值越高，优先显示该样式
- 后代选择器的权重由每个选择器的权重值相加
- 群组选择器的权重值为选择器本身的权重值
- 权重值相同的，就近原则
- 继承样式的权重值是最低的
选择器间可以进行组合使用
... <style> /*1.权重100*/ #text{ color:red; } /* /*2.权重1+10=11 "2"的整体权重小于原始css样式的权重，所以此悬浮样式无法生效 p:hover{ color:yello; } */ /*3.权重1+100=11 "3"的整体权重大于原始css样式的权重，所以此悬浮样式生效*/ #text:hover{ color:blue; } </style> ... <p id="text"> sfdsfs </p> <!--鼠标滑过后为yellow-->-
标签命名
- 英文单词并且语义化
- 驼峰命名
- 短线连接
- 下划线连接
注意
-
宽高只对独占一行的元素生效
css进阶
css层叠性
通过不同的选择器选择同一个标签的时候，设置了相同的属性，但是设置了不同的属性值，根据选择器的权重值，权重值高的优先显示，没有冲突，正常显示
CSS 的继承性
CSS 的继承特性指的是应用在一个标签上的那些 CSS 属性被传到其子标签上。看下面的 HTML 结构：
css的继承：就是给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。 官方解释，继承是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素。
<div>
<p></p>
</div>
如果
继承，即
也拥有属性 color: red。
属性的继承
| 继承性 | 类型 | 属性 |
|---|---|---|
| 是 | 文本 | letter-spacing：增加或减少字符间的空白（字符间距）line-height：行高；color:文本颜色 |
| word-spacing：增加或减少单词间的空白（即字间隔）；text-align：文本水平对齐； | ||
| text-indent:文本缩进text-transform：控制文本大小写；direction：规定文本的书写方向 | ||
| 字体 | font：组合字体 | |
| 元素可见性 | visibility | |
| 表格布局属性 | caption-side、border-collapse、border-spacing、empty-cells、table-layout | |
| 列表布局属性 | list-style-type、list-style-image、list-style-position、list-style | |
| 生成内容属性 | quotes | |
| 光标属性 | cursor | |
| 页面样式属性 | page、page-break-inside、windows、orphans | |
| 声音样式属性 | speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation | |
| 否 | display：规定元素应该生成的框的类型 | |
| 文本属性 | vertical-align：垂直文本对齐；text-decoration：规定添加到文本的装饰；text-shadow：文本阴影效果；white-space：空白符的处理；unicode-bidi：设置文本的方向 | |
| 盒子模型的属性 | width、height、border、padding、height、margin… | |
| 背景属性 | background、background-color、background-image、background-repeat、background-position、background-attachment | |
| 定位属性 | loat、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index | |
| 生成内容属性 | content、counter-reset、counter-increment | |
| 轮廓样式属性 | outline-style、outline-width、outline-color、outline |
由上可见，当网页比较复杂， HTML 结构嵌套较深时，一个标签的样式将深受其祖先标签样式的影响。影响的规则是：
CSS 的优先规则
CSS 优先规则1： 最近的祖先样式比其他祖先样式优先级高。
例1：
<!-- 类名为 son 的 div 的 color 为 blue -->
<div style="color: red">
<div style="color: blue">
<div class="son"></div>
</div>
</div>
如果我们把一个标签从祖先那里继承来的而自身没有的属性叫做"祖先样式"，那么"直接样式"就是一个标签直接拥有的属性。又有如下规则：
CSS 优先规则2："直接样式"比"祖先样式"优先级高。
例2：即继承样式的优先级最低 ， 继承来的属性值最低
<!-- 类名为 son 的 div 的 color 为 blue -->
<div style="color: red">
<div class="son" style="color: blue"></div>
</div>
**CSS 优先规则3：**优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
例3：
// HTML
<div class="content-class" id="content-id" style="color: black"></div>
// CSS
#content-id {
color: red;
}
.content-class {
color: blue;
}
div {
color: grey;
}
最终的 color 为 black，因为内联样式比其他选择器的优先级高。
所有 CSS 的选择符由上述 7 种基础的选择器或者组合而成，组合的方式有 3 种：
- 后代选择符： .father .child{}
- 子选择符： .father > .child{}
- 相邻选择符: .bro1 + .bro2{}
当一个标签同时被多个选择符选中，我们便需要确定这些选择符的优先级。我们有如下规则：
**CSS 优先规则4：**计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。
例4：
// HTML
<div id="con-id">
<span class="con-span"></span>
</div>
// CSS
#con-id span {
color: red;
}
div .con-span {
color: blue;
}
由规则 4 可见， 的 color 为 red。
如果外部样式表和内部样式表中的样式发生冲突会出现什么情况呢？这与样式表在 HTML 文件中所处的位置有关。样式被应用的位置越在下面则优先级越高，其实这仍然可以用规则 4 来解释。
例5：
// HTML
<link rel="stylesheet" type="text/css" href="style-link.css">
<style type="text/css">
@import url(style-import.css);
div {
background: blue;
}
</style>
<div></div>
// style-link.css
div {
background: lime;
}
// style-import.css
div {
background: grey;
}
从顺序上看，内部样式在最下面，被最晚引用，所以
上面代码中==，@import 语句必须出现在内部样式之前，否则文件引入无效。当然不推荐使用 @import 的方式引用外部样式文件，原因见另一篇博客：CSS 引入方式。==
CSS 还提供了一种可以完全忽略以上规则的方法，当你一定、必须确保某一个特定的属性要显示时，可以使用这个技术。
**CSS 优先规则5：**属性后插有 !important 的属性拥有最高优先级。若同时插有 !important，则再利用规则 3、4 判断优先级。
例6：
// HTML
<div class="father">
<p class="son"></p>
</div>
// CSS
p {
background: red !important;
}
.father .son {
background: blue;
}
虽然 .father .son 拥有更高的权值，但选择器 p 中的 background 属性被插入了 !important， 所以
的 background 为 red。
权重值相同，就近原则
后代选择器
样式：
选择器 选择器{}
~ ~
群组选择器
<style>
div,p{
... 群组选择器的权重值，是各自计算各自的，捕鱼器与的叠加
}
#s{
...
}
</style>
<body>
<div id="s">
sdsf
</div>
</body>
伪元素选择器
| 类型 | 示例 | 解释 | 备注 |
|---|---|---|---|
| ::after | p::after{content:"";(必须存在)} | 父元素添加最后一个孩子，content:"";中的内容可以是标签内容，如：p::after{content:“sdadapan>”;}，添加内容为空，相当于添加了一个内容为空的盒子 | 相当于内联元素 |
| ::before | p::before{content:"";(必须存在)} | 父元素添加第一个孩子 | 相当于内联元素 |
| ::first-letter | p:first-letter | 选择每一个 元素的第一个字母 | |
| ::first-line | p:first-line | 选择每一个 元素的第一行 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<style>
#dd{
width: 500px;
height: 500px;
border: 2px solid black;
}
#dd::after{
content:"";
width: 200px;
height: 200px;
background: peru;
display: block;
}
#dd:hover::after{
background: blue;
}
</style>
</head>
<body>
<p id="dd">1</p>
</body>
</html>
CSS3新增选择器
属性选择器
属性名可以自定义，权重为10
| 选择器 | 功能描述 |
|---|---|
| E[attribute] | 选取带有指定属性的元素，只使用属性名，但没有确定任何属性值 |
| E[attribute=value] | 选取带有指定属性和值的元素 |
| E[attr^=“val”] | 匹配属性attr的值以指定值"val"开头的每个元素 |
| E[attr$=“val”] | 匹配属性attr的值以指定值"val"结尾的元素 |
| E[attr*=“val”] | 匹配属性attr的值包含字符串"val"元素 |
伪类选择器
权重值和class选择器一样 为10结构伪类选择器是css3中新增的选择器，主要作用是通过文档结构的先后关系来匹配特定的元素，从而减少结构代码中ID属性和class属性的定义，使得文档更简洁。
结构伪类选择器语法：
下方语法中n不能以0开头，123…，也可以是其他关键字如odd奇数、even偶数。也可以使用2n表示偶数，2n+1表示奇数。根据特殊情况，改变表达式，如选中第4个和第8个，则为4n+4.。其中n从0开始，选择中的为 0、4、8…
结构性伪类选择器
| 选择 | 功能描述 |
|---|---|
| :root | 选择匹配文档的根元素 |
| E:nth-child(n) | 选择所有在其父元素中的第n个位置的匹配E的子元素 |
| E:nth-last-child(n) | 选择所有在其父元素中倒数第n个位置的匹配E的子元素 |
| E:nth-of-type(n) | 选择所有在其父元素中同类型第n个位置的匹配E的子元素 |
| E:nth-last-of-type(n) | 选择所有在其父元素中同类型倒数第n个位置的匹配E的子元素 |
| E:last-child | 选择位于其父元素中最后一个位置，且匹配E的子元素 ，与E:nth-last-child(1)等同 |
| E:fisrt-child | 选择位于其父元素中第一个位置，且匹配E的子元素 ，与E:nth-child(1)等同 |
| E:first-of-type | 选择在其父元素中匹配E的第一个同类型子元素 |
| E:last-of-type | 选择在其父元素中匹配E的最后一个同类型子元素 |
| E:only-child | 选择在其父元素中只包含一个子元素，且该子元素匹配E。 |
| E:only-of-type | 选择在其父元素中只包含一个同类型子元素，且该子元素匹配E。 |
| E:empty | 选择匹配E的元素，且该元素不包含子元素。 |
目标伪类选择器
E:target 选择匹配E的所有元素，且匹配元素被相关URL指向 (如：锚点链接)
动态伪类选择器
伪类：某种样式下显示的颜色
| 类型 | 作用 |
|---|---|
| link | 链接未访问之前的显示样式 |
| visited | 链接访问之后显示的样式 |
| hover | 鼠标悬浮后产生的效果 |
| active | 鼠标按下后的样式 |
注：书写顺序，为 link hover visited active
UI 元素状态伪类选择器
| 类型 | 语法 | 备注 |
|---|---|---|
| E:enabled | 匹配所有用户界面（form表单）中处于可用状态的E元素 | |
| E:disabled | 匹配所有用户界面（form表单）中处于不可用状态的E元素 | |
| E:checked | 匹配所有用户界面（form表单）中处于选中状态的元素E | 默认选中： checked 禁用：disabled 可用：enabled |
| E:focus | 获取焦点 表单元素 | |
| E::selection | 匹配E元素中被用户选中或处于高亮状态的部分 | 即鼠标选中的元素，如文字的全部选中 |
层级选择器
| 类型 | 解释 | 用法 |
|---|---|---|
| E>F | 子选择器 | 选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素 |
| E+F | 相邻兄弟选择器(找后面的相邻的第一个同辈元素) | 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面 |
| E~F | 通用选择器 (找后面的所有同辈元素) | 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 |
扩展
CSS属性
css字体属性
font-size:大小
| 相对长度 | 说明 |
|---|---|
| em | 相对于当前对象内文本的字体尺寸，因为字体的继承所以，也就是父元素的字体尺寸 |
| rem | 相对于根元素(移动端) |
| px | 像素 |
font-weight：加粗
font-style
| 值 | 描述 |
|---|---|
| normal | 默认值。浏览器显示一个标准的字体样式。 |
| italic | 浏览器会显示一个斜体的字体样式。 |
| oblique | 浏览器会显示一个倾斜的字体样式。 |
| inherit | 规定应该从父元素继承字体样式。 |
font-family：字体类型
font-family:字体1,字体2,字体3
font的复合形式
@font-face
css文本样式
text-align 设置元素水平对齐方式
| left | 把文本排列到左边。默认值：由浏览器决定。 |
|---|---|
| right | 把文本排列到右边。 |
| center | 把文本排列到中间。 |
| justify | 实现两端对齐文本效果。 |
| inherit | 规定应该从父元素继承 text-align 属性的值。 |
vertical-align:(图片支持)
属性设置一个元素的垂直对齐方式。
应用：
-
- 应用
- 解决图片底部三像素的留白，使用默认属性之外的属性
- 调整小图标和文字对齐的方式
- 应用
元素类型
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
| 值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上。 |
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 使元素及其后代元素的底部与整行的底部对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
| length | 将元素升高或降低指定的高度，可以是负数。 |
| % | 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
line-height: 行高
| 值 | 描述 |
|---|---|
| normal | 默认。设置合理的行间距。 |
| number | 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 |
| length | 设置固定的行间距。 |
| % | 基于当前字体尺寸的百分比行间距。 |
| inherit | 规定应该从父元素继承 line-height 属性的值。 |
text-decoration:文本的修饰
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| blink | 定义闪烁的文本。 |
| inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
text-transform：属性控制文本的大小写。
| 值 | 描述 |
|---|---|
| none | 默认。定义带有小写字母和大写字母的标准的文本。 |
| capitalize | 文本中的每个单词以大写字母开头。 |
| uppercase | 定义仅有大写字母。 |
| lowercase | 定义无大写字母，仅有小写字母。 |
| inherit | 规定应该从父元素继承 text-transform 属性的值。 |
间距
| 类型 | 说明 |
|---|---|
| letter-spacing | 中文：每个汉字之间的距离 ；英文：每个字母之间的距离 |
| word-spacing | 单词之间的距离，只对英文生效 |
cursor：鼠标
| 值 | 描述 |
|---|---|
| url | 需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 |
| default | 默认光标（通常是一个箭头） |
| auto | 默认。浏览器设置的光标。 |
| crosshair | 光标呈现为十字线。 |
| pointer | 光标呈现为指示链接的指针（一只手） |
| move | 此光标指示某对象可被移动。 |
| e-resize | 此光标指示矩形框的边缘可被向右（东）移动。 |
| ne-resize | 此光标指示矩形框的边缘可被向上及向右移动（北/东）。 |
| nw-resize | 此光标指示矩形框的边缘可被向上及向左移动（北/西）。 |
| n-resize | 此光标指示矩形框的边缘可被向上（北）移动。 |
| se-resize | 此光标指示矩形框的边缘可被向下及向右移动（南/东）。 |
| sw-resize | 此光标指示矩形框的边缘可被向下及向左移动（南/西）。 |
| s-resize | 此光标指示矩形框的边缘可被向下移动（南）。 |
| w-resize | 此光标指示矩形框的边缘可被向左移动（西）。 |
| text | 此光标指示文本。 |
| wait | 此光标指示程序正忙（通常是一只表或沙漏）。 |
| help | 此光标指示可用的帮助（通常是一个问号或一个气球）。 |
css列表属性
list-style-type：列表符号
| 值 | 描述 |
|---|---|
| none | 无标记。 |
| disc | 默认。标记是实心圆。 |
| circle | 标记是空心圆。 |
| square | 标记是实心方块。 |
list-style-image：使用图片作为列表符号
| 值 | 描述 |
|---|---|
| URL | 图像的路径。 |
| none | 默认。无图形被显示。 |
| inherit | 规定应该从父元素继承 list-style-image 属性的值。 |
list-style-position:定义列表符号的位置
| inside | 列表项目标记放置在文本以内，且环绕文本根据标记对齐。 |
|---|---|
| outside | 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。 |
| inherit | 规定应该从父元素继承 list-style-position 属性的值。 |
list-style:type images position
css边框
| 类型 | 说明 |
|---|---|
| border-width | border-width:像素值 |
| border-color | border-color:颜色值 |
| border-style | solid(实线) dashed(虚线) dotted(点划线) double(双线) |
| border | border:边框宽度 边框风格 边框颜色; |
<style>
/*分别*/
div{
width:200px;
height:300px;
border-top:1px solid #ccc;
border-top:1px dottes #ccc;
border-top:1px double #ccc;
border-top:1px dashed #ccc;
}
</style>
...
<body>
<div>
ffsfs
</div>
</body>
CSS背景
background:颜色（background-color）、图像（background-image）、透明度（rgba、opacity）、背景图像平铺（background-repeat）、位置（background-position）、大小（background-size）、显示区域（background-origin）、裁剪区域（background-clip）
rgba(0-255,0-255,0-255,x):x为透明度
备注：使用复合样式的时候，无颜色，默认为透明色，若要单独设置颜色，需要在复合属性后添加
| 值 | 说明 | CSS | 属性 |
|---|---|---|---|
| background-color | 指定要使用的背景颜色 | 1 | |
| background-position | 指定背景图像的位置 | 1 | •像素：px •垂直方向：top、center、bottom •水平方向：left、center、right 只设置一个值，第二个默认居中 |
| background-size | 指定背景图片的大小 | 3 | cover:背景图拉伸，直到完全覆盖盒子，会被裁切，不会发生变形；contain:背景图拉伸，只要碰到边缘就停止拉伸，会出现留白,不会发生变形；百分比会发生变形 |
| background-repeat | 指定如何重复背景图像 | 1 | •repeat 重复（默认）•no-repeat 不重复•repeat-x 水平重复•repeat-y 垂直重复 |
| background-origin | 指定背景图像的定位区域 | 3 | padding-box:背景图默认从padding区域开始显示;border-box:背景图从边框区域开始显示;content-box:从内容区开始显示 |
| background-clip | 指定背景图像的绘画区域,默认值为border-box | 3 | padding-box:背景图默认从padding区域开始裁剪;border-box:背景图从边框区域开始裁剪;content-box:从内容区开始裁剪 |
| background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动。 | 1 | scroll : 背景图像是随对象内容滚动（默认值）fixed : 背景图像固定 |
| background-image | 指定要使用的一个或多个背景图像 |
.back-img{
width: 200px;
height: 200px;
/*background: 背景颜色 背景图 背景图是否重复 背景图的位置/背景大小; */
/*顺序不固定*/
background: #fc3 url("img/logo.png") no-repeat 0 0/100% 100%;
background: no-repeat 0 0/100% 100% url("img/logo.png") #f3c;
}
应用背景图片的重叠：
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
height: 190px;
border: 1px solid #000;
margin: 100px auto;
background-image: url("images/bg-plane.png"),url("images/bg-sun.png"), url(images/bg-clouds.png);/*后者覆盖前者*/
background-repeat: no-repeat, no-repeat, no-repeat;
background-size: 50px 50px, 50px 50px, auto auto;
background-position: 50px 150px, 400px 50px, 0px 0px;/*通过定位实现不同图片的位置，从而实现叠加*/
animation: move 10s linear 0s infinite normal;
}
@keyframes move {
from{
background-position: 50px 150px, 400px 50px, 0px 0px;
}
to{
background-position: 500px -150px, 400px 50px, -600px 0px;
}
}
</style>
CSS浮动
应用场景：让纵向排列的元素横向排列 float:left/right/none
浮动以后margin仍然生效
特点：
-
从父元素的边缘开始挨个排列；
-
浮动元素脱离原文档流 ，浮动元素会遮挡后表面的元素，但不会遮挡文字，可使用overflow实现或者高度自适应
-
当子元素的宽度超过父元素的宽度的时候 ，后面的元素会掉到浮动设置的位置
-
浮动元素会影响后继的兄弟，不会影响之前的元素
特殊情况：
见代码day05->float.html
内联元素添加浮动后会转换成块级元素
white-space
| 值 | 描述 |
|---|---|
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
盒模型
内容区
显示文字/图片/视频等的区域，宽高确定区域
总宽度=width+padding+border
内填充（padding）
padding值的设置
- 一个值：padding:10px;四周
- 两个值：padding:10px 20px ;上下 左右
- 三个值：padding：10px 20px 10px;上 左右 下
- 四个值：padding:10px 20px 30px 4px;== 上 右 下 左==
padding值的特点：
- 会撑大盒子,如果不想被撑大的话，要在原来宽高的基础上，减去对应方向的padding值
- padding值不能设置负数
- 背景图/色可以在padding区域显示
- 可以用来调整内容区到盒子边缘的位置
外边距——margin
margin值的设置
- 一个值：margin:10px;四周
- 两个值：margin:10px 20px ;上下 左右
- 三个值：margin：10px 20px 10px;上 左右 下
- 四个值：margin:10px 20px 30px 4px;上 右 下 左
margin特点
margin值不会撑大盒子，但会影响旁边的元素
margin可以设置负数
调整自己和别的元素之间的距离
margin的bug:
margin的传递：给元素的第一个子元素添加margin或错误的加到父元素的上面，解决方法：
1.给父元素设置padding-top
2.给父元素设置boder
3.触发bfc (block format content),即==给父元素添加overflow:hidden==:
*浮动可以触发
*设置一个元素的overflow为非visible
*可以为hidden auto scroll
- margin的重叠，给上div设置下边距给下面的设置下边距，二者之间会长生重叠，会以大的为准，只有上下才会出现
去掉标签自带的行高，令line-height和font-size大小相等
由于margin的添加导致内容换行，而无法正常排列，此时在内盒子设置上的宽度大于外盒子，再令外盒子溢出隐藏
img自带3px的留白
vertical-align:设置一个元素的垂直对齐方式。，去除图片的留白，令图片垂直居中，表格中会生效，其他的不生效
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
| 值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上。 |
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部。解决img自带的留白 |
| bottom | 使元素及其后代元素的底部与整行的底部对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
| length | 将元素升高或降低指定的高度，可以是负数。 |
| % | 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
<style>
img.top {vertical-align:middle;}
img.bottom {vertical-align:top;}
</style>
</head>
<body>
<p>一个<img src="logo.png" alt="w3cschool" width="270" height="50" />默认对齐的图像。</p>
<p>一个<img class="top" src="logo.png" alt="w3cschool" width="270" height="50" /> text-top 对齐的图像。</p>
<p>一个<img class="bottom" src="logo.png" alt="w3cschool" width="270" height="50" /> text-bottom 对齐的图像。</p>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Doy11G9C-1603767312049)(C:\Users\20424\AppData\Roaming\Typora\typora-user-images\image-20200929171514023.png)]
溢出属性—overflow
<!--内盒子的宽度大于外盒子的时候，大盒子使用溢出，可以实现内部盒子的排列，而不会溢出换行-->
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。滚动条永远显示 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容，无溢出滚动条不会出现 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
/*单行文本实现不换行，显示省略号*/
1.设置宽度
2.设置不换行 white-space:nowrap;
3.设置溢出隐藏，overflow:hidden;
4.设置文本溢出显示省略号 text-overflow:ellipsis
CSS定位
分类
| 类型 | 说明 | 特点 |
|---|---|---|
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 | |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。 | 1.不脱离文档流；任然占据位置，原先的位置其他元素，后继元素不能占据，但定位可以出现在其位置上。案例查看；2.定位元素的层级要比普通元素的层级高，在其上方显示， |
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 | 1.绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置逐层向上直到body或;2.脱离文档流，会遮挡文字，不占据位置，3.absolute 定位的元素和其他元素重叠。4.设置绝对定位之后margin:auto会失效。5.内联元素会变成块级元素。6.给元素不设置宽，自适应宽度的时候，加了绝对定位，自适应失败，需要重置元素的宽width:100%，初始值不是top:0;left:0 |
| fixed | 生成固定定位的元素，相对于浏览器窗口进行定位。 | 1.Fixed定位使元素的位置与文档流无关，因此不占据空间即脱离文档流，margin:auto;会失效。 2.参考浏览器的窗口。3.Fixed定位的元素和其他元素重叠。4.宽度自适应会失效，需要重新设置宽度。通栏就是运用了宽度自适应，只设置高度。此时宽度失效，需要重新设置宽度，width:100%; |
| sticky | 粘性定位，相对定位和固定定位的结合 | 1.参考浏览器的窗口 2.未达到top值之前是普通元素，达到之后成为固定元素 |
定位元素的层级关系
定位元素的层级顺序要高于普通元素
z-index:auto/number
- 值越大，层级越高，盒子就越在上面
- 只对定位元素才有作用
应用：
absolute
1.水平/垂直居中
方法一：先距左==+50%==，再距右距离的一般
<style>
div{
width: 200px;
height: 300px;
background: pink;
position: absolute;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -150px;
}
</style>
方法二
div{
width: 200px;
height: 300px;
background: pink;
position: absolute;
top: 0;left:0;
right:0;bottom:0;
margin: auto;
}
2.重叠效果
...
<style>
*{
margin: 0;
padding: 0;
}
div{
/*大盒子的宽高和图片的一致*/
width: 1226px;
height: 460px;
position: relative;/*使用定位属性，令列表项定位在大盒子的上面*/
}
ul{
position: absolute;
bottom: 10px;
right: 10px;
}
li{
width: 10px;
height: 10px;
margin: 0 5px;
list-style: none;
border-radius: 50%;
float: left;
background: #969696;
}
</style>
...
<div>
<img src="img/bg-2.png" alt="">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
3.二级菜单
<style>
*{
margin: 0;
padding: 0;
}
.menu{
width: 600px;
height: 80px;
background: #969696;
margin: auto;
}
.menu li{
width: 100px;
background: paleturquoise;
list-style: none;
height: 80px;
line-height: 80px;
float: left;
}
.de{
background: #00c0a5;
height:80px;
position: absolute;
width: 100%;
left: 0;
display: none;
/*!*过度属性*!
transition: all 0.6s;
height: 0;!*令高度为零，但是存在文字，会发现任然存在文字，高度仍然有，是由于文字撑开的*!
overflow: hidden;!*令文字隐藏*!*/
}
.menu li:hover ul{
display: block;
/* height: 80px;*/
}
</style>
...
<ul class="menu">
<li>
小米官网1
<ul class="de">
<li>小米商城1</li>
<li>小米商城2</li>
<li>小米商城3</li>
<li>小米商城4</li>
<li>小米商城5</li>
</ul>
</li>
</ul>
...
fixed
1.导航栏
2.页面广告
锚点
实现在同一个页面不同板块间的跳转
跳转以盒子的内容区域开始显示的
<a href="#box">box</a>
<div id="box">
sfafa
</div>
BFC
BFC(Block formatting context)直译为==“块级格式化上下文”==。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC的布局规则
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
- 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算。
如何创建BFC
- 1、float的值不是none。
- 2、position的值不是static或者relative。
- 3、display的值是inline-block、table-cell(单元格)、flex(弹性盒)、table-caption或者inline-flex
- 4、overflow的值不是visible
BFC的作用
bfc主要给父元素设置
1.利用BFC避免margin重叠。
属于同一个BFC的两个相邻的Box会发生margin重叠，所以我们可以设置，两个不同的BFC，也就是我们可以让把第二个p用div包起来，然后激活它使其成为一个BFC,包裹的原理是，包裹移后margin参与计算，margin的bug
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin间的重叠</title>
<style>
.s1{
width: 300px;
height: 300px;
margin: 50px;
background: #4d8000;
}
div{
overflow: hidden;
}
</style>
</head>
<body>
<!--利用BFC避免margin重叠。-->
<div class="s1"></div>
<div><div class="s1"> </div></div>
</body>
</html>
2.自适应两栏布局
BFC的区域不会与float box重叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BFC</title>
<style>
*{
margin: 0;
padding: 0;
}
body {
width: 100%;
position: relative;
}
.left {
width: 100px;
height: 150px;
float: left;
background: rgb(139, 214, 78);
text-align: center;
line-height: 150px;
font-size: 20px;
}
.right {
/*方法一：令宽度减去前者的宽度
width: calc(100% - 100px);
float: left;*/
/*方法二 BFC的区域不会与float box重叠*/
overflow: hidden;
height: 300px;
background: rgb(170, 54, 236);
text-align: center;
line-height: 300px;
font-size: 40px;
}
</style>
<body>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
</body>
</html>
3.清楚浮动。
计算BFC的高度时，浮动元素也参与计算。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BFC</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
border: 5px solid rgb(91, 243, 30);
width: 500px;
list-style: none;
overflow: hidden;
}
li{
border: 5px solid rgb(233, 250, 84);
width:200px;
height:200px;
float: left;
}
</style>
</head>
<body>
<!--计算BFC的高度时，浮动元素也参与计算。-->
<ul>
<li>s1</li>
<li>s2</li>
</ul>
</body>
</html>
CSS3进阶
transition
所操作属性的值需要时数值
| 值 | 描述 |
|---|---|
| transition-property | 指定CSS属性的name，transition效果 |
| transition-duration | transition效果需要指定多少秒或毫秒才能完成linear ease |
| transition-timing-function | 指定transition效果的转速曲线 |
| transition-delay | 定义transition效果开始的时候 |
复合属性
transition: property duration timing-function delay;
属性是叠加
CSS渐变
/*线性*/
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
/*重复*/
/* 标准的语法 */
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
/*径向*/
background-image: radial-gradient(shape size at position,start-color, ...,last-color);
/*重复*/
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
/* 0-1px红色，1-2px是黄色，2-5px为蓝色，之后重复*/
background-image: repeating-radial-gradient(red 1px,yellow 2px ,blue 5px);
只在谷歌显示
background-image: -webkit-radial-gradient(left top, red, yellow);
角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
| 值 | 描述 |
|---|---|
| direction | 用角度值指定渐变的方向（或角度）。 |
| color-stop1, color-stop2,… | 用于指定渐变的起止颜色。 |
限定颜色的范围;直接在颜色后加上距离，例如background-image: linear-gradient(toright, red 100px , yellow 200px);，red到0-100px，yellow200px开始，100-200过度
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#grad1 {
height: 200px;
background-color: red; /* 不支持线性的时候显示 */
background-image: linear-gradient(to bottom right, red , yellow);/*到右下角方向去*/
background-image: linear-gradient(180deg, green, yellow);
}
</style>
</head>
<body>
<h3>线性渐变 - 对角</h3>
<p>从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色：</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 8 及之前的版本不支持渐变。</p>
</body>
</html>
2D转换
位移
-
作用
改变元素在x轴y轴上的位置，原位置不允许其他元素占据
transform:translateX(数值+px) 向右和向下为正数
transform:translateY(数值+px) 向右和向下为正数
-
语法
-
translate(x,y)：定义 2D 转换，沿着 X 和 Y 轴移动元素。，一个值只表示X值
-
translateX(n)：定义 2D 转换，沿着 X 轴移动元素。
-
translateY(n)：定义 2D 转换，沿着 Y 轴移动元素。
-
移动之后，原来的位置依旧存在 ,但是通过位移和定位可以令其他元素出现在他的位置
-
写一个值代表的是x轴的位移
css transform: translate(100px);
-
-
应用
-
利用位移实现水平垂直居中
优点：不论大盒子和小盒子的宽高如何变化，都能够识别到宽高的百分比
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>利用位移实现水平垂直居中</title> <style> *{ margin: 0; padding: 0; } #big{ border: 1px solid pink; width: 500px; height: 500px; position: relative; } #small{ /*width: 50px; height: 50px;*/ background: #bbbbbe; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); /*百分数参考的是当前盒子的宽高 */ } </style> </head> <body> <div id="big"> <div id="small">sffafa</div> </div> </body> </html>
-
旋转
-
语法
transform：rotate(20deg)
取值为正，顺时针旋转,取值为负，逆时针旋转
-
x轴的旋转 transform:rotateX(数值+deg)
-
y轴的旋转 transform:rotateY(数值+deg)
-
z轴的旋转 transform:rotateZ(数值+deg) 顺时针是正数，逆时针是负数
-
只写一个值：
transform: rotate(-600deg); 代表的是z轴的旋转 -
位移和旋转同时存在
表示先位移后旋转 transform: translateX(300px) rotateZ(90deg); 先旋转，坐标轴会跟着变化，位移会根据新的坐标轴去移动 transform: rotateZ(90deg) translateX(300px);
-
-
-
注意
转换原点,旋转围绕着转换原点来做的，所以原点位置不同，转换效果也不同旋转时连同坐标轴也一同跟着转
先位移后旋转和先旋转后位移，因为旋转之后轴会发生变化，所以位移会跟随新的坐标轴移动
缩放
-
语法
-
x轴的缩放 transform:scaleX(数值) 1：正常 0-1之间是缩小 >1是放大
-
y轴的缩放 transform:scaleY(数值) 1：正常 0-1之间是缩小 >1是放大
-
两个方向都有
div{ transform: scaleX(0.4) scaleY(2); transform: scale(0.4, 2); transform: scale(2); }
-
倾斜
-
语法
-
x轴的倾斜 transform:skewX(数值deg)
-
y轴的倾斜 transform:skewY(数值deg)
-
xy轴的倾斜
div{ transform: skew(40deg, 50deg); } -
一个值代表的只是x轴的倾斜
-
-
注意:变形原点：transform-origin:水平 垂直
- 水平：left/center/right 垂直：top/center/bottom
- 数值+px
- 百分比
3D转换
位移
- z轴的位移 transform:translateZ(数值+px)
- 三个轴都位移 transform:translate3d(x轴,y轴,z轴)
旋转
- x轴的旋转 transform:rotateX(数值+deg)
- y轴的旋转 transform:rotateY(数值+deg)
- 三个轴都旋转 transform:rotate3d(a,b,c,数值+deg) 0或者1 0表示不旋转 1表示旋转
缩放
- z轴缩放 transform:scaleZ(数值) 0不显示 1正常 0-1缩小 >1放大
- 三个轴都缩放 transform:scale3d(x轴,y轴,z轴缩放)
景深
persepctive:数值+px 近大远小
perspective属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定
景深就是我们的肉眼距离显示器的距离，景深越大，元素离我们越远，效果就不好，在我们CSS3中，perspective用于激活一个3D空间，属性值就是景深大小（默认none无景深）
-
应用景深的元素称为“舞台元素”，舞台元素的所有后代元素都会受影响，（如果后代元素中也添加了perspective属性，效果会叠加而不是覆盖）；
-
设置景深：
//在父元素上设置 perspective: 200px; //或者 transform:perspective(300px);1234
perspective-origin 属性
允许改变被转换元素的3D基点位置。
背部不可见
背部隐藏：backface-visibility: hidden;
形成3d空间
transform-style:flat(2d平面)/preserve-3d(3d空间)属性加在变形元素的父元素身上
转换属性—transform
1、transform：向元素应用2D或3D转换
2、transform-origin：允许改变被转换元素的位置
3、transform-style：规定被嵌套元素如何在3D空间中显示，谁旋转加给谁
4、perspective：规定3D元素的透视效果（景深，近大远小）
5、perspective-origin：规定3D元素的底部位置，/* 观看角度 */
6、backface-visibility：定义元素在不面对屏幕时是否可见
CSS动画
-
动画的定义（声明）
-
方式一
@keyframes mymove { from {background-color:red;}/*0%*/ to {background-color:blue;}/*100%*/ } -
方式二
@keyframes change{ 0%{background:#f00;border-radius:0%;} /*1s*/ 25%{background:#ff0;border-radius:50%;}/*2s*/ 50%{background:pink;border-radius:50%;}/*3s*/ 75%{background:#00f;border-radius:50%;}/*4s*/ 100%{background:orange;border-radius:0%;}/*5s*/ }
-
-
动画的调用——animation
属性 描述 备注 @keyframes 规定动画。 3 animation 所有动画属性的简写属性。 animation：动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向 animation-name 规定 @keyframes 动画的名称。 3 animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3 animation-timing-function 规定动画的速度曲线。默认是 “ease”。 ease(低速开始，然后加快，在结束前变慢)/linear(匀速)/ease-in(低速开始)/ease-out(低速结束)/ease-in-out(低速开始和结束) animation-delay 规定动画何时开始。默认是 0。 单位可以是负值，-2s表示动画立马开始，但跳过 2 秒进入动画，即前2秒的动画不执行，直接跳过前2秒进入动画。 animation-iteration-count 规定动画被播放的次数。默认是 1。 数值/infinite（无限循环） animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。 默认为normal，
reverse为反转播放，
alternate轮流播放，奇数次正向，偶数次逆向 -
复合属性
/* 声明动画 关键帧 @keyframes 动画名称{} */ @keyframes move{ from{ left: 0; background-color: pink; } to{ left: 1000px; background-color: yellow; } } -
补充属性
-
animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
值 说明 none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。 forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。 backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 “normal” 或 “alternate” 时）或 to 关键帧中的值（当 animation-direction 为 “reverse” 或 “alternate-reverse” 时）。 both 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。 initial 设置该属性为它的默认值。 inherit 从父元素继承该属性。 1 默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。
2 forwads表示让动画停留在结束状态，即停留在最后一帧。
3 backwords：
3.1 当 animation-direction 为 “normal” 或 “alternate” 时，回到第一帧。
3.2 当 animation-direction 为 “reverse” 或 “alternate-reverse” 时，停留在最后一帧。 -
animation-play-state：指定动画是否正在运行或已暂停。
值 说明 paused 指定暂停动画。 running 指定正在运行的动画。 1 在JavaScript中使用此属性在一个周期中暂停动画。
2 线条鼠标悬停开始动画demo地址：http://codepen.io/aSuncat/pen/BLLbko
-
-
动画的兼容性
/* 声明动画 关键帧 @keyframes 动画名称{} */
@keyframes move{
from{
left: 0;
background-color: pink;
}
to{
left: 1000px;
background-color: yellow;
}
}
@-webkit-keyframes move{
from{
left: 0;
background-color: yellow;
}
to{
left: 1000px;
background-color: yellow;
}
}
@-ms-keyframes move{
from{
left: 0;
background-color: pink;
}
to{
left: 1000px;
background-color: yellow;
}
}
透明度
-
使用透明度可以实现元素从无到有的过程
-
第一种 rgba()
div { width: 200px; height: 200px; background-color: rgba(165, 42, 42, 1); 透明度从1 transition: all 1s; } div:hover { background-color: rgba(165, 42, 42, 0);过渡到0 } -
第二种 opacity
div { width: 200px; height: 200px; background-color: brown; opacity: 1; 透明度从1 transition: all 1s; } div:hover { opacity: 0; 过渡到0 }
设置该属性为它的默认值。 |
| inherit | 从父元素继承该属性。 |
> 1 默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。
> 2 forwads表示让动画停留在结束状态，即停留在最后一帧。
> 3 backwords：
> 3.1 当 animation-direction 为 “normal” 或 “alternate” 时，回到第一帧。
> 3.2 当 animation-direction 为 “reverse” 或 “alternate-reverse” 时，停留在最后一帧。
2. **animation-play-state**：指定动画是否正在运行或已暂停。
| 值 | 说明 |
| ------- | -------------------- |
| paused | 指定暂停动画。 |
| running | 指定正在运行的动画。 |
> 1 在JavaScript中使用此属性在一个周期中暂停动画。
> 2 线条鼠标悬停开始动画demo地址：http://codepen.io/aSuncat/pen/BLLbko
-
动画的兼容性
/* 声明动画 关键帧 @keyframes 动画名称{} */
@keyframes move{
from{
left: 0;
background-color: pink;
}
to{
left: 1000px;
background-color: yellow;
}
}
@-webkit-keyframes move{
from{
left: 0;
background-color: yellow;
}
to{
left: 1000px;
background-color: yellow;
}
}
@-ms-keyframes move{
from{
left: 0;
background-color: pink;
}
to{
left: 1000px;
background-color: yellow;
}
}
透明度
-
使用透明度可以实现元素从无到有的过程
-
第一种 rgba()
div { width: 200px; height: 200px; background-color: rgba(165, 42, 42, 1); 透明度从1 transition: all 1s; } div:hover { background-color: rgba(165, 42, 42, 0);过渡到0 } -
第二种 opacity
div { width: 200px; height: 200px; background-color: brown; opacity: 1; 透明度从1 transition: all 1s; } div:hover { opacity: 0; 过渡到0 } -
区别：rbga不会模糊到里面的文字，opacity会影响里面的文字
340
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
