CSS 2&3 知识点整理

CSS

层叠样式表（Cascading Style Sheets）

行内样式

写在标签的 style 属性中，又称内联样式

<h1 style="color:red"></h1>

内部样式

写在 html 页面内部，将所有的 CSS 代码提取出来，单独放在 style 标签里

<style>

h1{
      
      
   font-size:28px;
   color:red
}
</style>

外部样式

写在单独的 .css 文件中，随后在 HTML 中引入使用

1. 新建一个扩展名为 .css 的样式文件

2. 在 HTML 中引入 .css文件

   <link rel="stylesheet" href="./xxx.css">
   

样式表优先级

优先级规则：行内样式 > 内部样式 = 外部样式

CSS 语法规范

CSS 语法由两部分构成：

• 选择器：找到要添加样式的元素
• 声明块：设置具体的样式

注释：/* … */

CSS 代码风格

• 展开风格：开发时推荐
• 紧凑风格：项目上线时推荐

CSS 选择器

基本选择器

• 通配选择器
• 元素选择器
• 类选择器
• id选择器

通配选择器

可以选中所有的 HTML 元素

* {
    
    
  margin:0;
  padding:0
}

元素选择器

为页面中某种元素统一设置样式

h1{
    
    
   font-size:28px;
   color:blue;
}

类选择器

根据元素的 class 值，来选中某些元素

<div class="container">
    <h1>xxx</h1>
</div>

.contaner{
    
    
    width:400px;
    height:300px;
    color:blue;
}

id选择器

根据元素的 id 属性值，来精准的选中某个元素

<div id="root">
    <h1>xxx</h1>
</div>

复合选择器

• 交集选择器
• 并集选择器

交集选择器

选中同时符合多个条件的元素

语法：选择器1选择器2…选择器n{ }

<div>
    <p>段落一</p>
    <p>段落二</p>
    <p class="beauty">段落三</p>
</div>

p.beauty{
    
    
    color:green
}

注意：有标签名，标签名必须写在前面

并集选择器

选中多个选择器对应的元素，又称分组选择器

语法：选择器1,选择器2,选择器3，…选择器n{ }

<div>
      <p class="a">段落一</p>
      <p class="b">段落二</p>
      <p class="c">段落三</p>
</div>

.a,
.b,
.c {
    
    
    font-size: 28px;
    color: blue;
}

后代选择器

选中指定元素中，符合要求的后代元素

语法：选择器1 选择器2 选择器3 … 选择器n { }

ul li{
    
    
    color:blue
}

子代选择器

选中指定元素中，符合要求的子元素

语法：选择器1>选择器2>…选择器n{ }

div>h1{
    
    
    color:blue;
}

兄弟选择器

相邻兄弟选择器：选中指定元素后，符合条件的相邻兄弟元素

语法：选择器1+选择器2{ }

通用兄弟选择器：选中指定元素后，符合条件的所有兄弟元素

语法：选择器1~选择器2{ }

div+p{
    
    
    color:blue;
}

div~p{
    
    
    color:green;
}

属性选择器

选中属性值符合一定要求的元素

语法：

1. [属性名] 选中具有某个属性的元素
2. [属性名=“值”] 选中包含某个属性且指定属性值的元素
3. [属性名^=“值”] 指定属性值的开头
4. [属性名$=“值”] 指定属性值的结尾
5. [属性名*=“值”] 指定属性值包含指定值

[title]{
    
    
    color:blue;
}

[title="title1"]{
    
    
    color:green;
}

[title^="a"]{
    
    
    color:red
}

[title$="a"]{
    
    
    color:yellow
}

[title*="a"]{
    
    
    color:#333
}

伪类选择器

选中特殊状态的元素

动态伪类

a:link{
    
    
    color:orange
}

a:visited{
    
    
    color:gray
}

a:hover{
    
    
    ...
}

a:active{
    
    
    ...
}

