CSS3

CSS3动画

标签

• figure标签
  用于规定独立的流内容（图像、图表、照片、代码等等）
• figcaption标签
  与figure配套使用，用于定义figure元素的标题

transform以及transition

Transform为CSS3属性，主要用于元素的变形处理
属性：translate Rotate scale skew

• translate
  指定对象的2D translation（2D平移）

  translate(10px,10px)
  

• Rotate
  指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义

  Rotate(90deg),transform-origin:0 0;
  

• scale
  指定对象的2D scale（2D缩放）

  scale(0.5,0.5)
  

• skew
  指定对象skew transformation（扭曲斜切）

  skew(50deg,20deg)
  

transition为CSS3属性，主要用于元素的过渡动画处理
属性：property duration timing-function delay

• property ：检索或设置对象中的参与过渡的属性
• duration：过渡动画的持续时间
• timing-function：检索或设置对象中的过渡的动画类型
• delay：检索或设置对象延迟过渡的时间

Grid布局

Grid Contatiner

网格容器
元素应用display:grid，它是所有网格项的父元素

Grid Item

网格项
网格容器的子元素

<div class="container">
	<div class="item">one</div>
	<div class="item">two</div>
	<div class="item">three</div>
	<div class="item">four</div>
</div>

<style>
	.container{
		display:grid;
	}
</style>

Grid Track

网格轨道
两个相邻的网格线之间为网格轨道

Grid Cell

网格单元
两个相邻的列网格线和两个相邻的行网格线组成的是网格单元

Grid Area

网格空间
四个网格线包围的总空间

单位

fr
剩余空间分配数
用于在一系列长度值中分配剩余空间，如果多个已制定了多个部分，则剩下空间根据各自的数字按比例分配
gr
网格数（暂未采纳）

容器属性

display
属性规定元素应该生成的框的类型

grid
生成块级网格

inline-grid
生成行内网格

subgrid
目前所有浏览器都不兼容
如果网格本身是网格项（嵌套网格容器），此属性继承父属性网格大小

当元素设置了网格布局column float cleat vertical-align属性无效

---

grid-template
以空格来分隔的多个值来定义网格的列和行

grid-template-columns 列方向

grid-template-rows 行方向

属性值

• 轨道大小 track-size：可以使用css长度（px、em等）、百分比、或用分数（用fr单位）
• 网格线名字 line-name：可以选择任何名字

.container{
	grid-template-columns:40px 50px auto 80px 30px;
	grid-template-rows:20px 15px auto;
}
//3行5列

.container{
	grid-template-columns:[no1] 40px [no2] 50px [no3 nn] auto [no4] 80px [no5] 30px;
	grid-template-rows:20px 15px auto;
}
//竖线取名
//名称可取多个 空格分隔

---

grid-template-areas
通过引用grid-template属性指定的网格区域的名称来定义网络模板

• grid-area-name：使用grid-area属性设置的网格区域的名称
• .：点号代表一个空网格单元
• none：没有定义网格区域

<style>
    grid-template-areas:
            "na1 na na na2 na2"
            "na1 na na na2 na2"
            "na1 na na na2 na2"
            "na1 na4 na4 na2 na2"
            "na1 na4 na4 na2 na2"
    ;
</style>

使用grid-areas:<name>来引用区域

---

gap
指定网格 线的大小，可以想象为列/行之间的间距的宽度

• grid-column-gap：列间距
• grid-row-gap：行间距

items
网格对齐

• justify-items 沿着行轴对齐网格内的内容
• align-items：沿着列轴对齐网格中的内容

属性：
start：内容与网格区域的左端对齐
end：内容与网格区域的右端对齐
center：内容位于网格区域的中间位置
stretch：内容宽度占据整个网格区域的中间位置（默认值）

content
对齐网格的线的间距（我感觉没用 所以没学）

grid-auto
同上

CSS函数

repeat()
重复
跟踪列表的重复片段，允许大量显示重复模式的列或行以更紧凑的形式编写

grid-template-columns:1fr 1fr 1fr 1fr 1fr;
//简写
grid-template-columns:repeat(5,1fr);