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会影响里面的文字