input:focus{
    
    
    ...
}

结构伪类

p:first-child{
    
    
    ...
}

p:last-child{
    
    
    ...
}

p:nth-child(n){
    
    
    ...
}

div>p:first-of-type{
    
    
    ...
}

div>p:last-of-type{
    
    
    ...
}

div>p:nth-of-type(n){
    
    
    ...
}

否定伪类

div>p:not(xxx){
    
    
    ...
}

UI伪类

input:checked{
    
    
    ...
}

input:disabled{
    
    
    ...
}

目标伪类

<a href="#one">目标伪类</a>

<div id="one"></div>

div:target{
    
    
    ...
}

语言伪类

<div lang="en">xxx</div>

div:lang(en){
    
    
    ...
}

伪元素选择器

选中元素中的一些特殊位置

p::first-letter{
    
    
    ...
}

div::first-line{
    
    
    ...
}

div::selection{
    
    
    ...
}

input::placeholder{
    
    
    ...
}

p::before{
    
    
    content:"xxx"
    ...
}

p::after{
    
    
    content:"xxx";
    ...
}

选择器优先级

!important > 行内 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器 > 继承的样式

CSS 三大特性

• 层叠性
• 继承性
• 优先级

CSS 颜色

• 颜色名
• rgb、rgba
• hex、hexa：#fff、#aaa
• hsl、hsla

CSS 相关属性

CSS 常用字体属性

• 字体大小：font-size
• 字体族：font-family
• 字体风格：font-style
  • nomal：正常
  • italic：斜体
  • oblique：斜体
• 字体粗细：font-weight
  • light
  • normal
  • bold
  • bolder
• 字体复合属性：font：weight style size family

CSS 常用文本属性

• 文本颜色：color
• 文本字母间距：letter-spacing
• 文本单词间距：word-spacing
• 文本修饰：text-decoration
  • overline dotted green
  • underline wavy red
  • line-through
  • none
• 文本缩进：text-indent
• 文本水平对齐：text-align
  • left
  • center
  • right
• 行高：line-hight
  • normal
  • 像素
  • 数字
  • 百分比
• 同一行元素间或表格单元格内文字的垂直对齐：vertical-align
  • baseline
  • top
  • middle
  • bottom

CSS 列表相关属性

• 列表符号：list-style-type
  • none
  • square
  • disc
  • decimal
  • lower-roman
  • upper-roman
  • lower-alpha
  • upper-alpha
  • …
• 列表符号的位置：list-style-position
  • inside
  • outside
• 自定义列表符号：list-style-image
• 列表复合属性：list-style

CSS 边框相关属性

• 边框宽度：border-width
• 边框颜色：border-color
• 边框风格：border-style
• 边框复合属性：border

CSS 表格相关属性

• 表格列宽：table-layout
  • auto
  • fixed
• 单元格间距：border-spacing
• 合并相邻单元格的边框：border-collapse
  • collapse：合并
  • separate：不合并
• 隐藏没有内容的单元格：empty-cells
  • show
  • hide
• 设置表格标题的位置：caption-size
  • top
  • bottom

CSS 背景相关属性

• 背景颜色：background-color
• 背景图片：background-image：ul(…/image)
• 背景重复方式：background-repeat
  • repeat
  • repeat-x
  • repeat-y
  • no-repeat
• 背景图片的位置：background-position
• 背景复合属性：background

CSS 鼠标相关属性

• 鼠标光标：cursor
  • pointer
  • move
  • text
  • crosshair
  • wait
  • help
  • 自定义：url(…/image), pointer

CSS 常用长度单位

• 像素：px
• 相对元素font-size的倍数：em
• 相对html根字体大小：rem
• 相对父元素计算：%

CSS 元素的显示模式

