CSS3样式详解-优快云博客

本文链接：https://blog.youkuaiyun.com/UserPython/article/details/104362671

CSS3 基础知识

引入外部样式表方法
语法
选择器
- 描述
- 常用选择器
- 属性选择器
- 关系选择器
- 伪标签选择器
- 伪类选择器
- - 结构伪类选择器
  - UI伪类及其他选择器
颜色表示方式
字体和文本
- 字体属性设置
- 文本属性设置
盒模型
- 描述
- 元素的尺寸
- padding 内边距属性
- border 边框属性
- margin 外边距属性
- 外边距的合并
- 溢出处理
定位
- 描述
- 属性
列表与表格
- 表格的属性
- 列表的属性
边框
- 属性
- 圆角
背景
- 属性
渐变效果
- 线性渐变
- 径向渐变（放射渐变）
动画效果
- 变形
- - transform：2D变形
  - transform：3D变形
- 过渡
- - 属性
- 关键帧
- - 属性
其他常用属性
- opacity 透明度设定
- cursor 鼠标样式
- rem 根元素字体大小
- outline 轮廓
- display 显示
布局
- 固定布局
- 流体布局
- 浮动布局
- 弹性布局
- - 属性

引入外部样式表方法

内联样式表（行内）
内部样式表（style标签中）
外部样式表
1、创建一个外部样式表
2、在head中使用link标签插入样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入外部样式表</title>
    <link rel="stylesheet" type="text/css" href="CSS/style01.css">
</head>
<body>
    <p>引入外部样式表</p>
</body>
</html>

语法

但一个标签的多个属性之间用分号隔开；若只有一个属性可以省略
如果值为若干个单词，则要给值添加引号；除了这种情况以外，其他时候不可以添加引号
多个标签公用一个属性时，用逗号隔开
CSS注释：/* 注释内容 */
样式的优先顺序（最接近内容的优先）：
1、内联（行内）样式
2、内部样式：style中的样式
3、外部样式
4、强制优先级：！important

