CSS3复习

参考手册：css.doyoe.com/

1. E:focus
   设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式
2. E:not(s)
   匹配不含有s选择符的元素E

.demo li:not(:last-child) {
	border-bottom: 1px solid #ddd;
}
上述代码的意思是：给该列表中除最后一项外的所有列表项加一条底边线

3. E:first-of-type
   匹配父元素下第一个类型为E的子元素

<div class="demo">
	<span>span1</span>
	<p>
		<span>span2</span>
		<span>span3</span>
	</p>
	<span>span4</span>
</div>
如上HTML，如果我想匹配其中的第1个span，代码如下：

.demo span:first-of-type { color: #f00; }
结果span1和span2都会被命中，因为span1和span2分属不同的父元素，并且都是其父元素的首个span元素，所以都会被命中

4. E:nth-child(n)
   匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。E:nth-child(n)会选择父元素的第n个子元素E，如果第n个子元素不是E，则是无效选择符，但n会递增。

<div>
	<p>第1个p</p>
	<p>第2个p</p>
	<span>第1个span</span>
	<p>第3个p</p>
	<span>第2个span</span>
	<p>第4个p</p>
	<p>第5个p</p>
</div>

p:nth-child(3){color:#f00;}
这是会命中第3个p么？如果你这么认为那就错了，这条选择符就不会命中任何一个元素。

p:nth-child(4){color:#f00;}
这时你以为会命中第4个p，但其实命中的却是第3个p，因为它是第4个子元素

5. E:nth-of-type(n)
   匹配父元素的第n个子元素E

<div class="demo">
	<p>p1</p>
	<p>p2</p>
	<span>span1</span>
	<p>p3</p>
	<span>span2</span>
</div>

.demo p:nth-of-type(3) { color: #f00; }
可以看到此时 .demo 的第4个子元素会被命中，因为 .demo 的第4个子元素才是它的第3个p子元素

6. E:checked
   匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
7. E::placeholder 用于改变表单输入框占位符的属性
8. text-shadow: 5px 5px 5px red;
   文本阴影
   第一个值 水平偏移量
   二 垂直偏移量
   三 模糊度
   四 颜色
9. text-overflow: ellipsis;
   文本溢出部分替换为...
10. white-space: nowrap;
    强制文本一行展示
11. box-shadow: 10px 10px 5px 20px #000;
    边框阴影
    第一个值 左右的偏移量 +右 -左
    第二个值 上下偏移量 + 下 -上
    第三个值 阴影模糊程度
    第四个值 外延值 （扩散的程度）
    最后一值 阴影颜色
12. background-size:
    背景图的尺寸
    cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
    contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
13. background-origin:
    背景图片位置
    border-box 从边框开始展示背景图片
    padding-box 从内边距开始展示背景图片
    content-box 从内容开始展示背景图片
14. background-clip:border-box;
    从border区域（不含border）开始向外裁剪背景

    

    
    background-clip:padding-box;
    从padding区域（不含padding）开始向外裁剪背景

    

    
    background-clip:content-box;
    从content区域开始向外裁剪背景
    

    

    
    background-clip:text;
    从前景内容的形状作为裁剪区域向外裁剪背景

    

15. box-sizing 盒模型
    border-box 怪异盒模型 element width = width
    content-box 标准盒模型 element width = width + padding + border
16. justify-content:
    水平方向的对齐方式
    flex-start
    flex-end
    space-between
    space-around
    center
17. flex-direction: row | row-reverse | column | column-reverse
    row：
    主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。

    

    
    row-reverse：
    对齐方式与row相反。

    

    
    column：
    主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。

    

    
    column-reverse：
    对齐方式与column相反。

    

18. 变换 transform:
    rotate( ) 旋转
    translate( ) 位移
    scale( ) 缩放

      transform: rotate(-30deg); 

      transform: translateY(100px); 
      
      transform: scale(0.5); 

19. 变换的原点
    transform-origin: 0 0;
20. 动画 animation:

#div1{
      width: 200px;
      height: 200px;
      background: red;

      animation: move 2s linear infinite backwards;
      <! 名字、时间、过渡类型（默认ease、 次数、对象状态 ---->
      <! 关于动画状态： 
        none：默认值。不设置对象动画之外的状态
        forwards：设置对象状态为动画结束时的状态
        backwards：设置对象状态为动画开始时的状态
        both：设置对象状态为动画结束或开始的状态---->
    }

    动画的细节（从... 到...）
    @keyframes move{
      0% {
        width: 200px;
      }
      50% {
        width: 350px;
      }
      100%{
        width: 600px;
      }
    }

21. 过渡 transition

transition:
		border-color .5s ease-in .1s,
		background-color .5s ease-in .1s,
		color .5s ease-in .1s;

22. transform-style：preserve-3d ;
    指定子元素定位在三维空间内

23. 关于旋转立方体及旋转 juejin.cn/post/684490…