• 块元素（block）
  • 页面中独占一行，从上到下排列
  • 默认宽度：撑满父元素
  • 默认高度：由内容撑开
  • 可通过CSS设置宽高
  • 相关标签：
    • 主体结构：html、body
    • 排版标签：h1~h6、hr、p、pre、div
    • 列表标签：ul、ol、li、dl、dt、dd
    • 表格标签：table、tbody、thead、tfoot、tr、caption
    • form、option
• 行内元素（inline）
  • 页面中不独占一行，从左到右排列
  • 默认宽度：由内容撑开
  • 默认高度：由内容撑开
  • 无法通过CSS设置宽高
  • 相关标签：
    • 文本标签：br、em、strong、sup、sub、span
    • a、label
• 行内块元素（inline-block）
  • 在页面中不独占一行，从左至右排列
  • 默认宽度：由内容撑开
  • 默认高度：由内容撑开
  • 可以通过CSS设置宽高
  • 相关标签：
    • img、td、th、input、textarea、select、button、iframe

修改元素的显示模式

• display
  • none
  • block
  • inline
  • inline-block

CSS 盒子模型

盒子模型的组成

• 外边距：margin
• 边框：border
• 内边距：padding
• 内容：content

盒子的大小 = content + 2 * padding + 2 * border

盒子内容区（content）

• 宽度：width
• 最大宽度：max-width
• 最小宽度：min-width
• 高度：height
• 最大高度：max-height
• 最小高度：min-height

关于默认宽度

指不设置width属性时，元素所呈现的宽度

总宽度 = 父的content - 自身左右margin

内容区的宽度 = 父的content - 自身左右margin - 自身左右border - 自身左右padding

盒子内边距（padding）

• 上内边距：padding-top
• 右内边距：padding-right
• 下内边距：padding-bottom
• 左内边距：padding-left
• 复合属性：padding

注意：

1. padding不能为负数
2. 行内元素左右内边距可以设置，上下内边距不能设置
3. 块级元素、行内块元素四周内边距都可以设置

盒子的边框（border）

• 边框线风格：border-style
  • none
  • solid
  • dashed
  • dotted
  • double
  • …
• 边框线宽度：border-width
• 边框线颜色：border-color
• 复合属性：border
• 各个方向的边框：border-left/right/top/bottom

盒子的外边距（margin）

• 左外边距：margin-left
• 右外边距：margin-right
• 上外边距：margin-top
• 下外边距：margin-bottom
• 复合属性：margin

注意：

1. 子元素margin根据父元素content计算
2. 上左margin影响自身位置，下右margin影响兄弟元素位置
3. 块级元素、行内块元素可设置四方向margin；行内元素左右margin有效，上下margin无效
4. margin可以是负值

margin塌陷问题

margin塌陷：第一个子元素的上margin和最后一个子元素的下margin会作用在父元素上（历史遗留问题）

解决方法：

1. 父元素设置padding
2. 父元素设置border
3. 父元素设置overflow：hidden

margin合并问题

margin合并：上兄弟元素的下外边距和下兄弟元素的上外边距会合并，取最大值

处理内容溢出

• 处理溢出内容：overflow
  • visible
  • hidden
  • scroll
  • auto
• 水平方向溢出：overflow-x
• 垂直方向溢出：overflow-y

隐藏元素的方式

• visibility：hidden（占位）
• display：none（不占位）

样式的继承

会继承的css属性

字体属性、文本属性等

不会继承的css属性

边框、背景、内边距、外边距、宽高、溢出方式等

规律：不影响布局的属性可继承，和盒子模型有关的属性无法继承

元素的默认样式

元素一般都有些默认的样式，如：

1. a元素：下划线、字体颜色、鼠标小手…
2. h1~h6：文字加粗、大小，上下外边距
3. …

优先级：元素的默认样式 > 继承的样式

元素间空白问题

行内元素、行内块元素，彼此间的换行会被浏览器解析为一个空白字符

解决方案：给父元素设置font-size：0，再给需要显示文字的元素单独设置字体大小。

行内块的幽灵空白问题