@charset "utf-8";
/* 注释方法 */
h1{color:red;}
p{color: #00f0f0;}
div{background: #a9a9a9; color: blue;}

层叠、继承、冲突
1、样式可以有个样式层层叠加：比如设计字体颜色、大小等
2、外观样式：比如字体、颜色可以继承；而布局有关的样式不可以继承，比如边框等
可以在同一HTML文档内部引用多个外部样式表

选择器

描述

当我们定义一条样式的时候，这条样式会作用域网页当中的某些标签，所以选择器就是选择你要作用的标签对象

常用选择器

通用选择器：*
标签选择器
id选择器：前面加 # 号
类选择器：前面加 . 号
1、可以给一个标签加上多个类名
2、指定某一个特定的标签

@charset "utf-8";
*{color: red;}
p{color: green;}
#div1{padding: 15px; background: hotpink;}
.class1{color: red;}
.class2{background: blueviolet; padding: 15px;}

h1.class1{background: cornsilk;}

属性选择器

E[att]：选择具有att属性的E标签。需要选择有某个属性的标签，而不论属性值是什么，可以使用简单属性选择器。可以根据多个属性进行选择，只需将属性选择器链接再一起即可。其中E标签可省略

input[value][style]{background: green;}

E[att = “val”]：选择具有att属性且属性值等于val的标签。进一步缩小选择范围，（只选择特定属性值的标签）

input[value="vip4"]{background: greenyellow;}

E[att ~=“val”]：选择具有att属性且属性值有多个，其中一个的值等于val的E标签

input[style ~="25px"]{background: lemonchiffon;}

E[att ^= “val”]：选择具有att属性且属性值以val开头的字符串的E标签
E[att $= “val”]：选择具有att属性且属性值为val结尾的字符串的E标签
E[att *= “val”]：选择具有att 属性且属性值为包含val的字符串的E标签

关系选择器

ul li{}：后代选择器又称包含选择器。后代选择器可以选择作为某标签所有后代的标签
ul > li{}：子标签选择器，与后代选择器相比，子标签选择器只能选择作为某标签子标签的标签，缩小了选择范围
E+F{}：相邻选择器，选择紧贴在E标签之后的F标签
E~F{}：兄弟选择器，选择E标签后面所有兄弟F标签

伪标签选择器

E：：first-letter：设置标签内的第一个字符的样式
E：：first-line：设置标签内的第一行的样式
E：：before：在每个E标签的内容之前插入内容。用来和content属性一起使用
E：：after：在每个E标签的内容之后插入内容。用来和content属性一起使用

伪类选择器

结构伪类选择器

E：first-child：只要是E标签，且是父标签的第一个子标签，则被选中
E：last-child：只要是E标签，且是父标签的最后一个子标签，则被选中
E：only-child：只要是E标签，且是父标签唯一的一个子标签，则被选中
E：only-of-type：只要是E标签，且是父标签中仅有的一个E标签，则被选中（父标签可以有多个其他标签，但是只能有一个E标签）
E：nth-child(n)：选择标签的第n个子标签E
1、可以直接用数值：比如：2
2、可以用奇数（odd）偶数（even）
3、可以用公式：3n
E：nth-last-child(n)：匹配父标签的倒数第n个子标签E
E：first-of-type：匹配同类型中的第一个同级标签E
E：last-of-type：匹配同类型中的最后一个同级标签E
E：nth-of-type(n)：匹配同类型中的第n个同级兄弟标签E
E：nth-last-of-type(n)：匹配同类型中的倒数第n个同级兄弟标签E
E：empty：匹配没有任何子标签（包含空格）的标签E
：root：选择文档的根标签，即整个文档

UI伪类及其他选择器

E：active：向被激活的标签添加样式
E：hover：当鼠标悬浮在标签上方时，向标签添加样式
E：link：向未被访问的链接添加样式
E：visited：向已被访问的链接添加样式
E：focus：向拥有键盘输入焦点的标签添加样式
E：lang：向带有指定lang标签添加样式
input：checked：选择每个被选中的input标签
input：disabled：选择每个禁用的input标签
input：enabled：选择每个启用的input标签
#E：target：选择当前活动的标签（某个被链接的标签）
：not(E)：选择E标签之外的每个标签

颜色表示方式

颜色名称
1、优点：方便快捷而且特定颜色比较准确
2、缺点：表示颜色有限，英文不容易记，不支持透明度的表示
十六进制方式
1、优点：表示颜色种类多，使用较方便
2、不支持透明颜色
RGB方式（三原色配色方式）
1、优点：表示颜色种类多，使用较方便
2、缺点：不支持透明颜色
3、每个参数（red/green/blue）定义颜色的强度，可以是介于0至255之间的整数，或者是百分比值（0%至100%）
RGBA方式（三原色配色方式）
1、在RGB模式上新增了alpha透明度
2、alpha参数是介于0.0（完全透明）至1.0（完全不透明）的数字
HSL模式
1、语法：HSL（H，S，L），HSL分别表示色调，饱和度，亮度
2、H：0（或360）表示红色，120表示绿色，240表示蓝色
，也可取其他数值来指定颜色。取值为：0-360
3、S：（饱和度）。取值为0.0%-100.0%
4、L：（亮度）。取值为0.0%-100.0%
HSLA模式
1、HSL模式上新增了alpha透明度

字体和文本

字体属性设置

font-size：规定文本的字体尺寸
1、通常使用px，百分比，em来设置字体的大小
2、em是css中相对单位，是相对于当前对象内的字体尺寸，若没有制定文字大小尺寸，则为浏览器默认字体大小
font-variant：规定是否以小型大写字母的字体显示文本
1、normal：默认值。浏览器会显示一个标准的字体
2、small-caps：浏览器会显示小型大写字母的字体
font-style：规定文本的字体样式
1、normal：默认值。浏览器会显示一个标准的字体
2、italic：浏览器会显示一个倾斜的字体样式
font-weight：规定字体的粗细
1、normal：默认值。浏览器会显示一个标准的字体
2、bold：定义粗体字符
3、bolder：定义更粗的字符。lighter：定义更细的字符
4、100-900：定义由粗到细的字符。400等同于normal，而700等同于bold
font-family：规定文本的字体系列
font：在一个声明设置所有字体属性
1、这个简写属性用于一次设置字体的两个或更多方面
2、至少要指定字体大小和字体系列
3、可以按顺序设置如下属性：font-style、font-variant、font-weight、font-size、font-family
@font-face：嵌入字体

@font-face{
    font-family: "abc";
    src: url("../Snow-Kei-2.ttf");
}

p{font-family: abc; font-size: 50px;}

文本属性设置

color：设置文本颜色
text-align：规定标签中的文本的水平对齐方式
1、属性：left：左对齐（默认方式）、right：右对齐、center：中间、justify：两端对齐
2、CSS3中新增了start和end属性值，在通常情况下，start相当于left，end相当于right
line-height：设置行高
1、属性：normal、数字、百分比、px、em
text-indent：设置文本的首行缩进
1、常用单位px、百分比、em
text-decoration：向文本添加修饰
1、none：默认值。显示标准的文本
2、underline：定义文本下划线
3、overline：定义文本上划线
4、line-through：定义穿过文本的一条线
5、blink：定义闪烁的文本
letter-spacing：设置字符间距
1、定义字符间的固定空间
2、normal：默认。px：像素。（允许使用负值）
word-spacing：设置字、单词间距
1、增加或减少单词间的空白
2、normal就等同于设置为0。如果指定为长度值，会调整单词的间隔。（通常用在英文单词）
text-transform：设置对象中的文本的大小写
1、none默认。标准的文本。
2、capitalize：每个单词以大写字母开头
3、uppercase：转换为大写字母
4、lowercase：转换为小写字母
text-shadow：向文本添加阴影
white-space：设置标签中空白的处理方式
1、normal：默认。空白会被浏览器忽略
2、pre：空白会被浏览器保留。其行为方式类似HTML中的pre标签
3、nowrap：文本不会换行，文本会在同一行上继续，直到遇到br标签为止
4、pre-wrap：保留空白符，但是正常地进行换行
5、pre-line：合并空白符，但是正常地进行换行
direction：设置文本方向
1、ltr：默认。文本方向从左到右
2、rtl：文本方向从右到左
word-wrap：允许对长的不可分割的单词进行分割并换行到下一行
1、normal：默认值
2、break-word：在长单词或URL地址进行换行
word-break：规定非中日韩文本的换行规则
1、normal：默认值
2、break-all：允许在单词内换行
3、keep-all：只能在半角空格或连字符处换行
text-fill-color：文本填充颜色，指定文字填充部分的颜色
text-stroke：文本边框颜色，指定文字描边部分的颜色

盒模型

描述

CSS盒模型规定了处理元素（标签）内容、内边距、边框和外边框的方式。最内部分是元素（标签）内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距。

元素的尺寸

height：设置元素的高度。属性值：auto（默认，自动识别高度）、px (像素)、cm、百分比等单位定义高度
width：设置元素的宽度。属性值：auto、px、cm、百分比
max-height：设置元素的最大高度。属性值：auto、px、cm、百分比
max-width：设置元素的最大宽度。属性值：auto、px、cm、百分比
min-height：设置元素的最小高度。属性值：auto、px、cm、百分比
min-width：设置元素的最小宽度。属性值：auto、px、cm、百分比
当属性值用百分比时，是相对与父元素的尺寸来说的
最大最小宽高主要用于动态控制缩放等情况下

padding 内边距属性

padding-top：设置元素的上内边距（空白）
padding-right：设置元素右边距（空白）
padding-bottom：设置元素的下内边距（底部空白）
padding-left：设置元素左内边距（空白）
padding：接受长度值或百分比值，但不允许使用负值
1、padding * ：同时设置四个边距
2、padding ** ：分别设置上下、左右边距
3、padding ***：分别设置上、左右、下边距
4、padding ****：分别设置上、右、下、左边距

border 边框属性

元素的边框，是围绕元素内容和内间距的一条或多条线

可以按顺序设置如下属性：
border-width：线宽
border-style：线的样式（solid：实线。dotted：虚线。double：双线）
border-color：线色

margin 外边距属性

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”

margin-top：设置元素的上外边距（空白）
margin-right：设置元素右外边距（空白）
margin-bottom：设置元素的下外边距（底部空白）
margin-left：设置元素左外边距（空白）
margin：接受长度值或百分比值，但不允许使用负值
1、margin* ：同时设置四个外边距
2、margin** ：分别设置上下、左右外边距
3、margin***：分别设置上、左右、下外边距
4、margin****：分别设置上、右、下、左外边距

外边距的合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

溢出处理

overflow：如果内容溢出了元素内容区域，是否对内容的边缘进行裁剪
overflow-x：如果内容溢出了元素内容区域，是否对内容的左、右边缘进行裁剪
overflow-y：如归内容溢出了元素内容区域，是否对内容的上、下边缘进行裁剪
1、visible：不裁剪内容，可能会显示在内容框之外
2、hidden：裁剪内容，不提供滚动机制
3、scroll：裁剪内容，提供滚动机制
4、auto：如果溢出框，则应该提供滚动机制

定位

描述

定位属性允许对元素进行定位改变其在页面的位置
有三种基本的定位机制：普通流、浮动流和绝对定位
普通流中的元素位置由元素在HTML中的位置决定

属性

position：把元素放置到一个静态的、相对的、绝对的、或固定的位置中
1、static：默认值。没有定位
2、absolute：绝对定位，相对于（static定位以外的第一个）父元素（父标签）进行定位。通过绝对定位，元素可以放置到页面上的任何位置。元素的位置通过“left”、“top”、“right”、“bottom”属性进行设定（注：static定位以外的第一个父元素：相对与最接近的一个最近定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，则依据body对象左上角作为参考进行定位）
3、relative：相对定位，相对于原来位置的偏移定位。元素的位置通过“left”、“right”、“top”、“bottom”属性进行规定
4、fixed：绝对定位，相对于浏览器窗口进行定位。元素的位置通过“left”、“top”、“right”、“bottom”属性进行规定
5、绝对定位与相对定位的区别：
5.1、绝对定位对象可以层叠，相对定位的对象不可以
5.2、相对定位对象会占据它原来位置，绝对定位不会
top：定义了一个定位元素的上外边距边界与包含块上边界之间的偏移。注：如果“position”属性的值为“static”，那么设置“top”属性不会产生任何效果
right：定义了一个定位元素的右外边距边界与包含块右边界之间的偏移。注：如果“position”属性的值为“static”，那么设置“right”属性不会产生任何效果
left：定义了一个定位元素的左外边距边界与包含块左边界之间的偏移。注：如果“position”属性的值为“static”，那么设置“left”属性不会产生任何效果
bottom：定义了一个定位元素的下外边距边界与包含块下边界之间的偏移。注：如果“position”属性的值为“static”，那么设置“bottom”属性不会产生任何效果
clip：设置元素的形状。元素被剪入这个形状之中，然后显示出来
1、语法clip：rect（top、right、bottom、left）；目前裁切形状只有矩形可以使用
2、rect () 需要设置四个值：top、right、bottom、left。它们之间需要逗号隔开，而且rect（）属性值和margin、padding一样的标准，遵循顺时针旋转的规则
3、注：clip属性只能在元素设置了“position：absolute”或“position：fixed”属性时才起作用
4、auto：默认值，没有进行任何剪切一样效果
vertical-align：设置元素的垂直对齐方式
1、baseline：默认。将元素放置在父元素的基线上
2、top：将元素的顶端与行中最高元素的顶端对齐
3、middle：将元素放置在父元素的中部
4、bottom：将元素的最低端与行中最低的元素的低端对齐
5、text-top：将元素的顶端与父元素字体的顶端对齐
6、text-bottom：将元素的低端与父元素字体的低端对齐
7、sub：垂直对齐文本的下标
8、super：垂直对齐文本的上标
z-index：设置元素的堆叠顺序（数字越大越在上面）
overflow：设置当前元素的内容溢出其区域时发生的事情
float：浮动：定义元素在哪个方向浮动，当元素浮动后，后面的其他元素将会层叠浮动的元素的位置
1、left：元素向左浮动
2、right：元素向右浮动
3、none：默认值。元素不浮动，并会显示在其他文本中出现的位置

列表与表格

表格的属性

border-collapse：设置是否把表格边框合并为单一的边框；属性值：separate：默认值、collapse：边框合并
border-spacing：设置分割单元边框的距离，当border-collapse为默认值时才有效
caption-side：设置表格标题的位置；属性值：top：默认值，在表格之上、bottom：在表格之下
empty-cells：设置是否显示表格中的空单元格；属性值：hide：隐藏、show：显示，默认值
table-layout：设置显示宽度是否随内容拉伸；属性值：auto默认值、fixed：列宽由表格宽度和列表宽度设定，不随内容拉伸

列表的属性

list-style：复合属性。用于把所有用于列表的属性置于一个声明中
list-style-type：设置列表项标志的类型
1、none：无标记。disc：默认，实心圆、circle：标记是空心圆、square：实心方块
2、decimal：数字。decimal-leading-zero：0开头的数字、lower-roman：小写罗马数字、upper-roman：大写罗马数字、lower-alpha：小写英文字母、upper-alpha：大写英文字母
list-style-position：设置列表项标志的位置。属性值：inside、outside：默认值
list-style-image：将图像设置为列表项标志。属性值：URL图像的路径、none：默认，无图形被显示

边框

属性

border：复合属性，用于把针对四个边的属性设置在一个声明
border-width：简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度
1、常用单位为像素：px、em
2、thin：细边框、medium：默认、thick：粗边框
border-style：用于设置元素所有边框的样式，或者单独地为各边设置边框样式
1、none：定义无边框
2、dotted：定义点状边框
3、dashed：定义虚线
4、double：定义双线
5、groove：定义3D凹槽边框
6、ridge：定义3D垄状边框
7、inset：定义3Dinset边框
8、outset：定义3Doutset边框
border-color：复合属性，设置元素的所有边框中可见部分的颜色，或为单独地为各边设置边框颜色
border-bottom：简写属性，用于把下边框的所有属性设置到一个声明中
border-bottom-color：设置元素的下边框的颜色
border-bottom-style：设置元素的下边框的样式
border-bottom-width：设置元素的下边框的宽度
border-left：复合属性，用于把左边框的所有属性设置到一个声明中
border-left-color：设置元素的左边框的颜色
border-left-style：设置元素的左边框的样式
border-left-width：设置元素的左边框的宽度
border-right：简写属性，用于把右边框的所有属性设置到一个声明中
border-right-color：设置元素的右边框的颜色
border-right-style：设置元素的右边框的样式
border-right-width：设置元素的右边框的宽度
border-top：复合属性，用于把上边框的所有属性设置到一个声明中
border-top-color：设置元素的上边框的颜色
border-top-style：设置元素的上边框的样式
border-top-width：设置元素的上边框的宽度

    border: 2px solid blue;

    border-width: 3px 10px 20px 30px;
    border-style: groove;
    border-color: yellow green hotpink indianred;

    border-bottom: 55px solid goldenrod;

圆角

border-radius：复合属性，设置四个角为圆角的属性
1、border-top-left-radius：左上角圆角边框
2、border-top-right-radius：右上角圆角边框
3、border-bottom-left-radius：左下角圆角边框
4、border-bottom-left-radius：左下角圆角边框

    border-radius: 50px;
    
    border-radius: 10em/30em;

    border-top-left-radius:  500px 800px;

border-image：复合属性，设置四个角使用图片填充
1、border-image-source：图像来源路径
2、border-image-slice：边框背景图的分割方式
3、border-image-width：边框厚度
4、border-image-outset：边框背景图的拓展
5、border-image-repeat：边框图像的平铺方式

    border-image: url(../img/timg.jfif) 30 /20px /40px round;

    border-image-source: url(../img/timg.jfif);
    border-image-slice: 90 fill;
    border-image-width: 20px;
    border-image-outset: 40px;
    border-image-repeat: round;

box-shadow：向方框添加一个或多个阴影
1、none：无阴影
2、阴影水平偏移值、阴影垂直偏移值、阴影模糊值、阴影外延值、阴影的颜色、inset内阴影（默认值为outset）

box-shadow: 5px 5px 10px 10px blue;

#div1:hover{
    box-shadow: 
    -5px 5px 1px blue, 
    -15px 15px 1px green, 
    -25px 25px 1px yellow;
}

背景

属性

background：复合属性，作用是将背景属性设置在一个声明中，其中设置属性无顺序要求
1、background-attachment：背景图像是否固定或者随着页面的其余部分滚动。scroll：默认值、fixed：当页面的其余部分滚动时，背景图像不会移动
2、background-color：设置元素的背景颜色
3、background-image：设置元素的背景图片
4、background-position：设置元素的背景图像的起始位置
（1）、left、right、center、bottom、top：这几个属性值可以两两组合使用，如果只规定一个关键词，那么第二个值将是“center”
（2）、x% y%：第一个值是水平位置，二个值是垂直位置；左上角是 0% 0%；右下角是 100% 100%；如果仅规定了一个值，另一个值将是50%
（3）、x y：左上角是 0px 0px；单位是像素或其他的css单位；如果仅规定了一个值，另一个值将是50%
background-repeat：设置背景图片是否及如何重复
1、repeat：重复
2、repeat-x：向x轴重复
3、repeat-y：向y轴重复
4、no-repeat：不重复
background-size：设置背景的图片的尺寸
1、单位：像素、百分比
2、cover：把背景图片扩展至覆盖全部区域
3、contain：把背景图片扩展至最大尺寸，使其宽度和高度完全适应内容区域
background-clip：设置背景的绘制区域
1、border-box：背景被裁减到边框盒
2、padding-box：背景被裁减到内边距框
3、content-box：背景被裁减到内容框
background-origin：设置背景图片的定位区域
1、padding-box：背景图片相对于内边距框来定位
2、padding-box：背景图片相对于边框来定位
3、content-box：背景图片相对于内容框来定位

渐变效果

线性渐变

属性：linear-gradient(开始位置角度，起始颜色，终止颜色位置)
开始位置：渐变开始的位置，属性值可以为百分比、长度、left、right、top、bottom（可组合使用）
角度：渐变终止方向的角度，当开始位置为数值或百分比时候可用
起始颜色
终止颜色（注：当添加多种颜色时，往后加即可，逗号分隔，如需要按比例分隔，在颜色后面空格，再加百分比，开始为0%，结束为100%）
重复渐变将属性修改外：repeating-linear-gradient()

#div1{
    /* background: linear-gradient(red, blue); */
    background-image: linear-gradient(red, blue);
}

