CSS笔记

CSS笔记
-@规则
1. @charset 设置样式表编码
2. @import 导入其他样式文件(模块化)
3. @meida 媒体查询(移动端开发)
4. @font-face 自定义字体
自定义字体
1. 到www.iconfont.cn阿里妈妈图标库选图标放入购物车
2. 下载代码，解压
3. 将后缀为.eot .svg .ttf .woff .woff2的文件复制到项目中
4. 打开压缩包中的html文件找到下面的@font-face代码和.iconfont代码复制到css文件中
5. 修改@font-face代码url中的路劲为自己刚才3中文件的路径
6. 根据解压包中html文件使用字体
选择器

常见选择器
- id 选择器，每个 id 只能对应一个标签， id 是一对一的关系
- class 选择器，多对多的关系
- 标签选择器
- 通配符选择器
- 属性选择器
选择器权重
- !important Infinity
- 行间样式 1000
- id 100
- class|属性|伪类 10
- 标签|伪元素 1
- 通配符 0
组合选择器
- 父子选择器（空格分隔）
  
  div span{}
- 直接子元素选择器（只选择下面一级的元素）
  
  div>span{}
- 并列选择器（不能都是标签选择器）
  
  div.num{}
- 分组选择器（多个标签相同操作）
  
  div,span,p{}
- 组合选择器的权重
  
  同一行权重相加（不管是并列，还是派生选择器）
- 权重相同
  
  相同 css 文件；写在后面的其作用
  
  不同 css 文件：先导入的起作用
- 子节点选择器
```
.mid_panel>div:nth-of-type(5){
    /*选中 mid_panel 下第5个div子节点*/
}
```
hover
- hover 本身有权重，只有权重大的时候才能其作用
- hover 默认修改本身元素样式，可以在后面添加子元素修改子元素样式
伪元素
- :first-line
  
  用于设置文本首行样式
- :first-letter
  
  用于设置文本首字母样式
- :before
  
  元素内容前插入新内容
- :after
  
  元素内容之后插入新内容
- :first-child
  
  第一子元素
```
/*选中伪元素*/
元素::after{
    content: "内容"	/*伪元素默认为行级元素*/
}
```
布局

层模型

position
- absolute
  
  脱离文档流进行定位，根据最近的有定位的父级进行定位，如果没有，就相对于文档定位（一般用于定位）
- relative
  
  保留原来位置进行定位，相对于自己原来的位置进行定位（一般用于父级参照物），不会使元素脱离文档流
- fixed
  
  固定定位，把元素固定到浏览器某个位置，不会随着浏览器滚动为改变
- static（默认）
  
  正常文档排列方式
盒模型
- 标准盒模型
  
  总宽度 = border(左右) + width + padding（左右）
  
  总高度 = border（上下） + height + padding（上下）
  - 盒子壁 border
  - 内边距 padding
  - 盒子内容 width * height
  - 外边距 margin(margin 不算到盒子大小上)
- 怪异盒模型（IE盒模型）
  
  总宽度 = width
  
  总高度 = height
  
  内容区就是除去 padding 和 border 的区域
标准盒模型 --> 怪异盒模型： box-sizing = border-box

display
- inline 行级元素
  内容决定元素所占位置，不能通过改变 css 改变宽高
  
  span strong em a del
- block 块级元素
  
  独占一行，可以通过 css 改变宽高
  
  div p ul li ol form address
- inline-block
  
  内容决定大小，可以改变宽高
  
  img
  
  这些属性可以通过 css 的 display 改变
注意：行级元素只能嵌套行级元素（a 标签不能套 a 标签）

块级元素能嵌套任何元素，但是（p 标签不能嵌套块级元素）

浮动

让元素站队，left 是从左排， right 是从右排，空间不够时换行
- 浮动流：浮动元素产生了浮动流
  - 所有产生了浮动流的元素，块级元素看不到他们（块级元素会往上走）
  - 产生了 bfc 的元素和文本类的属性的元素以及文本都能看到浮动元素