行内块与文本的基线对其，而文本的基线与文本最底端之间有一定距离的

解决方案：

1. 行内块设置vertical
2. 父元素设置font-size：0，行内块中文本单独设置
3. 若父元素中只有一张图片，设图片为display：block

CSS 浮动

最初，浮动是用来实现文字环绕图片效果的，现在是主流的页面布局方式之一。

浮动后的特点

1. 脱离文档流
2. 默认宽高浮动后都是被内容撑开
3. 不会独占一行，可以与其他元素共用一行
4. 不会margin合并，也不会margin塌陷
5. 不会像行内块一样被当做文本处理

浮动后的影响

• 对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响
• 对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素

解决浮动产生的影响（清除浮动）：

1. 给父元素指定高度
2. 给父元素也设置浮动，带来其他影响
3. 给父元素设置 overflow：hidden
4. 在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear：both
5. 给浮动元素的父元素，设置伪元素，通过伪元素清除浮动

   .parent::after{
         
         
       content:'';
       display:block;
       clear:both;
   }
   

CSS 定位

相对定位

设置定位：

• position：relative
• 调整位置：top、bottom、left、right

参考点：

• 相对自己原来的位置

特点：

1. 不会脱离文档流，不会对其他元素产生影响
2. 显示层级比普通元素高
   • 定位的元素会盖在普通元素之上
   • 都发生定位的两个元素，后写的会盖在先写的元素上
3. left和right不能一起设置，top和bottom不能一起设置
4. 能通过margin调整位置，但不推荐

注意：多数情况下，相对定位会与绝对定位配合使用

绝对定位

设置定位：

• position：absolute
• 调整位置：left、right、top、bottom

参考点：

• 相对它的包含块
  • 没有脱离文档流 —— 父元素
  • 脱离文档流 —— 第一个有定位属性的祖先元素

特点：

1. 脱离文档流，会对后面的兄弟元素、父元素有影响
2. left和right不能一起设置，top和bottom不能一起设置
3. 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主
4. 任何元素绝对定位后，都变成了定位元素（默认宽高被内容撑开，且能自由设置宽高）
5. 能通过margin调整位置，但不推荐

固定定位

设置定位：

• position：fixed
• 调整位置：left、right、top、bottom

参考点：

• 相对它的视口

特点：

1. 脱离文档流，会对后面的兄弟元素、父元素有影响
2. left和right不能一起设置，top和bottom不能一起设置
3. 固定定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主
4. 任何元素固定定位后，都变成了定位元素（默认宽高被内容撑开，且能自由设置宽高）
5. 能通过margin调整位置，但不推荐

粘性定位

设置定位：

• position：sticky
• 调整位置：left、right、top、bottom

参考点：

• 离它最近的一个拥有滚动机制的组件元素

特点：

1. 不会脱离文档流，是一种专门用于窗口滚动时的新的定位方式
2. 最常用的值是top值
3. 可以和浮动一起设置，但不推荐
4. 能通过margin调整位置，但不推荐

粘性定位与相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定

定位的层级

1. 定位元素的显示层级比普通元素高
2. 如果位置发生重叠，默认情况是后面的元素会显示在前面元素之上
3. 可以通过 z-index 调整元素的显示层级
4. z-index 的属性值是数字，没有单位，值越大显示层级越高
5. 只有定位的元素设置 z-index 才有效

定位的特殊应用

让定位元素的宽高充满包含块

left、right、top、bottom设为0

让定位元素在包含块中居中

方案一

left：0

right：0

top：0

bottom：0

margin：auto

方案二

left：50%

top：50%

margin-left：-50%

margin-top：-50%

注意：该定位的元素必须设置宽高

CSS 布局

版心

• 在 PC 端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页的版心
• 版心的宽度一般是 960~1200像素之间
• 版心可以是一个也可以是多个

常用布局类名