#div2{
    /* 自左向右 */
    background:linear-gradient(to right, red, blue)
}

#div3{
    /* 自左上角向右下角 */
    background-image: linear-gradient(to right bottom, red, blue);
}

#div4{
    /* 使用角度 */
    background-image: linear-gradient(60deg, red, blue);
}

#div5{
    /* 多种颜色，以及比例 */
    background-image: linear-gradient(red 20%, blue 50%, green 90%, yellow 100%);
}

#div6{
    /* 多种颜色，以及比例 */
    background-image: linear-gradient(red 40px, blue 100px, green 190px, yellow 200px);
}

#div7{
    /* 重复颜色渐变 */
    background: repeating-linear-gradient(60deg, orange 20px, red 40px);
}

径向渐变（放射渐变）

属性：radial-gradient(形状大小开始位置角度，起始颜色，终止颜色)
形状：ellipse：椭圆、circle：圆形
发散方向：属性值可以为left、right、top、bottom、center（可组合使用）
大小（半径）：属性值可用像素或关键字表示
1、closest-side：圆心到距离最近的边
2、fartherst-side：圆心到距离最远的边
3、closest-corner：圆心到距离最近的角
4、farthest-corner：圆心到距离最远的角
起始颜色
终止颜色
重复的径向渐变：repeating-radial-gradient( )