- 清除浮动流（利用伪元素选中逻辑最后）
```
父级元素::after{
    content: "";
    display: block;
    clear: both;		//清除左右两边的浮动流（必须是块级元素）
}
```
flex 弹性布局

为盒子模型提供最大的灵活性
- 基本使用
  - 任何容器都可使用 flex 布局
    
    .box{ display: flex; }
    
    行内元素也能使用 flex 布局
    
    display: inline-flex
    
    webkit 内核浏览器，必须加上 -webkit 前缀
    
    display: -webkit-flex;
    
    注
    
    设置 flex 布局后，子元素的 float、clear 和 vertical-align 属性将失效
- 基本概念
  
  设置了 flex 布局的元素称为 flex container(容器)，所有子元素称为 flex ite(项目)
- 容器属性
  - flex-direction：决定主轴方向（项目排列顺序）
    
    row(默认)
    
    row-reverse
    
    column
    
    column-reverse
  - flex - wrap：换行
    
    默认情况下项目都排在一条线上，如果超出容器，则减少项目宽度，该属性定义如何换行
    
    nowrap：不换行
    
    超出容器时，缩小 item 的 main-size 或 cross-size
    
    wrap：换行，第一行在上方
    
    wrap-reverse：换行，第一行在下方
  - flex-flow：是 flex-direction 和 flex-wrap 的简写。默认值为 row nowrap
    
    flex-flow: column wrap
  - justify-content：定义项目在主轴上的对齐方式
    
    flex-start(默认)
    
    flex-end
    
    center
    
    space-around
    
    space-between
    
    space-evenly
    
    margin 指的是 item 的 margin
  - align-items
    
    flex-start(默认)
    
    flex-end
    
    center
    
    baseline
    
    项目第一行文字基准线对齐
  - align-content
    
    定义多根轴线对齐方式，若只有一根轴线，该属性不起作用
    
    flex-start：与交叉轴起点对齐
    
    flex-end：与交叉轴终点对齐
    
    center
    
    stretch(默认值)：占满整个容器
    
    space-between
    
    距离关系请参照 justify-content
    
    space-around
    
    space-evenly
- 项目属性
  - order
    
    定义项目排序顺序，数值越小，排列越靠前，默认为 0
  - flex-grow
    
    定义项目放大比例，默认为 0 ，即如果存在剩余空间也不放大，如果所有项目 flex-grow 的属性都为 1，则它们等分剩余空间，如果一个项目为2，其他为1，则占据空间大1倍
    
    注：如果没有剩余空间，怎么设置都没用
  - flex-shrink
    
    定义了项目的缩小比例，空间不足时将项目缩小。默认为 1，各项目等比例缩小，0不缩小
  - flex-basis
    
    分配多余空间之前，项目占据的主轴空间(main size)默认为 auto (即项目本来大小)，也可设置为固定值，项目占据固定大小(设置了固定值，将不受 grow 和 shrink 的影响)
  - flex
    
    flex-grow，flex-shrink，flex-basis 的简写
  - align-self
    
    允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性，默认为 auto(继承父类元素属性)
grid 网格布局

将网页划分成一个个网格，可以任意组合不同的网格

flex是轴线布局，只能指定"项目"针对轴线的位置，可以看做是一维布局。flex通过项目的 flex 属性只能实现单行的栅格布局无法实现多行栅格布局