• 顶部导航条：topbar
• 页头：header、page-header
• 导航：nav、navigator、navbar
• 搜索框：search、search-box
• 横幅、广告：banner
• 主要内容：content、main
• 侧边栏：aside、sidebar
• 页脚：footer、page-footer

重置默认样式

方案一：使用全局选择器

方案二：reset.css

方案三：normalize.css

CSS3

简介

• CSS3 是 CSS2 的升级版本，新增了很多强大的新功能
• CSS3 在未来会按照模块化的方式去发展
• CSS3 的新特性：
  • 新增了更加使用的选择器
  • 新增了更好的视觉效果
  • 新增了丰富的背景效果
  • 新增了全新的布局方法 – 弹性盒子
  • 新增了Web字体
  • 增强了颜色
  • 增加了 2D 和 3D 变换
  • 增加了动画与过渡效果
  • …

CSS3私有前缀

• -webkit-
• -moz-

CSS3新增

CSS3 新增长度单位

1. rem：根元素字体大小的倍数
2. vw：视口宽度的百分之多少
3. vh：视口高度的百分之多少
4. vmax：视口宽高中大的那个百分之多少
5. vmin：视口宽高中小的那个百分之多少

CSS3 新增颜色设置方式

• rgba
• hsl
• hsla

CSS3 新增选择器

• 动态伪类
• 目标伪类
• 语言伪类
• UI伪类
• 结构伪类
• 否定伪类
• 伪元素

CSS3 新增盒子属性

• box-sizing：怪异盒模型，可以设置盒模型的两种类型
  • content-box：width和height设置的是盒子内容区的大小
  • border-box：width和height设置的是盒子总大小
• resize：调整盒子大小，可以控制是否允许用户调节元素尺寸
  • none：不允许调整
  • both：可调节宽高
  • horizontal：可调节宽度
  • vertical：可调节高度
• box-shadow：盒子阴影

  • 语法：

    box-shadow:h-shadow v-shadow blur spread color inset;
    

  • h-shadow：水平阴影位置，必填

  • v-shadow：垂直阴影位置，必填

  • blur：模糊距离，可选

  • spread：阴影外延值，可选

  • color：阴影颜色，可选

  • inset：将外部阴影改为内部阴影，可选

• opactity：不透明度，为整个元素添加透明效果

CSS3 新增背景属性

• background-origin
  • 设置背景图的原点
  • 语法：
    1. padding-box：从padding区域开始显示
    2. border-box：从border区域开始显示
    3. content-box：从content区域开始显示
• background-clip
  • 设置背景图的向外裁剪的区域
  • 语法：
    1. border-box：从border区域开始向外裁剪
    2. padding-box：从padding区域开始向外裁剪
    3. content-box：从content区域开始向外裁剪
    4. text：背景图只呈现在文字上
• background-size
  • 设置背景图的尺寸
  • 语法：
    1. 用长度值指定背景图大小，不允许负值
    2. 用百分比指定背景图大小，不允许负值
    3. auto：背景图真实大小
    4. contain：等比缩放，使背景图片宽或高与容器的宽或高相等
    5. cover：等比缩放，直到完全覆盖容器
• background复合属性

  • 语法：

    background: color url repeat position / size origin clip
    

  • size 值必须写在position后且要加 / 分开

• 多背景图：CSS3允许设置多个背景图片

  background:url(../image/xxx) no-repeat,
             url(../image/xxx) no-repeat right top,
             url(../image/xxx) no-repeat left bottom,
             url(../image/xxx) no-repeat right bottom;
  

CSS3 新增边框属性

• 边框圆角：border-radius

  border-radius:10px;
  

• 边框外轮廓（了解）
  • outline-width：外轮廓的宽度
  • outline-color：外轮廓的颜色
  • outline-style：外轮廓的风格
    • none：无轮廓
    • dotted：点状轮廓
    • dashed：虚线轮廓
    • solid：实线轮廓
    • double：双线轮廓
  • outline-offset：设置外轮廓与边框的距离
  • outline 复合属性

    outline:50px solid blue
    

