CSS3 主要知识点 总结

一. css3介绍

1. css — 层叠样式表

2. 在html中引入css的三种方法：
(1) 将css规则直接填写在style属性中
(2) 将样式嵌入到style标签中
(3) 将样式写在.css文件中，再通过link标签将这个文件引入到html中

3. 语法组成:
选择器 { 属性：值；}

二. css3选择器【5大类】

1. 标签选择器

(1) 标签选择器（元素选择器） —— div { } 、ul { } 、dl { }
(2) 类选择器 —— .nav { }
(3) id选择器 —— #id{ }
(4) 组合选择器 —— body , ul { }
(5) 并且选择器 —— ul.nav { }
(6) 普遍选择器 —— *{ }

2. 层次选择器

(1) 父子选择器 —— 父 > 子 —— ul.nav > li { }
(2) 后代选择器 —— 父 后 —— .nav li { }
(3) 下一个兄弟选择器 —— selector + selector { }
(4) 之后所有兄弟选择器 —— selector ~ selector { }

3. 伪类选择器

(1) 子元素相关：
:first-child
:last-child
:nth-child(参数)
注：参数可以是：数字、表达式（2n 、2n+1）、关键字（odd 、even）

(2) 状态相关：
a:link {color:bule;} /* 未访问链接 /
a:visited {color:bule;} / 已访问链接 /
a:hover {color:bule;} / 用户鼠标悬停 /
a:active {color:bule;} / 激活段落 */

4. 伪元素选择器

::after
::before

5. 属性选择器

选项	备注
[name]	选择具有name属性的元素
[name=username]	选择具有name属性,并且属性值为username的元素
[name^=u]	选择具有name属性,并且属性值以u开头的的元素
[name$=u]	选择具有name属性,并且属性值以u结尾的的元素
[name*=u]	选择具有name属性,并且属性值包含u的的元素

补充：选择器的优先权问题

(1) 特权

! important

(2) 权值

权值	选择器
1000	style属性
100	id选择器
10	类选择器、伪类选择器、属性选择器
1	元素选择器 、 伪元素选择器

(3) 顺序
谁距离选中的页面元素更近，谁生效

三、规则

1. 盒子模型规则

基本概念：
外边距 margin 、边框 border 、内边距 padding、 宽 width 、高 height
注：padding
5px 上下左右5px
0 5px 上下0,左右5px
0 5px 10px 上0 左右5px 下10px
0 5px 10px 20px 上0右5px下10px左20px

分类：

(1) 怪异盒子（边框盒子）
box-sizing:border-box;
盒子所占的宽度 = width （包含了border + padding + 内容实际宽）

(2) 传统盒子（内容盒子）
box-sizing:content-box;
盒子所占的宽度 = border + padding + width（内容宽）

2. 文本规则

针对于盒子内容来进行修饰。具有可继承性

属性	值	备注
text-align	center / left / right	定义行内内容（例如文字）如何相对它的块父元素对齐
vertical-align	middle / top / bottom	调整行内元素的垂直排列
line-height	20px	行高
text-transform	lowercase / uppercase	大小写转换
text-decoration	underline / light-through / overline / none	文本装饰效果
overflow	visible / hidden / scroll	溢出元素内容区的内容的处理

3. 字体规则

针对于盒子内容来进行修饰。具有可继承性

属性	值	备注
color	#333	字体的颜色
font-family:	‘Microsoft YaHei’,‘微软雅黑’,'宋体	文字的字体
font-size	12px	字体的大小
font-weight	normal / bold	字体的粗细
font-style	normal / italic	字体的样式
font	italic bold 12px/1.5 Microsoft YaHei	字体的所有属性

补充：网络字体的定义及使用

（1） 获取字体文件

woff、 eot、…

（2）定义网络字体

@font-face {
font-family: “iconfont”;
//字体文件
src: “”
}

（3）使用

// 基础样式
.iconfont {
font-family: “iconfont” !important;
font-size: 16px;
font-style: normal;
}

// 特殊样式
.icon-aixin:before {
content: “\e8ab”;
}

<!--html中引用 -->
<span class="iconfont icon-aixin"><span>

4. 实体规则

 
<
>

5. 单位规则

（1）绝对单位 px

（2）相对单位

1em , em相对于当前元素的字体大小
1rem , rem相对于html元素选择器中设定的字体大小

（3）颜色

颜色	举例
关键字	pink
十六进制	#ffffff #000 #f4f4f4
函数 rgb(r,g,b)	rgb(114,141,153)
函数 rgb(r,g,b,a)	rgba(114,141,153,1)

6. 背景规则

属性	值	备注
background-image	url(‘图片地址’)	背景图片
background-repeat	repeat / repeat-x / repeat-y / no-repeat	背景图片重复方式
background-origin	border-box / padding-box / content-box	背景铺设的起点
background-clip	border-box / padding-box / content-box	背景裁切的方式
background-size	contain / cover / length	图片大小
background-position	center	背景图片的位置
background-color	#ccc	背景色
background	url() #ccc no-repeat center	速写