/* 放射渐变 */

#div8{
    background: radial-gradient( red, blue, yellow);  
}

#div9{
    /* 圆形渐变，默认为椭圆 */
    background: radial-gradient(circle, red, blue, green);
}

#div10{
    /* 开始位置 */
    background: radial-gradient(circle at left top, red, blue, orange);
}

#div11{
    /* 设置大小、半径 */
    background: radial-gradient(circle 50px, red, blue, orange);
}

#div12{
    /* 设置半径 */
    background: radial-gradient(circle closest-side, red, blue, orange);
}

#div13{
    /* 重复渐变 */
    background: repeating-radial-gradient(circle 50px, red, orange);
}

动画效果

变形

transform：2D变形

通过CSS3转换，我们能够对元素进行移动、缩放、转动、倾斜。
转换方法：translate()、rotate()、soale()、skew()、matrix()

none：不进行移动变形
translate(x, y)：通过定义x 轴、y 轴来移动变形
translateX(x)：通过定义x 值来移动变形
translateY(y)：通过定义y 值来移动变形

#div1:hover{
    transform: translate(100px, 100px);
}

#div2:hover{
    transform: translateX(100px);
}

#div3:hover{
    transform: translateY(-100px);
}

scale(x, y)：通过定义x 轴、y 轴进行缩放变形
scale(x)：通过定义x 轴的值来定义缩放变形
scale(y)：通过定义y 轴的值来定义缩放变形