grid是将容器划分为"行"和"列"，产生单元格，然后指定"项目"所在单元格，可以看作二维布局
- 容器属性
  - display: grid
    
    使用grid布局
  - grid-templage-columns
    
    grid-templage-rows
    
    指定行与列构建网格
    
    .container { 300px; height: 300px; display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; }
    
    上述代码将容器分为三行三列的九宫格
    
    也可以使用百分比
    
    .container { display: grid; grid-template-columns: 33.3% 33.3% 33.3%; grid-template-rows: 33.3% 33.3% 33.3%; }
    
    repeat()函数
    
    重复写同样的值的时候可以使用该函数，与上面的效果是一样的
    
    grid-template-columns: repeat(3, 33.33%); grid-template-rows: repeat(3, 33.33%);
    
    grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px);
    
    auto-fill关键字
    
    单元格大小固定，容器大小不确定的时候，如果希望每一行每一列容纳尽可能多的单元格
    
    .container { display: grid; grid-template-columns: repeat(auto-fill, 100px); }
    
    fr关键字
    
    比例关系
    
    .container { display: grid; grid-template-columns: 1fr 1fr; /*比例为1:1*/ }
    
    fr与绝对单位结合使用
    
    .container { display: grid; grid-template-columns: 150px 1fr 2fr; }
    
    minmax()函数
    
    范围
    
    /*列宽不大于1fr，不小于100px，基于单元格里面的内容*/ grid-template-columns: 1fr 1fr minmax(100px, 1fr);
    
    auto关键字
    
    浏览器自己决定长度
    
    /*等于该行的剩余宽度*/ grid-template-columns: 100px auto 100px;
    
    网格布局中加入网格线名称
    
    用[]指定每一根网格线的名字，方便后面的使用
    
    .container { display: grid; grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4]; }
  - grid-row-gap
    
    grid-column-gap
    
    grid-gap
    
    设置行列间距
    
    .container { grid-row-gap: 20px; grid-column-gap: 20px; /*等价于 grid-gap: 20px 20px*/ }
    
    grid-gap是上面两个属性的合并简写属性
    
    grid-gap:<row-gap> <column-gap>
    
    如果只写一个值那么后面那个值等于前面一个值
  - grid-template-areas
    
    .container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-template-areas: 'a b c' 'd e f' 'g h i'; }
    
    划分出来的九个区域分别命名为 a 到 i
    
    grid-template-areas: 'a a a' 'b b b' 'c c c'; /*九个单元格划分为 a,b,c 3个区域*/
    
    注意：区域的命名会影响网格线的命名，每个区域的起始网格线会自动命名为 区域名-start ，终止网格线自动命名为 区域名-end
  - grid-auto-flow 属性
    
    放置顺序
    
    column(默认) 先行后列
    
    row 先列后行
    
    row dense 某些项目指定位置后剩余元素怎么放置
    
    column dense
  - justify-items
    
    align-items
    
    place-items:<justify-items> <align-items>
    
    单元格内容的水平垂直位置
    
    start
    
    end
    
    center
    
    streth(默认) 拉伸，占满整个单元格
  - justify-content
    
    align-content
    
    place-content:<justify-content> <align-content>
    
    整个内容区域在容器里面的水平位置
    
    start
    
    end
    
    center
    
    streth
    
    space-around
    
    space-between
    
    space-evenly
  - grid-auto-columns
    
    grid-auto-rows
    
    浏览器自动创建的多余网格的列宽和行高，当元素被定义在网格外时
    
    #container{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-auto-rows: 50px; } .item { font-size: 2em; text-align: center; border: 1px solid #e5e4e9; } .item-1 { background-color: #ef342a; } .item-2 { background-color: #f68f26; } .item-3 { background-color: #4ba946; } .item-4 { background-color: #0376c2; } .item-5 { background-color: #c077af; } .item-6 { background-color: #f8d29d; } .item-7 { background-color: #b5a87f; } .item-8 { background-color: #d0e4a9; grid-row-start: 4; grid-column-start: 2; } .item-9 { background-color: #4dc7ec; grid-row-start: 5; grid-column-start: 3; }