7. 其它规则

display : block / inline / inline-block ;

列表规则 list-style : none ;

表格规则 border-collapse : collapse ; 当td添加边框，加在table上可以合并隔壁的边框（合并表格边框）。

opacity : value ; 设置不透明度，从 0.0 （完全透明）到 1.0（完全不透明）。

四、布局

1. 浮动布局

（1） float:left

【1】 块元素脱离默认文档流------宽高由内容决定
默认宽度为0
失去了对父元素支撑的能力 【伪元素】

【2】 在浮动流中，多个浮动元素在一行中显示，当这一行容纳不下，会自动换行

（2）清理浮动

为容器内部添加一个子元素，一般使用伪元素较方便

ul.list::after {
		content:"";
		display:block;
		clear:both;
	}

（3）盒子居中

margin:0 auto;

2. 定位布局

position: static; // 默认，静态

属性	相对点	是否脱离文档流
relative	该元素在文档流中初始的位置	否
absolute	距离它最近的父定位元素，如果没有父定位元素，那么就只能相对于浏览器视口	是
fixed	相对于浏览器视口，并且不会随着浏览器的滚动而滚动	是
sticky	是相对定位和固定定位的结合，在达到阈值之前是相对定位，达到阈值之后是固定定位，阈值通过left、top、right、bottom来设定	是

当元素上的position的取值为relative absolute fixed sticky之一，我们就认为当前这个元素为定位元素。
定位布局可以使用定位属性，比如 left、right、top、bottom

3. 伸缩盒布局

作用：与浮动布局的作用类似，用于将一个容器中多个子元素【块元素】在一行中多列排列，常用于响应式布局（移动端）

概念：
主轴：flex-direction定义，row - x; column - y
交叉轴：与主轴垂直的轴 y, x

使用：
子元素都是沿着主轴来排列的
一般建议给容器添加宽高，子元素在容器中排列
例如：

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

对于ul 容器：
display: flex; 让容器成为伸缩盒容器
flex-direction: row; 容器中子元素的排列方式，row-沿着x轴
flex-wrap: wrap;
ustify-content: space-between;

对于li 子元素;
flex-basis 主轴中基准值，主轴是x轴，相等于width
flex-grow 主轴中剩余空间分配所占据份数
flex-shrink 主轴中如果有亏损，所占亏损的份数
flex 速写

五、动画过渡变形

1. 动画

使用：
（1）关键帧定义

@keyframes name {
				0%{
				}
				50%{
				}
				100%{
				}
			}

（2）动画设定

属性	备注	值
animation-name	动画的名称
animation-duration	完成一个周期的时间
animation-delay	延迟时间
animation-timing-function	速度曲线	linear / steps / ease / ease-in / …
animation-direction	动画播放方式	reverse / alternate / alternate-reverse
animation-iteration-count	动画播放次数	数字 / infinite
animation-fill-mode	动画时间之外的状态	forwards / backwards / both

动画库

打开网页的时候可能一开始有白屏（*）
（1）加强服务器！
（2）faster mini
图片压缩
图片合并（图标）
cdn加速 >> 将库【iconfont】放到cdn服务器

使用：

（1）获取cdn连接

（2）使用class

基础规则 animate__animated
特殊规则 animate__pulse

2. 过渡

更加简单的动画，没有动画帧
需要触发（:hover）

属性	值	备注
transition-property	all	需要过渡的属性
transition-duration	2s	持续时间
transition-timing-function	linear / steps / easy	时间曲线函数
transition-delay	0s	延迟时间
transition	transition: property duration delay timing;	速写

3. 变形

属性	值	备注
transform-origin	center / top left	起点
transform	scale()	缩放
transform	rotate()	旋转
transform	skew()	倾斜
transform	translate()

六、响应式布局

pc端:
（1）类似于腾讯视频
容器的宽度随着屏幕的分辨率大小的改变而改变

（2）纯响应式(与mobile兼容)
完全兼容移动的设备

mobile端：
手机型号不同，宽度不同
（1）不要给容器【块元素】指定宽度，让他默认为100%
（2）子元素【列元素】宽度使用相对单位,百分数

媒体查询技术

style_normal.css

.products {
    width: 990px;
    margin: 0 auto;
  }
  .products > ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    height: 100px;
    overflow: hidden;
  }
  .products > ul > li {
    width: 19.5%;
    height: 100px;
    background-color: rebeccapurple;
  }

style_big.css

.products {
    width: 1400px;
  }
  .products > ul > li {
    width: 14%;
  }

style_middle.css

.products {
    width: 1200px;
  }
  .products > ul > li {
    width: 16.5%;
  } 

HTML中引用：

<link rel="stylesheet" href="./css/style_normal.css">
<link media="screen and (min-width: 1300px) " rel="stylesheet" href="./css/style_middle.css">
<link media="screen and (min-width: 1500px) " rel="stylesheet" href="./css/style_big.css">