#div4:hover{
    transform: scale(1, 2);
}

#div5:hover{
    transform: scaleX(5);
}

#div6:hover{
    transform: scaleY(0.5);
}

rotate(angle)：通过定义角度angle来进行转动变形

#div7:hover{
    transform: rotate(-45deg);
}

skew(x, y)：通过定义角度来进行倾斜变形
skewX(angle)：通过定义angle角度沿着x轴倾斜变形
skewY(angle)：通过定义angle角度沿着y轴倾斜变形

#div8:hover{
    transform: skew(30deg, 45deg);
    /* transform: skewX(30deg); */
    /* transform: skewY(30deg); */
}

matrix(n, n, n, n, n, n)：通过定义6个参数进行变形

#div9{
    /* 
    第一、四个参数：缩放值 
    第二、三个参数：倾斜角度
    第五、六个参数：移动位置
    */
    transform: matrix(1,0,0,1,50,1);
}

transform-origin：改变元素变形的基准点
1、像素、百分比
2、X轴：left、right、center
3、Y轴：top、bottom、center

#div11:hover{
    /* 改变基准点 */
    transform: rotate(45deg);
    /* transform-origin: left top; */
    transform-origin: 30px 0;
}

transform：3D变形

3D变形可以进似理解为沿着Z轴移动元素，使得元素更加靠近或者远离你，从而使元素看起来变得更大或更小