- 项目属性
  - grid-column-start
    
    grid-column-end
    
    grid-row-start
    
    grid-row-end
    
    通过单元格四周的网格线定义单元格的位置和大小
    
    .item-1 { grid-column-start: 2; grid-column-end: 4; }
    
    上面的代码指定一号项目的左边框是第二跟垂直的网格线，右边框是第四根垂直网格线
    
    除了用下标指定还可以用网格线名称指定
    
    .item-1 { grid-column-start: header-start; grid-column-end: header-end; }
    
    span关键字
    
    表示跨越的网格数
    
    /*两个样式效果一样*/ .item-1 { grid-column-start: span 2; } .item-1 { grid-column-end: span 2; }
    
    水平跨越两个网格
  - grid-column: <start-line> <end-line>
    
    grid-row: <start-line> <end-line>
  - grid-area
    
    指定项目放在哪个区域
    
    .item-1 { grid-area: e; }
    
    将 1 号项目放在 e 区域
  - justify-self
    
    align-self
    
    place-self：<justify-self> <align-self>
    
    设置单元格内容的水平垂直位置，与justify-items用法完全一致但只作用于单个项目
    
    start
    
    end
    
    center
    
    stretch
margin 的两个 bug
- margin 塌陷
  
  子元素相对于父元素的 margin-top 不起作用，子元素和父元素的 margin-top 会导致整体移动，取 margin-top的最大值。
  
  解决：1、给父级加上 border-top
  
  2、bfc: block format context
  - 如何触发一个盒子的 bfc
    
    position: absolute
    
    display: inline-block
    
    float: left/right
    
    overflow: hidden
    
    （使用哪个，具体分析）
- margin 合并
  
  正常来说两个元素的 margin 是分开计算的，即两个元素的距离 = margin1 + margin2
  
  但两个块级元素的 margin 是合并的，距离 = max(margin1, margin2)
  
  解决：(1) 将一个元素或两个元素都放进 bfc 的父级中（不推荐）
  
  (2) 不解决，通过数学计算好距离（推荐）
文本类元素的特点

文本类元素包括 inline 和 inline-block
- 当两个文本之间有空格，换行符时，文本元素之间会有分隔符
  
  每个 img 换行的话图片之间会存在一个分隔符，这是带有 inline 属性的标签都有的文字特征
  - 所有 img 之间都不用空格和换行
  - 将 img 标签改为 block
- 当文本元素里有文字后，后面的文字与该文字底对齐，没有文字就与容器底对齐
- vertical-align: middle/top/bottom/px; 文本元素对齐线
顶部固定导航脱离文档流问题

设置了 fixed 会脱离文档流，下面的元素会往上走，可以设置 border 将元素挤下来（如果设置的是 padding 滑动条不会被挤下来）

滑动条出现在容器内部

设置属性 overflow: auto

CSS中常见的单位
- px ——像素、绝对单位
- pt ——磅，绝对单位
- em ——相对单位，相对于父元素字体大小
- rem ——相对根节点 html 字体大小计算，兼容性：chrome/firefox/IE9+
- vw ——视窗宽度，范围 0-100
- vh ——视窗高度
- vmin ——min(vw,vh)
- vmax ——max(vw,vh)
- in ——英寸，绝对单位
- ch ——数字0的宽度
position实现水平垂直居中

父级必须有定位属性
```
.box{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 50%)
}
```
css初始化
```
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
```
vertical-align

图片或表单与文字垂直居中对齐（行内元素或行内块元素）
- 默认基线对齐
- middle：中线对齐
- bottom：底线对齐
- top：顶线对齐
相邻边框

可以看到两个相邻的边框会让边框变粗，这种变粗大多时候是不需要的

解决：margin负值的妙用

只需要给 margin-left 添加一个与边框大小相同的值即可，这样后面的盒子就会把前面的边框挡住

但如果我们给盒子设置hover样式的话，由于右边的边框被挡住了，所以就没有hover样式