CSS3 新增文本属性

• 文本阴影：text-shadow

  text-shadow:h-shadow v-shadow blur color;
  

  • h-shadow：水平阴影位置，必填
  • v-shadow：垂直阴影位置，必填
  • blur：模糊距离，可选
  • color：阴影颜色，可选

• 文本换行：white-space

  • normal：超出边界自动换行
  • pre：原样输出
  • pre-wrap：在pre基础上，超出元素边界自动换行
  • pre-line：在pre基础上，超出元素边界自动换行，且识别文本中的换行，空格会忽略
  • nowrap：强制不换行

• 文本溢出：text-overflow

  • clip：当内敛内容溢出时，将溢出部分裁切掉
  • ellipsis：当内联内容溢出时，将溢出部分替换为 …
  • 注意，要使text-overflow生效：
    • 快容器必须显示定义 overflow 为非visible
    • white-space 为 nowrap

• 文本修饰：text-decoration，CSS3中为复合属性

  text-decoration: text-decoration-line || text-decoration-style || text-decoration-color
  

• 文本描边：-webkit-text-stroke ，仅 webkit 内核浏览器支持（了解）

CSS3 新增渐变

线性渐变

• 多个颜色之间的渐变，默认从上到下渐变

  background-image:liner-gradient(red,yellow,blue);
  

• 使用关键词设置渐变方向

  background-image:liner-gradient(to top,red,yellow,blue);
  

• 使用角度设置渐变方向

  background-image:liner-gradient(45deg,red,yellow,blue);
  

• 调整开始渐变的位置

  background-image:liner-gradient(red 50px,yellow 100px,blue 150px);
  

径向渐变

• 多个颜色之间的渐变，默认从圆心四散

  background-image:radial-gradient(red,yellow,green);
  

• 使用关键词调整渐变圆的圆心位置

  background-image:radial-gradient(to right top,red,yellow,green);
  

• 使用像素值调整圆心位置

  background-image:radial-gradient(at 100px 50px,red,yellow,green);
  

• 调整渐变形状为正圆

  background-image:radial-gradient(circle,red,yellow,green);
  

• 调整形状的半径

  background-image:radial-gradient(100px,red,yellow,green);
  

• 调整开始渐变的位置

  background-image:radial-gradient(red 50px,yellow 100px,green 150px);
  

重复渐变

repeating-linear-gradient

CSS3 web字体及字体图标

web字体

通过 @font-face 指定字体的具体位置

• 语法

  @font-face{
        
        
      font-family:'xxx';
      src:url('./xxx')
  }
  

字体图标

• 相比图片更加清晰
• 灵活性高，更方便改变大小、颜色、风格等
• 兼容性好，IE也能支持

CSS3 变化

转换属性：transform

2D变换

位移

• translateX：水平位移
• translateY：垂直位移
• translate：水平和垂直位移
• 若值为百分比，则参考自身宽高的百分比

缩放

• scaleX：水平缩放
• scaleY：垂直缩放
• scale：垂直水平缩放
• 1值为不缩放

旋转

• rotate:设置旋转角度

扭曲（了解）

• skewX：水平方向扭曲
• skewY：垂直方向扭曲
• skew：双方向扭曲

多重变换

可以同时使用一个transform来编写

transform: translate(100px,100px) scale(0.7) rotate(45deg);

多重变换时，建议最后旋转

变换原点

• 元素变换时，默认的原点是元素的中心
• 使用 transform-origin 可以设置变换的原点

3D变换

开启3D空间

元素进行3D变换的首要操作：父元素必须开启3D空间

• transform-style
  • flat：2D空间
  • preserve-3d：3D空间

设置景深

景深 —— 观察者与 z=0 平面距离