translate3d(x, y, z)：通过定义x/y/z轴来进行3D移动变形
translateY(y)：通过定义Y轴来进行移动变形
translateX(x)：通过定义X轴来进行移动变形
translateZ(z)：通过定义Z轴来进行移动变形
rotate3d(x, y, z, angle)：定义3D旋转
rotateX(angle)：定义沿着X轴的3D旋转
rotateY(angle)：定义沿着Y轴的3D旋转
rotateZ(angle)：定义沿着Z轴的3D旋转
scale3d(x, y, z)：定义3D缩放
scaleX(x)：定义x的值来进行3D缩放
scaleY(y)：定义y的值来进行3D缩放
scaleZ(z)：定义z的值来进行3D缩放
matrix3d(n, n, n, n, n, n, n, n, n, n, n, n,n, n, n, n)：定义3D变形，使用16个值的4x4矩阵、
transform-origin：允许你改变被变形元素的位置。2D变形元素能够改变元素X轴和Y轴。3D变形元素还能改变其Z轴
perspective(n)：为3D变形元素定义透视视图；当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身

过渡

通过CSS3，我们可以在不使用Flash动画或JavaScript的情况下，当元素重一种样式变换为另一种样式时为元素添加效果
CSS3过渡是元素从一种样式逐渐改变为另一个的效果。要实现这一点必须规定两项内容：把效果添加到哪个CSS属性上、规定效果的时长

属性

transition：复合属性，用于在一个属性中设置四个过渡属性
transition-property：定义应用过渡的CSS属性的名称
1、none：没有属性会获得过渡效果
2、all：所有属性都将获得过渡效果
3、属性名称
transition-duration：定义过渡效果的时间。默认是0，单位是秒或毫秒
transition-timing-function：定义过渡效果的时间曲线。默认是“ease”
1、linear：规定以相同速度开始至结束的过渡效果（等于cubic-bezier(0, 0, 1, 1) )
2、ease：规定以慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25, 0.1, 0.25, 1)）
3、ease-in：规定以先慢后快开始的过渡效果（cubic-bezier(0.42, 0, 1, 1)）
4、ease-out：规定以先快后慢开始的过渡效果（cubic-bezier(0.42, 0, 0.58, 1)）
5、ease-in-out：规定以先慢后快再慢的过渡效果（cubic-bezier(0.25, 0.1, 0.25, 1)）
6、cubic-bezier(n, n, n, n)：在cubic-bezier函数中定义自己的时间曲线值。数值在0至1之间
transition-delay：定义过渡效果何时开始。默认是0

/* 过渡动画 */

#div14{
    background: red;
    transition-property: width;
    transition-duration: 1s;
}

#div14:hover{
    width: 150px;
    background: green;
}

#div15{
    background: orange;
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: ease-out;
    transition-delay: 1s;
}

#div15:hover{
    width: 150px;
    background: green;
}

#div16{
    background: blue;
    /* transition: all 2s ease-in-out 0s; */
    transition: width 2s ease,
                background 2s linear,
                transform 2s ease-in-out;
}

#div16:hover{
    width: 150px;
    background: green;
    transform: rotate(360deg);
}

关键帧

属性