解决：
1. 如果每个盒子都没有相对定位，则给hover盒子设置相对定位
2. 如果每个盒子都有相对定位，则给hover盒子设置更高的z-index层级
文字环绕效果

给左边的盒子设置 float:left 即可

text-align 实现布局

text-align能对盒子内的所有行内元素和行内块元素实现居中、左、右布局

样式

伪元素使用自定义字体

content里面放入十六进制编码

&#xe61a --> e61a
```
.box::after{
    content: 'e61a';
    font-family: 'iconfont'!import;
}
```
write-space
- nowrap：不换行
background
- background-image 设置背景图片
  - url("图片路径")
- background-repeat 图片不能铺满容器时是否重复出现
  - repeat(默认重复)
  - no-repeat
- background-size 设置图片大小
  - px px 直接设置宽高，也可以只设置宽，高按比例缩放
  - % % 百分比设置宽高
  - cover 图片按比例铺满整个容器（可能图片会丢失一部分）
  - contain 图片按比例铺满整个容器（图片完整出现，多的地方留白）
- background-position 图片在容器中的位置
  - x y
  - % %
  - left top
  - left bottom
  - ...
  - center center
- 渐变
  
  线性渐变
  - background-image: linear-gradient(方向，开始的颜色，结束的颜色)
    
    方向： to bottom（默认）；to right； to left ； to top
超出容器．．．
- 单行文本超出容器 ...
```
white-space: nowrap; /*不换行*/
overflow: hidden;	/*溢出部分隐藏*/
text-overflow: ellipsis; /*溢出部分...代替*/
```
- 多行文本超出容器 ...
  
  手动 ...
头部图标
- 制作 ico 图片
  
  通过线上转为 ico 图片
- 将 ico 图片放进项目中
- 通过<link rel="icon" href="icon图片路径">
图片代替文字

作用：当网络环境很差的时候，浏览器会屏蔽掉网页的 css 和 js 只加载 html ，通过图片代替文字，这不会影响网站的主要功能的实现
- 缩进 + 单行 + 超出隐藏
```
text-indent: 99999px;
white-space: nowrap;
overflow: hidden;
```
- padding 撑开图片
```
height: 0;
padding-top: 100px;
overflow: hidden;
```
颜色
- 颜色的三种表示
  - 直接写英文单词 red blue green
  - 十六进制
    
    #ff5000 #fff (aabbcc -> 缩写abc)
  - 二进制
    
    rgb(255,0,0)
- 透明度
  - rgba()
    
    a: 0~1（0：完全透明 1：完全不透明）
  - opacity: 0~1
样式的继承

样式继承是指父类设置了样式，子类也会有样式（仅对于文字样式）

样式继承的优先级低于所有选择器的优先级，只有当元素没有设置样式的时候，样式继承才能起作用

圆角 border-radius
- 每个盒子有四个角
  
  border-radius: 上左上右下右下左
  
  border-top-left-radius 设置左上圆角
- 圆角的值
  
  px 该 px 为边的一半时也是一个圆
  
  % 50% 表示一个圆
三角盒子

边角均分原理
- 等腰三角形
```
.triangle{
     0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
    border-left: 100px solid transparent;
    border-bottom: 0 solid transparent;
}
```
- 直角三角形
```
.triangle{
             0;
            height: 0;
            border-top: 100px solid transparent;
            border-right: 50px solid #eee;
            border-bottom: 0 solid transparent;
            border-left: 0 solid transparent;
        }
```
遮罩层

我们写html页面是经常会有这种需求：点击一个按钮弹出一个框，这个框存在时不能点击其他地方，只有关闭这个框才能点击其他地方。这个时候就需要用到遮罩层

