CSS介绍
CSS 指层叠样式表(Cascading Style Sheets), 样式定义如何显示 HTML 元素, 样式通常存储在样式表中, 解决内容与表现分离的问题, 外部样式表可以极大提高工作效率, 外部样式表通常存储在 CSS 文件中
HTML和CSS的编写准则
在编写HTML和CSS代码过程中，要遵守一个准则
- 结构、样式分离
因此，不要使用HTML元素的属性来给元素添加样式，比如body的bgcolor、img的width\height等
以下是不建议的写法
<body bgcolor="red">
<img src="图片地址" alt="" width="200px" height="200px">
</body>
建议写法:
<!--CSS样式表-->
@charset "UTF-8";
body {
background-color: red;
}
img {
width: 200px;
height: 200px;
}
<!--导入-->
<link rel="stylesheet" href="CSS/page.css">
<!--使用-->
<body>
<img src="图片地址" alt="图片说明">
</body>
CSS样式表
内联样式（inline style）
将样式直接写在元素的style属性上
<div style="color: purple; background-color: red; font-size: 30px">内容文字</div>
文档样式表（document style sheet）
将样式写在head元素的style元素中
<head>
<style type="text/css">
div {
color: red;
background-color: azure;
}
</style>
</head>
外部样式表（external style sheet）
将样式写在单独的CSS文件中，然后在当前网页的head元素中用link元素引用
<head>
<meta charset="UTF-8">
<title>04.外部样式表</title>
<link rel="stylesheet" href="CSS/div.css">
</head>
在CSS文件中使用@charset指定文件编码，一般都是UTF-8
<!--外部样式表-->
@charset "UTF-8";
div {
color: aqua;
background-color: purple;
width: 1000px;
height: 500px;
}
CSS 选择器
CSS选择器
按照一定的规则选出符合条件的元素，为之添加CSS样式
选择器的种类繁多，大概可以这么归类
- 通用选择器（universal selector）
- 元素选择器（type selectors）
- 类选择器（class selectors）
- id选择器（id selectors）
- 属性选择器（attribute selectors）
- 组合（combinators）
- 伪类（pseudo-classes）
- 伪元素（pseudo-elements）
通用选择器（universal selector）
所有的元素,一般用来给所有元素作一些通用性的设置
效率比较低，尽量不要使用
- 比如内边距、外边距
- 参考：http://www.jd.com
* {
color: cyan;
background-color: aliceblue;
text-transform: capitalize;
}
元素选择器（type selectors）
或者叫做“标签选择器”
div {
color: purple;
}
id选择器（id selectors）
一个HTML文档里面的id值是唯一的，不能重复
#span-style {
color: white;
background-color: black;
}
类选择器（class selectors）
一个元素可以有多个class值，每个class之间用空格隔开
.global_style {
color: black;
background-color: white;
font-family: "PingFang SC";
font-size: 20px;
margin: 10px;
}
属性选择器（attribute selectors） - [attr]
找到标签中对应属性,则会进行修改
[attr~=val] 属性值包含单词one的元素（单词one与其他单词之间必须用空格隔开）
[attr|=val] 属性值恰好等于one 或者 以单词one开头且后面紧跟着连字符-的元素
[attr^=val] 属性值以单词one开头的元素 [attr$=val] 属性值以单词one结尾的元素
[attr*=val] 属性值包含单词one的元素
[title] {
color: red;
}
[title = "one"] {
color: blue;
}
[title ^= "name"]{
color: yellow;
}
后代选择器（descendant combinator）
后代选择器可以选择作为某元素后代的元素, div元素里面的span元素（包括直接、间接子元素）
元素之间使用 空格 间隔
div span {
color: green;
}
div p span{
color: yellow;
}
子选择器（child combinators）
子元素选择器,只能选择作为某元素子元素的元素。
div>em{
color: red;
}
相邻兄弟选择器（adjacent sibling combinator）
div元素后面紧挨着的p元素（且div、p元素必须是兄弟关系）
div+p {
color: red;
}
全体兄弟选择器（general sibling combinator）
div元素后面的p元素（且div、p元素必须是兄弟关系）
div~p{
color: red;
}
选择器组 - 交集选择器
同时符合2个条件的元素：div元素、class值有one
div.one {
color: red;
}
选择器组 - 并集选择器
所有的div元素 + 所有class值有one的元素 + 所有title属性值等于test的元素
div, .one, [title = "test"] {
color: red;
}
伪类（pseudo-classes）
[图片上传失败...(image-c83a85-1564385964310)]
动态伪类（dynamic pseudo-classes）
使用举例
- a:link 未访问的链接
- a:visited 已访问的链接
- a:hover 鼠标挪动到链接上
- a:active 激活的链接（鼠标在链接上长按住未松开）
使用注意
- :hover必须放在:link和:visited后面才能完全生效
- :active必须放在:hover后面才能完全生效
- 所以建议的编写顺序是 :link、:visited、:hover、:active
- 记忆：女朋友看到LV包包后，ha ha大笑
除了a元素，:hover、:active也能用在其他元素上
a:link {
color: red;
}
a:visited {
color: blue;
}
a:hover {
color: green;
}
a:active {
color: yellow;
}
动态伪类 - :focus
:focus指当前拥有输入焦点的元素（能接收键盘输入）
动态伪类编写顺序建议 :link、:visited、:focus、:hover、:active
元素状态伪类（UI element states pseudo-classes）
:enabled 启用状态
:disabled 禁用状态
:checked 被选中状态
结构伪类 （structural pseudo-classes） - :nth-child( )
:nth-child(1)
是父元素中的第1个子元素
p:nth-child(1) {
color: red;
}
:nth-child(2n)
- n代表任意正整数和0
- 是父元素中的第偶数个子元素（第2、4、6、8......个）
- 跟:nth-child(even)同义
:nth-child(2n + 1)
- n代表任意正整数和0
- 是父元素中的第奇数个子元素（第1、3、5、7......个）
- 跟:nth-child(odd)同义
:nth-child()的完整使用格式是:nth-child(an + b)
- 是父元素中的第an+b个子元素
- n代表任意正整数和0
- a、b需要给出具体值，可以是正整数、负整数、0
:nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数
- :nth-last-child(1)，代表倒数第一个子元素
- :nth-last-child(-n + 2)，代表最后2个子元素
结构伪类 - :nth-of-type( )、:nth-last-of-type( )
- :nth-of-type()用法跟:nth-child()类似，不同点是:nth-of-type()计数时只计算同种类型的元素
- :nth-last-of-type()用法跟:nth-of-type()类似
- 不同点是:nth-last-of-type()从最后一个这种类型的子元素开始往前计数
结构伪类 - :empty
- :empty代表里面完全空白的元素
否定伪类（negation pseudo-class）
:not()的格式是:not(x)
- x是一个简单选择器
- 元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类）
- :not(x)表示除x以外的元素
伪元素（pseudo-elements）
常用的伪元素有
:first-line、::first-line
:first-letter、::first-letter
:before、::before
:after、::after
为了区分伪元素和伪类，建议伪元素使用2个冒号，比
如::first-line
::first-line可以针对首行文本设置属性
- 只有下列属性可以应用在::first-line伪元素
- 字体属性、颜色属性、背景属性
- word-spacing、letter-spacing、text-decoration、text-transform、line-height
伪元素 - ::first-letter
::first-letter可以针对首字母设置属性
伪元素 - ::before和::after
::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片）
attr()
在content中，还可以使用attr(属性名)来获得元素的属性值
CSS属性
常用CSS属性
按照CSS属性的具体用途，大致可以分类为
- 文本：color、direction、letter-spacing、word-spacing、line-height、text-align、text-indent、text-transform、text-decoration、white-space
- 字体：font、font-family、font-style、font-size、font-variant、font-weight
- 背景：background、background-color、background-image、background-repeat、background-attachment、background-position
- 盒子模型：width、height、border、margin、padding
- 列表：list-style
- 表格：border-collapse
- 显示：display、visibility、overflow、opacity、filter
- 定位： vertical-align、position、left、top、right、bottom、float、clear
文本
color
color属性用来设置文本内容的前景色
包括文字、装饰线、边框、外轮廓等的颜色
color: blue;
text-decoration
text-decoration用于设置文字的装饰线
- none：无任何装饰线
- underline：下划线
- overline：上划线
- line-through：中划线（删除线）
/*无下划线*/
text-decoration: none;
/*下划线*/
text-decoration: underline;
/*上划线*/
text-decoration: overline;
/*中间线条*/
text-decoration: line-through;
letter-spacing
分别用于设置字母间距
letter-spacing: 5px;
word-spacing
单词之间的间距
word-spacing: 30px;
text-transform
ext-transform用于设置文字的大小写转换
- capitalize：将每个单词的首字符变为大写
- uppercase：将每个单词的所有字符变为大写
- lowercase：将每个单词的所有字符变为小写
- none：没有任何影响
text-transform: uppercase;
text-indent
text-indent用于设置第一行内容的缩进
/*缩进2个文字*/
text-indent: 2em;
text-align
text-align可用于设置元素内容在元素中的水平对齐方式
- left：左对齐
- right：右对齐
- center：正中间显示
- justify：两端对齐
text-align: center;
字体
font-size
font-size决定文字的大小
常用的设置
-
具体数值+单位
- 比如100px
- 也可以使用em单位：1em代表100%，2em代表200%，0.5em代表50%
-
百分比
- 基于父元素的font-size计算，比如50%表示等于父元素font-size的一半
-
一般给body设置font-size就代表设置网页的默认字体大小
- 其他元素可以基于父元素设置字体大小
- 到时候只需要改变body的字体大小，其他元素都会按照比例改变
font-size: 10px;
font-family
ont-family用于设置文字的字体名称
- 可以设置1个或者多个字体名称（从左到右按顺序选择字体，直到找到可用的字体为止）
- 一般情况下，英文字体只适用于英文，中文字体同时适用于英文和中文
- 所以，如果希望中英文分别使用不同的字体，应该先将英文字体写在前面，中文字体写在后面
font-family: "Apple Braille", "DIN Condensed", "微软雅黑", "苹方";
@font-face
@font-face可以让网页支持网络字体(Web Font)，不再局限于系统自带的字体; 字体下载：http://font.chinaz.com/
body {
font-family: "Apple Braille";
}
@font-face {
font-family: "Apple Braille";
src: url("CSS/mini_cut.TTF");
}
font-weight
font-weight用于设置文字的粗细（重量）
- 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900：每一个数字表示一个重量
- normal：等于400
- bold：等于700
font-weight: 100;
font-stlye
font-style用于设置文字的常规、斜体显示
- normal：常规显示
- italic：用字体的斜体显示
- oblique：文本倾斜显示
em、i、cite、address、var、dfn等元素的font-style默认就是italic
font-style: oblique;
font-variant
font-variant可以影响小写字母的显示形式
- normal：常规显示
- small-caps：将小写字母替换为缩小过的大写字母
font-variant: small-caps;
line-height
line-height用于设置文本的最小行高
line-height: 40px;
注意区分height和line-height的区别
height：元素的整体高度
line-height：元素中每一行文字所占据的高度
应用实例：假设div中只有一行文字，如何让这行文字在div内部垂直居中
让line-height等同于height
font
font是一个缩写属性
font-style font-variant font-weight font-size/line-height font-family
- font-style、font-variant、font-weight可以随意调换顺序，也可以省略
- /line-height可以省略，如果不省略，必须跟在font-size后面
- font-size、font-family不可以调换顺序，不可以省略
font: italic small-caps 700 20px/40px "微软雅黑";
背景
background-image 背景图片
background-image用于设置元素的背景图片
- 会盖在background-color的上面
- 在图片的透明区域，可以看到背景色
background-repeat
background-repeat用于设置背景图片是否要平铺
常见的设值有
- repeat：平铺
- no-repeat：不平铺
- repeat-x：只在水平方向平铺
- repeat-y：只在垂直平方向平铺
background-size
background-size用于设置背景图片的大小
- length 设置背景图像的高度和宽度。
- percentage 以父元素的百分比来设置背景图像的宽度和高度。
- cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
- contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
/*设置宽,高*/
background-size: 50px 100px;
/* 设置高度,宽度自动*/
background-size: auto 100px;
/* 设置宽度,高度自动*/
background-size: 100px auto;
background-position
background-position用于设置背景图片在水平、垂直方向上的具体位置
- 水平方向还可以设值：left、center、right
- 垂直方向还可以设值：top、center、bottom
如果只设置了1个方向，另一个方向默认是center
- 比如background-position: 80px; 等价于 background-position: 80px center;
background-position: 10px 10px;
background-origin
背景图片定位位置属性,专门用于指定从哪个区域开始显示背景图片默认从padding开始显示背景图片
位置属性
- padding-box 默认,显示在padding内
- content-box 显示在content内
- border-box 从 border 开始展示
background-clip
背景绘制属性是专门用来设置背景绘制区域的 在区域之外的东西背景都不显示是
绘制属性
- padding-box 规定背景从padding开始绘制
- border-box(默认) 背景从border开始绘制
- content-box 背景从content开始绘制
Sprite
什么是CSS Sprite
是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分;有人翻译为：CSS雪碧、CSS精灵
使用CSS Sprite的好处
- 减少网页的http请求数量，加快网页响应速度，减轻服务器压力
- 减小图片总大小
- 解决了图片命名的困扰，只需要针对一张集合的图片命名
- 更换风格方便，只需要在少数张图片上修改图片的颜色或样式，整个网页的风格就可以改变
background-attachment
background-attachment可以设置以下3个值
- scroll：背景图片跟随元素一起滚动（默认值）
- local：背景图片跟随元素以及元素内容一起滚动
- fixed：背景图片相对于浏览器窗口固定
background-color
背景颜色
background-color: #223355
background
background是一系列背景相关属性的简写属性，常用格式是
image position/size repeat attachment color
background-size可以省略，如果不省略，/background-size必须紧跟在background-position的后面,其他属性也都可以省略，而且顺序任意
cursor
cursor可以设置鼠标指针（光标）在元素上面时的显示样式
cursor常见的设值有
- auto：浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式
- default：由操作系统决定，一般就是一个小箭头
- pointer：一只小手，鼠标指针挪动到链接上面默认就是这个样式
- text：一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式
- none：没有任何指针显示在元素上面
cursor除了可以设置系统自带的一些值以外，还可以设置图片
image.png
url( )后面的2个数字
- 分别代表图片在水平、垂直方向上的偏移，不能设置负数
- 0和0代表图片左上角和指针是重叠的，数值变大，图片左上角会朝着指针左上角方向偏移
- 如果水平、垂直分别设置为图片宽高的一半，图片的中心点将和指针重叠
如果图片找不到，就会使用pointer作为cursor的值
div:hover {
/*cursor: pointer;*/
cursor: url("images/heart.gif") 10 10, pointer;
}
盒子模型
盒子模型介绍
HTML中的每一个元素都可以看做是一个盒子，如右下图所示，可以具备这4个属性
内容（content）
盒子里面装的东西内边距（padding）
怕盒子里装的东西损坏而添加的泡沫或者其它抗震的辅料边框（border）
就是盒子的边框，比如木盒子四周的木板外边距（margin）
为了方便取出，盒子之间保留一定的空隙
上下margin传递
margin-top传递
如果块级元素的顶部线和块级父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
margin-bottom传递
如果块级元素的底部线和块级父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素
如何防止出现传递问题？
- 给父元素设置padding-top\padding-bottom
- 给父元素设置border
- 给父元素或者子元素设置display: inline-block
- 以后理解得更深入，还会学到其他解决方法
建议
- margin一般是用来设置兄弟元素之间的间距
- padding一般是用来设置父子元素之间的间距
上下margin折叠
垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）
水平方向上的margin（margin-left、margin-right）永远不会collapse
如何防止margin collapse？
- 只设置其中一个元素的margin
- 条件允许的话，使用padding取代margin
border（边框）
边框宽度
- border-top-width、border-right-width、border-bottom-width、border-left-width
border-width是上面4个属性的简写属性
边框颜色
- border-top-color、border-right-color、border-bottom-color、border-left-color
border-color是上面4个属性的简写属性
边框样式
- border-top-style、border-right-style、border-bottom-style、border-left-style
border-style是上面4个属性的简写属性
box-shadow 阴影
box-shadow属性可以设置一个或者多个阴影
text-shadow 文字阴影
text-shadow用法类似于box-shadow，用于给文字添加阴影效果
text-shadow同样适用于::first-line、::first-letter
box-sizing
box-sizing用来设置盒子模型中宽高的行为
content-box
- padding、border都布置在width、height外边
border-box
- padding、border都布置在width、height里边
列表
列表相关的CSS属性
列表相关的常见CSS属性有4个：
- list-style-type、
- list-style-image、
- list-style-position、
- list-style
- list-style-type：设置li元素前面标记的样式
- disc（实心圆）、circle（空心圆）、square（实心方块）
- decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）
- lower-alpha（小写英文字母）、upper-alpha（大写英文字母）
- none（什么也没有）
list-style-image：设置某张图片为li元素前面的标记，会覆盖list-style-type的设置
list-style-position：设置li元素前面标记的位置，可以取outside、inside2个值
list-style：是list-style-type、list-style-image、list-style-position的缩写属性
list-style: outside url("images/dot.png");
一般最常用的还是设置为none，去掉li元素前面的默认标记 list-style: none;
表格
显示
块级、行内级元素
根据元素的显示类型，HTML元素可以主要分为2大类
块级元素（block-level elements）
独占父元素一行
比如div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr等行内级元素（inline-level elements）
多个行内级元素可以在父元素的同一行中显示
比如a、img、span、strong、code、iframe、label、input、button、canvas、embed、object、 video、audio等
替换、非替换元素
根据元素的内容类型，HTML元素可以主要分为2大类
替换元素（replaced elements）
元素本身没有实际内容，浏览器根据元素的类型和属性，来决定元素的具体显示内容
比如img、input、iframe、video、embed、canvas、audio、object等非替换元素（non-replaced elements）
和替换元素相反，元素本身是有实际内容的，浏览器会直接将其内容显示出来，而不需要根据元素类型和属性来判断到底显示什么内容
比如div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr、a、strong、span、code、label等
元素的分类总结
CSS属性 - display
CSS中有个display属性，能修改元素的显示类型，有4个常用值
- block：让元素显示为块级元素
- inline：让元素显示为行内级元素
- none：隐藏元素
- inline-block：让元素同时具备行内级、块级元素的特征
inline-block
- 可以让元素同时具备块级、行内级元素的特征
- 跟其他行内级元素在同一行显示
- 可以随意设置宽高
- 宽高默认由内容决定
CSS属性 - visibility
visibility，能控制元素的可见性，有2个常用值
- visible：显示元素
- hidden：隐藏元素
CSS属性 - overflow
overflow用于控制内容溢出时的行为
- visible：溢出的内容照样可见
- hidden：溢出的内容直接裁剪
- scroll：溢出的内容被裁剪，但可以通过滚动机制查看
会一直显示滚动条区域，滚动条区域占用的空间属于width、height - auto：自动根据内容是否溢出来决定是否提供滚动机制
- 还有overflow-x、overflow-y两个属性，可以分别设置水平垂直方向
（建议还是直接使用overflow，因为目前overflow-x、overflow-y还没有成为标准，浏览器可能不支持）
定位
在CSS中，有3种常用的方法对元素进行定位、布局
- normal flow：标准流、常规流、文档流
- absolute positioning：绝对定位
- float：浮动
position
利用position可以对元素进行定位，常用取值有4个
- static：静态定位
- relative：相对定位
- absolute：绝对定位
- fixed：固定定位
static
默认定位,不写默认
relative
相对定位,元素按照normal flow布局
可以通过left、right、top、bottom进行定位
- 定位参照对象是元素自己原来的位置
left、right、top、bottom用来设置元素的具体位置，对元素的作用如下图所示
相对定位的应用场景
- 在不影响其他元素位置的前提下，对当前元素位置进行微调
absolute
绝对定位, 元素脱离normal flow（脱离标准流、脱标）
可以通过left、right、top、bottom进行定位
- 定位参照对象是最邻近的定位祖先元素
- 如果找不到这样的祖先元素，参照对象是视口
定位元素（positioned element）
- position值不为static的元素
- 也就是position值为relative、absolute、fixed的元素
fixed
固定定位,元素脱离normal flow（脱离标准流、脱标）
- 可以通过left、right、top、bottom进行定位
- 定位参照对象是视口（viewport）
- 当画布滚动时，固定不动
z-index
z-index属性用来设置定位元素的层叠顺序（仅对定位元素有效）
取值可以是正整数、负整数、0
float：浮动
绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果
可以通过float属性让元素产生浮动效果，float的常用取值
- none：不浮动，默认值
- left：向左浮动
- right：向右浮动
clear
clear的常用取值
- left：要求元素的顶部低于之前生成的所有左浮动元素的底部
- right：要求元素的顶部低于之前生成的所有右浮动元素的底部
- both：要求元素的顶部低于之前生成的所有浮动元素的底部
- none：默认值，无特殊要求
- 一般就只用在非浮动元素上，可以让非浮动元素与浮动元素不层叠
解决坍塌问题
.container::after {
content: "";
clear: both;
display: block;
}
定位方案对比
过渡(transition)
过渡可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡三要素
- 必须有属性发生改变
- 必须告诉系统哪个属性需要执行过渡效果
- 必须告诉系统过渡持续时长
transition属性
transition-property 设置要过渡的属性
transition-duration 过渡时间
transition-delay 延迟时间
-
transition-timing-function 规定动画的速度
- linear 规定以相同速度开始至结束的过渡效果
- ease 规定慢速开始，然后变快，然后慢速结束的过渡效果
- ease-in 规定以慢速开始的过渡效果
- ease-out 规定以慢速结束的过渡效果
- ease-in-out 规定以慢速开始和结束的过渡效果
-
transition 简写
- transition: property duration timing-function delay;
// 一个简单的过渡效果
.contrainer {
width: 600px;
height: 300px;
border: 1px solid black;
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
transition: all 1s ease-in-out 1s;
}
.contrainer:hover .box{
margin-left: 200px;
}
2D 转换
通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
常用属性
-
平移
- transform: translate(水平方向,垂直方向);
- 具体的像素
-
缩放
- transform: scale(水平方向,垂直方向);
- 默认比例 1.0 如果比1.0大代表放大 如果比1.0 小 代表缩小
-
旋转
- transform: rotate(45deg);
- 单位 角度deg ; 默认是顺时针 ; 如果想逆时针旋转直接传入负值
旋转轴向
- transform: rotateZ(10deg) Z轴旋转
- transform: rotateY(10deg) Y轴旋转
- transform: rotateX(10deg) X轴旋转
- perspective 透视效果 ,近大远小, 要想让子元素有透视效果必须把perspective添加到父元素身上,值越大 透视效果越明显
形变中心点
- 用于设置旋转中心点
- transform-origin: 水平方向 垂直方向;
- transform-origin: 0px 0px;
- transform-origin: 200px 0px;
- transform-origin: 50% 50%;
- transform-origin: left top;
-
综合
- transform: translate(100px,0) scale(1.5) rotate(45deg);
skew 倾斜转换
matrix
.box li:nth-child(1) {
// 平移
transform: translate(100px, 0);
}
.box li:nth-child(2) {
// 缩放
transform: scale(1.5, 1.5);
}
.box li:nth-child(3) {
// 旋转
transform: rotate(45deg);
}
.box li:nth-child(4) {
// 综合
transform: translate(-100px, 0) scale(1.2) rotate(-45deg);
}
3D 转换
3D 通过 rotateX(),rotateY(),rotateZ()等属性实现3D效果,默认情况系统都是2D的,想看到某个元素的3d效果,只需要给他的父元素添加一个
transform-style属性,然后设置为preserve-3d属性即可
3D 常用属性
- transform-style: preserve-3d; 需要设置在父元素中,保证其子元素3D 展示
.box {
transform-style: preserve-3d;
animation: y_3d 5s linear infinite;
}
.sub {
transform: rotateY(90deg);
}
@keyframes y_3d {
from{
transform: rotateX(0) rotateY(0) rotateZ(0);
}
to{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
动画
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
动画三要素
- 告诉系统要执行那个动画
- 实现这个动画
- 告诉系统动画执行时长
动画常用属性
animation-name 动画名字
animation-duration 动画执行时长
animation-delay 动画延迟
animation-timing-function 动画效果
animation-direction 动画是否往返
animation-iteration-count 动画执行次数
animation-play-state 动画状态,暂停或者执行
-
animation-fill-mode
- forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
- backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
- both 向前和向后填充模式都被应用。
-
动画属性连写
- animation: name duration timing-function delay iteration-count direction;
- animation: 动画的名称 动画执行时长 动画运动曲线 动画延迟 动画执行次数 动画是否往返播放
@keyframes 动画实现
- 方式一,一个点到另外一个点
@keyframes move {
from {
left: 0;
}
to{
left: 300px;
}
}
- 方式二,多点动画,可以设置多个路径
@keyframes move {
0%{
top: 0;
left: 0;
}
25%{
top: 0;
left: 300px;
}
50%{
top: 300px;
left: 300px;
}
75%{
top: 300px;
left: 0;
}
100%{
top: 0;
left: 0;
}
}
CSS继承
什么是继承?
CSS中有些属性是可继承的，何为属性的继承？
- 一个元素如果没有设置某属性的值，就会跟随父元素的值
- 当然，一个元素如果有设置某属性的值，就使用自己设置的值
比如color、font-size等属性都是可以继承的
不能继承的属性，一般可以使用inherit值强制继承
CSS属性的优先级
按照经验，为了方便比较CSS属性的优先级，可以给CSS属性所处的环境定义一个权值（权重）
- !important：10000
- 内联样式：1000
- id选择器：100
- 类选择器、属性选择器、伪类：10
- 元素选择器、伪元素：1
- 通配符：0
选择器的针对性越强，优先级越高
Flex布局
介绍:
弹性布局（flexible box）模块（目前是w3c候选的推荐）旨在提供一个更加有效的方式来布置，对齐和分布在容器之间的各项内容，即使它们的大小是未知或者动态变化的。
弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间（主要是为了容纳所有类型的显示设备和屏幕尺寸）的能力。
- 轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
- 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
- 方向：默认主轴从左向右，侧轴默认从上到下
- 主轴和侧轴并不是固定不变的，通过flex-direction可以互换。
属性介绍
1.display: flex | inline-flex;
- display: flex | inline-flex; (适用于父类容器元素上)
- flex：将对象作为弹性伸缩盒显示。
- inline-flex：将对象作为内联块级弹性伸缩盒显示
2.flex
- flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
- min-width 最小值 min-width: 280px 最小宽度 不能小于 280
- max-width: 1280px 最大宽度 不能大于 1280
3.flex-direction
- flex-direction调整主轴方向（默认为水平方向）
- flex-direction: column 垂直排列
- flex-direction: row 水平排列
4.justify-content
- justify-content调整主轴对齐（水平对齐）
- 子盒子如何在父盒子里面水平对齐
| 值 | 描述 | 白话文 |
|---|---|---|
| flex-start | 默认值。项目位于容器的开头。 | 让子元素从父容器的开头开始排序但是盒子顺序不变 |
| flex-end | 项目位于容器的结尾。 | 让子元素从父容器的后面开始排序但是盒子顺序不变 |
| center | 项目位于容器的中心。 | 让子元素在父容器中间显示 |
| space-between | 项目位于各行之间留有空白的容器内。 | 左右的盒子贴近父盒子，中间的平均分布空白间距 |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 | 相当于给每个盒子添加了左右margin外边距 |
5.align-items调整侧轴对齐（垂直对齐）
- 子盒子如何在父盒子里面垂直对齐（单行）
| 值 | 描述 | 白话文 |
|---|---|---|
| stretch | 默认值。项目被拉伸以适应容器。 | 让子元素的高度拉伸适用父容器（子元素不给高度的前提下) |
| center | 项目位于容器的中心。 | 垂直居中 |
| flex-start | 项目位于容器的开头。 | 垂直对齐开始位置 上对齐 |
| flex-end | 项目位于容器的结尾。 | 垂直对齐结束位置 底对齐 |
6.flex-wrap控制是否换行
- 当我们子盒子内容宽度多于父盒子的时候如何处理
| 值 | 描述 |
|---|---|
| nowrap | 默认值。规定灵活的项目不拆行或不拆列。 不换行，则 收缩（压缩） 显示 强制一行内显示 |
| wrap | 规定灵活的项目在必要的时候拆行或拆列。 |
| wrap-reverse | 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。 |
7.flex-flow是flex-direction、flex-wrap的简写形式
flex-flow: flex-direction flex-wrap;
例如：
display: flex;
/* flex-direction: row;
flex-wrap: wrap; 这两句话等价于下面的这句话*/
flex-flow: column wrap; /* 两者的综合 */
8.align-content堆栈（由flex-wrap产生的独立行）多行垂直对齐方式齐
align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。
必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。
| 值 | 描述 | 测试 |
|---|---|---|
| stretch | 默认值。项目被拉伸以适应容器。 | |
| center | 项目位于容器的中心。 | |
| flex-start | 项目位于容器的开头。 | |
| flex-end | 项目位于容器的结尾。 | |
| space-between | 项目位于各行之间留有空白的容器内。 | |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 |
9.order控制子项目的排列顺序，正序方式排序，从小到大
- 用css 来控制盒子的前后顺序。 用order 就可以
- 用整数值来定义排列顺序，数值小的排在前面。可以为负值。 默认值是 0