@keyframes：设定动画规则。可以近似理解为动画剧本
1、name：必需。定义动画的名称
2、0-100%、from…to…：必需。动画时长的百分比
3、必需变化的CSS样式属性
animation：复合属性。用于设置6个动画属性
1、animation-name
2、animation-duration
3、animation-timing-function
4、animation-delay
5、animation-iteration-count
6、animation-direction
animation-name：属性值为@keyframes动画设定的名称。若设定为none则覆盖已有动画效果
animation-duration：设定动画完成一个周期所花费的秒或毫秒。默认是0
animation-timing-function：定义动画的速度曲线。默认是“ease”
1、linear：规定以相同速度开始至结束的过渡效果（等于cubic-bezier(0, 0, 1, 1) )
2、ease：规定以慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25, 0.1, 0.25, 1)）
3、ease-in：规定以先慢后快开始的过渡效果（cubic-bezier(0.42, 0, 1, 1)）
4、ease-out：规定以先快后慢开始的过渡效果（cubic-bezier(0.42, 0, 0.58, 1)）
5、ease-in-out：规定以先慢后快再慢的过渡效果（cubic-bezier(0.25, 0.1, 0.25, 1)）
6、cubic-bezier(n, n, n, n)：在cubic-bezier函数中定义自己的时间曲线值。数值在0至1之间
transition-delay：定义过渡效果何时开始。默认是0
animation-delay：定义动画何时开始。默认是0
animation-iteration-count：定义动画被播放的次数。默认是1；infinite为无限次播放
animation-direction：设定动画是否在下一周期逆向地播放。默认是：normal：顺序播放、alternate：逆向播放
animation-play-state：定义动画是否正在运行或暂停。默认是：running：定义动画正在播放、paused：规定动画暂停
animation-fill-mode：定义对象动画时间之外的状态
1、none：不改变默认行为
2、forwards：当动画完成后，保持最后一个属性值
3、backwards：在animation-delay所指定的一段时间内，在动画显示之前，应用第一个（关键帧）属性值，再执行动画
both：向前和向后填充模式都被应用

@charset "utf-8";

div{
    width: 200px;
    height: 80px;
    font-size: 30px;
    padding: 50px;
    background: red;

    /* animation-name: myDongHua;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: 1;

    animation-direction: alternate;
    animation-fill-mode: both; */

    animation: myDongHua 4s linear 2s 2 alternate;

}

@keyframes myDongHua{
    /* 方式一：只能定义开始和结束，两种状态 */
    /* from{
        margin-left: 50px;
        background: green;
    }
    to{
        margin-left: 500px;
        background: blue;
    } */

    /* 方式二:可以定义更多中间状态*/
    0%{
        margin-left: 150px;
        background: green;
    }

    50%{
        margin-top: 400px;
        margin-left: 1250px;
        background: orange;
    }

    100%{
        margin-top: 800px;
        margin-left: 50px;
        background: blue;
    }
}

其他常用属性

opacity 透明度设定

opacity属性用来设定透明度，属性值从0.0到1.0之间，值越小越透明
opacity与通过rgba()设定透明度的区别：前者同时作用于元素本身和元素包含的内容，后者只是作用于元素本身

#div1{
    opacity: 0.6;
    background:  rgb(160, 60, 30);
}

#div2{
    background: rgba(160, 60, 30, 0.6);
}

cursor 鼠标样式

hand：手型
pointer：也是手型，推荐使用
crosshair：十字型
text：移动到文本上的效果
wait：等待
default：默认
e-resize：向右箭头
ne-resize：向右上箭头
n-resize：向上箭头
nw-resize：向左上箭头
w-resize：向左箭头
sw-resize：左下箭头
s-resize：向下箭头
se-resize：向右下箭头
auto：系统自动给出效果

rem 根元素字体大小

浏览器默认字体大小为16px
em是以父元素字体为基准的
rem是以根元素字体大小为基准的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rem字体样式大小</title>
    <style type="text/css">
        p{
            font-size: 0.75em;
        }
        .span1{
            font-size: 2em;
        }
        .span2{
            font-size: 2rem;
        }
    </style>
</head>
<body>
    浏览器默认字体大小为16px
    <p>
        我是p标签，字体大小为12px，16*0.75=12 <br>
        <span class="span1">我是span1标签，字体大小为24px,这里是相对
            父级元素字号12px设定的，而不是body里面的16px
        </span>
        <span class="span2">我是span2标签，字体大小为32px,这里是相对
            根元素字号16px设定的，而不是p里面的12px
        </span>
    </p>
</body>
</html>

outline 轮廓

轮廓是绘制元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

outline：复合属性，在一个声明中设置所有的轮廓属性
1、outline-color：设置轮廓的颜色
2、outline-style：设置轮廓的样式
3、outline-width：设置轮廓的宽度
4、outline-offset：设置轮廓到边框的距离。注：css新增属性，不可以写到复合属性中

display 显示

显示或隐藏元素

none：隐藏元素
block：此属性将显示为块级元素。特征：换行、可设置宽高尺寸，如：div、h、li、p等标签
inline：此属性将显示为行内元素，默认。特征：大小自适应；不换行，如：a、span标签
inline-block：此属性将显示为行内块元素。特征：可以设置大小，但是不可以换行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display属性</title>
    <style type="text/css">
        div, .sp1, .sp2{
            width: 150px;
            height: 150px;
            font-size: 24px;
            font-weight: bold;
            background: green;
            margin: 15px;
        }
        .div3{
            display: inline;
        }
        .sp1{
            display: inline-block;
        }
        .sp2{
            display: block;
        }
    </style>