遮罩层就是利用一个长宽为浏览器长框的 div ，将这个div置于弹出框之下，其他元素之上，这个遮罩层与弹出框同步出现，这样弹出框出现的时候，遮罩层的存在使我们无法点击其他地方
- 例子
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        /*遮罩层*/
        .bgdiv{
            background-color:#e3e3e3;
            position:absolute;
            z-index:99;
            left:0;
            top:0;
            100vw;
            height:100vh;
            opacity:0.5;
            filter: alpha(opacity=50);
            -moz-opacity: 0.5;

        }
        /*弹出框*/
        .contain{
             200px;
            height: 200px;
            z-index: 100;
            background: red;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="state = !state">弹出</button>
        <div class="contain" v-show="state">弹出框</div>
        <div class="bgdiv" v-show="state"></div>
    </div>

    <script src="js/vue.js"></script>
    <script>
        let vue = new Vue({
            el: '#app',
            data: {
                state: false
            },
            methods: {

            }
        })
    </script>
</body>
</html>
```
修改 placeholder 样式
```
input::-webkit-input-placeholder{
    color: #eee;
    ...
}
```
css初始化

京东的初始化
```
* {
    margin: 0;
    padding: 0
}

/*设置不斜体*/
em, i {
    font-style: normal
}

/*删除列表的点*/
li {
    list-style: none
}

img {
    /*照顾低版本浏览器，如果图片外面包含了链接会有边框的问题*/
    border: 0;
    vertical-align: middle
}

/*按钮鼠标变成小手*/
button {
    cursor: pointer
}

/*删除a标签默认颜色和下划线*/
a {
    color: #666;
    text-decoration: none
}

/*a标签hover样式*/
a:hover {
    color: #c81623
}

/*字体*/
button, input {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "5B8B4F53", sans-serif
}

body {
    /*抗锯齿*/
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "5B8B4F53", sans-serif;
    color: #666
}

.hide, .none {
    display: none
}

/*清除浮动*/
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}
```
图片模糊filter滤镜
```
/*blur是一个函数，小括号里面数值越大，图片越模糊，注意数值要加 px 单位*/
filter: blur(5px)
```
calc属性计算函数
```
 calc(100%-20px)
```
精灵图

将网页中的一些小背景图整合在一张大图中，这样修只需要向服务器请求一次（缓解服务器压力）

通过 background-position 实现

往上往左移动为负值

角框

伪元素设置边框实现

动画

animation

与过渡相比：更多变化、更多控制、连续自动播放

元素可以添加多个动画（用逗号隔开）
```
.panrun{
    animation: runpan 5s linear infinite;	/*动画规则 动画时间 线性动画 无限循环*/
}