• prespective
  • none：不指定透明
  • 长度值：指定观察者与 z=0 平面的距离，不允许负值

透视点位置

即观察者位置，默认的透视点在元素的中心

• prespective-origin：设置观察者（透视点）的位置

转换属性：transform

位移

3D位移是在2D位移的基础上，让元素沿z轴位移

• translateZ：z轴位移，不能写百分比，正值向屏幕外，负值向屏幕内
• translate3d：三个参数分别为x轴，y轴，z轴，均不能省略

旋转

3D旋转是在2D旋转的基础上，让元素沿 x 轴和 y 轴旋转

• rotateX：x轴旋转
• rotateY：y轴旋转
• rotate3d：四个参数—— x ，y , z ，旋转角度，均不能省略

缩放

3D缩放是在2D缩放的基础上，让元素沿 z 轴缩放

• scaleZ：设置 z 轴方向缩放比例，1为不缩放
• scale3d：三个参数 —— x , y , z，不允许省略

多重变换

可以同时使用一个transform来编写

背部不可见

backface-visibility:hidden

CSS3 过渡

可以在不使用 flash 动画，不使用 JavaScript 的情况下，让元素从一种样式，平滑过渡为另一种样式

transiton-property

• 作用：定义哪个属性需要过渡
• 常用值：
  • none
  • all
  • 具体摸个属性名，如 width、height等

transition-duration

• 作用：设置过渡的持续时间
• 常用值：
  • 0：没有任何过渡时间
  • s 或 ms：秒或毫秒

transiton-delay

• 作用：指定开始过渡的延迟时间，单位：s 或 ms

transition-timing-function

• 作用：设置过渡的类型
• 常用值：
  1. ease：平滑过渡
  2. linear：线性过渡
  3. ease-in：慢 → 快
  4. ease-out：快 → 慢
  5. ease-in-out：慢 → 快 → 慢
  6. step-start：等同于 steps(1，start)
  7. step-end：等同于steps(1, end)
  8. steps(integer)
  9. cubic-bizie()：贝塞尔曲线

transition 复合属性

transition:1s 1s linear all;

CSS3 动画

动画基本使用

• 定义关键帧

  /* 简单方式 */
  @keyframes 动画名{
        
        
      from{
        
        }
      to{
        
        }
  }
  
  /* 完整方式 */
  @keyframes 动画名{
        
        
      0%{
        
        }
      20%{
        
        }
      40%{
        
        }
      60%{
        
        }
      80%{
        
        }
      100%{
        
        }
  }
  

• 给元素应用动画

  1. animation-name：给元素指定具体的动画
  2. animation-duration：设置动画所需时间
  3. animation-delay：设置动画延迟

动画其他属性

• animation-timing-function：设置动画的类型

• animation-iteration-count：指定动画的播放次数

  • number
  • infinite

• animation-direction：指定动画方向

  • normal
  • reverse
  • alternate

• animation-fill-mode：设置动画之外的状态

  • forward
  • backwards

• animation-play-state：设置动画的播放状态

  • running
  • paused

• animation：动画复合属性

  animation:animationName 3s 0.5s linear 2 alternate forwads
  

  animation-play-state 一般单独使用

CSS3 多列布局

作用：专门用于实现类似于报纸的布局

• column-count：指定列数
• column-width：指定列宽
• column：同时指定列宽和列数，复合属性
• column-gap：设置列边距
• column-rule-style：设置列与列之间边框的风格
• column-rule-width：设置列与列之间边框的宽度
• column-rule-color：设置列与列之间边框的颜色
• column-rule：设置列边框，复合属性
• column-span：指定是否跨列

CSS3 伸缩盒模型（弹性盒）

简介

• 2009年，w3c 提出了一种新的盒子模型 —— flexible box（伸缩盒，又称弹性盒）
• 可以轻松控制：元素分布方式、元素对齐方式、元素视觉顺序

伸缩容器、伸缩项目