</head>
<body>
    <div class="div3">块元素转换成行内元素</div>
    <span class="sp1">行内元素转换成块元素</span>11111
    <span class="sp2">行内元素转换从行内块元素</span>
</body>
</html>

布局

固定布局

主体各个模块使用固定宽度

流体布局

主体部分都是使用百分比宽度，因此可以自适应用户的分辨率

浮动布局

box-sizing：设置盒是否包含边框和内边距。属性值：content-box：默认值，元素的宽高不包含边框和内边距、border-box：元素的宽高包含边框和内边距

弹性布局

事实上它是一种新类型的盒子模型，也有书上称作弹性伸缩盒布局
比较新的布局方式：旨在提供一个更加有效的方式来布局，对齐和分布在容器之间的各项内容，即使他们的大小是未知或者动态变化的
弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间（主要是为了容纳所有类型的显示设备和屏幕尺寸）的能力

属性

display：flex、inline-flex（适用于父类容器元素上）
1、box：将对象作为弹性伸缩显示
2、inline-box：将对象作为内联块级弹性伸缩盒显示
3、flexbox：将对象作为弹性伸缩盒显示
4、inline-flexbox：将对象作为内联块级弹性伸缩盒显示
5、flex：将对象作为弹性伸缩盒显示
6、inline-flex：将对象作为内联块级弹性伸缩盒显示
flex-flow：复合属性，设置或检索伸缩盒对象的子元素排列方式。可以同时设置flex-direction、flex-wrap（适用于父类容器上）
1、flex-direction：设置或检索伸缩盒对象的子元素在父容器中的位置（适用于父类容器的元素上）
（1）、row：横向从左到右排列（左对齐），默认的排列方式
（2）、row-reverse：反转横向排列（右对齐，从后往前排，最后一项在最前面）
（3）、column：纵向排列
（4）、column-reverse：方向纵向排列，从后往前排，最后一项排在最上面
2、flex-wrap：设置或检索伸缩盒对象的子元素超出父容器是否换行（适用于父类容器上）
（1）、nowrap：当子元素溢出父容器时不换行
（2）、wrap：当子元素溢出父类容器时自动换行
（3）、wrap-reverse：当子元素溢出父容器时自动换行，方向同wrap反转排列
justify-content：设置或检索弹性盒子元素在主轴方向上的对齐方式（适用与父类容器上）
1、flex-start：弹性盒子元素将向行起始位置对齐
2、flex-end：弹性盒子元素将向行结束位置对齐
3、center：弹性盒子元素将向行中间位置对齐
4、space-between：弹性盒子元素会平均地分布在行里
5、space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半
align-item：设置或检索弹性盒子元素在侧轴方向上的对齐方式（适用与父类容器上）
1、flex-star：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
2、flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界靠住该行的侧轴结束边界
3、center：弹性盒子元素在该行的侧轴（纵轴）上居中位置
4、baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与“flex-start”等效。其他情况下，该值将参与基线对齐
5、stretch：如果指定侧轴大小的属性值为“auto”，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照“min、max-width、height”属性的限制
align-self：设置或检索弹性盒子元素自身在侧轴方向上的对齐方式（适用于弹性盒模型子元素上）
1、auto：如果“align-self”的值为“auto”，则其计算值为元素的父元素的“align-items”值，如果其没有父元素，则计算值为“stretch”
2、flex-star：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
3、flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界靠住该行的侧轴结束边界
4、center：弹性盒子元素在该行的侧轴（纵轴）上居中位置
5、baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与“flex-start”等效。其他情况下，该值将参与基线对齐
6、stretch：如果指定侧轴大小的属性值为“auto”，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照“min、max-width、height”属性的限制
align-content：设置或检索弹性盒堆叠伸缩行的对齐方式（适用于父类容器上）
1、flex-start：各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠前面一行；而且会清理空白空间
2、flex-end：各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起始结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行
3、center：各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与最后一行之间的距离相等
4、space-between：各行在弹性盒容器中平均分布
5、space-around：各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半
6、stretch：各行将会伸展以占用剩余的空间
order：用整数值来定义排列顺序，数值越小就越排在前面，可以为负值（适用于弹性模型容器子元素）
flex：复合属性，设置或检索伸缩盒对象的子元素如何分配空间（适用于弹性盒模型子元素）
1、none：none关键字的计算值为：0 0 auto
2、flex-grow、flex-shrink、flex-basis
3、flex-grow：根据弹性盒子元素所设置的拓展因子作为比率来分配剩余空间（适用于弹性盒模型容器子元素）
4、flex-shrink：设置或检索弹性盒的收缩比率，根据弹性盒子元素所设置的收缩因子作为比率来收缩空间（适用于弹性盒模型容器子元素）
5、flex-basis：（适用于弹性盒模型容器子元素）
（1）、auto：无特定宽度值，取决于其它属性值
（2）、用长度值、百分比来定义宽度。不允许负值