/*定义动画规则*/
@keyframes runpan{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
```
animation 是一个简写属性，用于设置六个动画属性
- animation-name（必须）
  
  规定需要绑定到选择器的 keyframe 名称
  - @keyframe动画序列
    
    0%是动画的开始，100%是动画的完成。这样的规则就是动画序列
    
    在@keyframe中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
    
    动画使元素从一种样式组件变化为另一种样式的效果。可以改变任意多的样式任意多次数
    
    关键词'from'和'to'等同于0%和100%
- animation-duration（必须）
  
  规定完成动画所花费的时间，以 s 或 ms 计，默认0
- animation-timing-function
  
  规定动画的速度曲线，默认'ease'
  
  step速度曲线
  
  step(10)分步完成动画
- animation-delay
  
  规定在动画开始之前的延迟，默认0
- animation-iteration-count
  
  规定动画应该播放的次数，默认为1，infinite代表无限循环
- animation-diretion
  
  规定动画下一周期逆向播放，默认'normal'，'alternate' 逆播放
- animation-play-state
  
  规定动画是否正在运行或暂停。默认是'running'，还有'pause'
- animation-fill-mode
  
  规定动画结束后状态，保持'forward'；回到起始位置'backwards'
简写形式

animation: 动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态

不包含 animation-fill-mode

animation: move 2s linear 0s 1 alternate forwards

除了动画名称和持续时间必须写，其他都可以省略

Animate.js

transition

谁做过渡，给谁加这个属性
- 使用规范
  
  transition: 要过渡的属性花费时间运动曲线合适开始
  - 过渡属性
    
    宽度高度，背景颜色，内外边距都可以（多个属性逗号分隔）。如果想要所有的属性都变化过渡，写一个 all
  - 花费时间
    
    单位是秒（必须写单位）
  - 运动曲线（可以省略）
    
    默认ease
  - 何时开始（可以省略）
    
    默认0s
- EX
```
.box{
    transition: width 1s, height 1s
}
```
transform

2d转换，可以实现元素的位移，旋转，缩放
- translate：移动
  
  正值向右向下
  
  负值向左向上
```
translate(x,y)
translateX(n)
translateY(n)
```
  注：
  1. 不会影响其他元素的位置
  2. 可以使用绝对单位px，和百分比（相对于自身元素）
  3. 对行内标签没有效果
- rotate：旋转
  
  transform: rotate(ndeg)
  
  设置中心点
```
.box{
    transform-origin: left bottom;	/*方位名词*/
    transform-origin: 50% 50%;		/*百分比*/
    transform-origin: 50px 50px;    /*像素*/
}
```
  注：
  1. 单位是deg，代表度数
  2. 正值表示顺时针，负值代表逆时针
  3. 默认旋转中心点时元素的中心点
- scale：缩放
  
  transform: scale(x,y)
  
  transform: scale(n) 等比例缩放
  
  注意：
  1. x,y是数字，不加单位，是倍数的意思
  2. 不会影响其他盒子
  3. 可以设置缩放中心点
- 2D转换综合写法
```
transform: translate() rotate() scale()
```
  注：顺序会影响最终效果
3D转换

X轴：水平向右(右正左负)

Y轴：垂直向下(下正上负)

Z轴：垂直于屏幕(外正里负)
- 3D位移
  
  translateX
  
  translateY
  
  translateX
  
  translate3d(x,y,z)
- 3D旋转
  
  rotateX
  
  rotateY
  
  rotateZ
  
  rotate3d(x,y,z) 矢量
perspective：给父级添加这个属性才能产生3D效果(近大远小)，模拟人类眼睛，该属性的值就是这只眼睛到屏幕的值，值越大平面成像越大，值越小平面成像越小

transform-style：控制子元素是否开启三维空间。transform-style: preserve-3d

案例
- 图片放大效果
- 边框重叠效果
- 进度条效果
- 图片模糊效果
- 三角形效果
- 热点图效果
- 打字机效果
- 奔跑效果
- 翻转盒子
- 3D导航栏
- 旋转木马照片墙
相关阅读:
第九篇：网络编程
 第十篇：并发编程
 Python-GIL 进程池线程池
 Python-生产者消费模型线程
 Python-互斥锁进程间通讯
 第八篇：异常处理
 第六篇：面向对象
 第四篇：模块与包
 【转】英语中的并列连词，只知道 and 和 but？11组并列连词，一篇搞定！
【转】英语中的从属连词，28个，一篇搞定（句子结构2）
原文地址：https://www.cnblogs.com/angle-yan/p/13855921.html

-@规则

自定义字体

选择器

常见选择器

选择器权重

组合选择器

hover

伪元素

布局

层模型

盒模型

display

浮动

flex 弹性布局

grid 网格布局

margin 的两个 bug

文本类元素的特点

顶部固定导航脱离文档流问题

滑动条出现在容器内部

CSS中常见的单位

position实现水平垂直居中

css初始化

vertical-align

相邻边框

文字环绕效果

text-align 实现布局

样式

伪元素使用自定义字体

write-space

background

超出容器．．．

头部图标

图片代替文字

颜色

样式的继承

圆角 border-radius

三角盒子

遮罩层

修改 placeholder 样式

css初始化

图片模糊filter滤镜

calc属性计算函数

精灵图

角框

动画

animation

Animate.js

transition

transform

3D转换

案例