• 伸缩容器：开启 flex 的元素
• 伸缩容器所有子元素自动成为伸缩项目
  • 仅子元素成为了伸缩项目
  • 任何元素成为伸缩项目都会“块状化”

主轴与侧轴

• 主轴：伸缩项目沿着主轴排列，默认是水平的，默认方向是从左到右
• 侧轴：与主轴垂直的就是侧轴，默认是垂直的，默认方向是从上到下

主轴方向

• 属性名：flex-direction
• 常用值：
  • row
  • row-reverse
  • column
  • column-reverse

主轴换行方式

• 属性名：flex-wrap
• 常用值：
  • nowrap：默认值，不换行
  • wrap：自动换行
  • wrap-reverse：反向换行

flex-flow

是一个复合属性，复合了 flex-direction 和 flex-wrap 两个属性

主轴对齐方式

• 属性名：justify-content
• 常用值：
  • flex-start：主轴起点对齐
  • flex-end：主轴终点对齐
  • center：居中对齐
  • space-between：均匀分布，两端对齐（最常用）
  • space-around：均匀分布，两端距离是中间的一半
  • spance-evenly：均匀分布，两端距离与中间距离一致

侧轴对齐

• 属性名：align-content
• 常用值：
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly
  • stretch：占满整个侧轴 —— 默认值

flex-basis

• 设置主轴方向的基准长度，会让宽度或高度失效

flex-grow

• 定义伸缩项目的放大比例，默认为 0

flex-shrink

• 定义项目的压缩比例，默认为 1

flex 复合属性

复合了：flex-grow、flex-shrink、flex-basis三个属性，默认值：0 1 auto。

• flex：1 1 auto —— auto 可拉伸，可压缩，不设置基准长度
• flex：1 1 0 —— 1 可拉伸，可压缩，基准长度为 0
• flex：0 0 auto —— none 不可拉伸，不可压缩，不设置基准长度
• flex：0 1 auto —— 0 auto – 即 flex 初始值

项目排序

• order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0。

单独对齐

• align-self 属性可以单独调整某个伸缩项目的对齐方式
• 默认值为 auto，继承父元素的 align-items 属性

CSS3 响应式布局

媒体查询

@media xxx { }

媒体类型

• all：检测所有设备
• screen：检测电子屏幕
• print：检测打印机

媒体特性

• width：检测视口宽度
• max-width：检测视口最大宽度
• min-width：检测视口最小宽度
• height：检测视口高度
• max-height：检测视口最大高度
• min-height：检测视口最小高度
• device-width：检测设备屏幕宽度
• max-device-width：检测设备屏幕最大宽度
• min-device-width：检测设备屏幕最小宽度
• orientation：检测视口的旋转方向（是否横屏）
  • portrait：视口纵向，高度大于等于宽度
  • landscape：视口横向，宽度大于高度

媒体运算符

• and：并且
• , 或 or：或
• not：否定
• only：肯定

常用阈值

• 超小屏幕（< 768px）
• 中等屏幕（> 768px & < 992px）
• 大屏幕（> 992px & < 1200px）
• 超大屏幕（> 1200px）

@media screen and (max-width:768px){
    
    
    ...
}

BFC

• Block Formatting Context（块级格式上下文），可以理解成元素的一个特异功能
• 默认情况下 BFC 处于关闭状态，当元素满足了某些条件后会被激活
• 即 元素开启了BFC

开启BFC能解决什么问题？

1. 子元素不会再产生 margin 塌陷问题
2. 自己不会被其他浮动元素所覆盖
3. 即便子元素浮动，元素自身高度也不会塌陷

如何开启BFC

• 根元素 —— html
• 浮动元素
• 绝对定位、固定定位
• 行内块元素
• 表格单元格
• overflow 值不为 visible 的块元素
• 伸缩项目（弹性盒子）
• 多列容器
• column-span 为 all 的元素
• display值为 flow-root