VOLANTIS 2.6.6

CSS3学习笔记

CSS33只是版本号，目前主流浏览器都支持了，IE10以后也开始全面支持CSS3。

  • CSS3提供了更加强大的且精准的选择器，提供多种背景填充方案，可以实现渐变颜色，可以改变元素的形状，角度等。可以加阴影效果，报纸布局，弹性盒子，ie6混杂模式的盒模型，新的计量单位，动画效果等
    但CSS3并不是所有属性都通过了W3C标准，要查兼容性手册。
CSS3的特性

  1. border-radius –圆角，实现一个叶子的形状，画一个半圆

    1
    100px 100px 0 0；

  2. box-shadow 盒子的阴影 box-shadow x代表偏移量，y代表偏移量， ，阴影模糊半径，阴影扩展半径，阴影颜色，投影方式
    text-shadow
    ==不过shodow都是性能杀手==

  1. 线性渐变 语法：linear-gradient[方向，颜色，颜色，颜色…]

  2. 径向渐变 语法：

    1
    radial-gradient(shape at position ,color[percent ] ,color)

  3. shape ：放射的形状，可以为原型circle 或拖延ellipse,position 为圆心位置

  4. border-image

  5. border-origin:content-box / border-box / padding-box

  6. background-clip :

    1
    border-box / padding-box /conteent-box  /no-clip

    参数分别从边框，或内填充，或内容区域向外剪裁背景

  7. text :background-clip :text;

  8. background-size :auto |<长度值>|<百分比>

  9. background-position: center

CSS3 选择器：
属性选择器
  1. E[att ^= “val” ]{….} 选择匹配元素E，且E元素定义了属性att ，其属性值以val 开头的任何字符串
  2. E[att $= “val”]{….} 选择匹配元素E ，且E元素定义了属性att ,其属性以val为结尾的任何字符串
  3. E[att *= “val”]{….} 选择匹配元素E， 且E元素定义了属性att ，其属性值任意位置出现了’val’ ,即属性值包含了“val”，位置不限。
  4. ~=的意思是只要有item 的元素都被选中了。
伪类选择器

伪元素选择：伪元素的效果是需要通过添加一个实际的元素才能达到的.

CSS3 对伪元素进行一定的调整，在以前的基础上增加了一个：也就是

1
::first-letter, ::first-line ,::before ::after

另外还增加了一个 ::selection

root选择器

等同于html ,但权重比html更高

not 选择器

除了那一个，其他都选中

empty 空标签选择器
target 目标元素选择器

被锚点的元素，被选中的元素被进行操作。

伪类选择器：
  1. first-child 第一个子元素
  2. last-child 最后一个子元素
  3. :nth-child（）{} 第XXX个子元素，n代表变量自然数
  4. first-of-type 第一个子元素
  5. :last-of-child 最后一个子元素
  6. :only-of-type 唯一一个子元素

表示状态的伪类选择器

1
2
:enabled 可用的元素
:disabled  禁用的元素

有些表单元素才会有这样的元素，例如输入框，密码框，复选框

:check 已经被选中的状态 check-box
read-only 选中只读的元素

伪元素选择器

::first-letter 首个字母
:first-line 首行
::selection 被选中时候的文本

条件选择器

E > F 直接子元素选择器
E + F 后面紧挨着的兄弟节点
E ~ F 后面的兄弟节点

例如单选框旁的div ，被选中的时候隔壁也被选中。 input:checked + div

CSS3 动画
形状变换
  1. transform 可以实现元素的形状，角度，位置等变化（包括旋转）。transform: rotateX /Y/ Z( deg);不写默认是Z。
  2. rotate3d(x , y, z, Angel)
  3. scale () 以x/y 轴进行缩放
  4. scale(x,y)接受两个值，如果第二个参数未提供，则第二个参数使用第一个参数的值。
  5. skew() 对元素进行倾斜扭曲
    shew（） 接受两个值，分别对应X轴 和Y轴， 如果第二个参数未提供，则默认为0；
  6. translate(x ,[y]) 移动
  7. 使用CSS3属性实现水平垂直居中当使用：
1
2
top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置。
    translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。
  1. transition 过渡动画
1
transition 第一项选择属性(什么width height fontsize opacity ，就是一项属性，用于监听)，第二项选择时间，第三项选择速度，第四项指定过渡函数，第五项为动画的延迟时间
  1. animation 动画
    1. animation-iteration-count 属性主要用来定义动画的播放次数
    2. animation-direction 。normal 正常播放， reverse 反向播放
    3. animation-play-state 用来控制动画的播放状态 running播放，paused 暂停。
CSS 多列布局

为了能在Web页面中方便实现类似报纸，杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局。
语法：

1
2
columns:[column-width][column-count]  columns:2;  变成两列
column-gap ：

设置列与列之间的宽度，直接用数值即可（eg:10px）
column-span 设置多列布局的子元素可以跨列，类似标题效果。

CSS3 盒模型：

IE6混杂模式，首先要触发一个怪异模式。 在IE6混杂模式盒模型下(IE6及以下浏览器)，内容宽度（盒子） = width - padding -border.width包含padding 和 border
W3C标准下的空间高度（盒子）= width +padding +border; width 为内容宽度，不包括padding 和 border

CSS3 弹性盒子 display :flex

==flex为复合属性，必须配合父元素display :flex使用==
如图

6个属性

  1. flex-grow 把盒子分成多少份，要是1 的话就分成1分自己独占。默认是0；

  2. flex-shrink 多出盒子的部分，按照比例的大小砍掉相应的大小，即比例越大，被砍的越大。

  3. flex-basis 伸缩基准值，占据主轴空间。

  4. flex order 可以进行排序，从小到大进行排列

  5. 1
    2
    3
    4
    align-self {
    auto / flex-start /flex-end  / center /baseline（基准线对齐） /stretch
    }
    主轴 /侧轴/交叉轴

  6. flex-direction 决定主轴的方向
    row 从左向右， row-reverse , column ,column-reverse

  7. flex-wrap 是否换行

  8. flex-flow 是dirction 和 wrap的简写方式

  9. justify-content
    1.flex-start 左对齐

    1. flex-end 右对齐
    2. conter 居中
    3. space-between 两端对齐，项目之间的间隔都相等
    4. space-around 每个项目两侧的间隔相等。
    5. align-items 属性如何在侧轴上对齐
    6. flex-start 交叉轴的起点对齐。
    7. flex-end 交叉轴终点对齐
    8. center 交叉轴中点对齐
    9. baseline 项目的第一行文字基准线对齐
    10. stretch 如果未设置高度或设为auton ,将占满整个容器的高度

transparent 透明色颜色值。

CSS3响应式布局

通过设备不同的宽度，相应出不同的布局。这就叫做响应式布局。

1
2
3
<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width 意思是宽度等于设备的宽度，user-scalable = no 意思是不允许用户缩放

媒体查询：媒体查询是向不同设备提供不同样式的一种方式，为每种类型的用户提供了更佳的体验。
CSS2 :mdeia type 是CSS2中一个非常有用的属性，通过media type 我们可以对不同设备执行不同的样式
CSS3 mdeia query 是CSS3对meida type的增强。

添加方式：

1
2
第一种插入样式，需要多个CSS文件
<link rel="stylesheet" media="screen and (max-width:800px)" href="./text.css">

第二种插入方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@media screen and (max-width:300px){
    div{
        width: 200px;
        height: 200px;
        background-color: blue;
    }
}

@media screen and (min-width:301px){
    div{
        width: 499px;
        height: 293px;
        background-color: aqua;
    }
}

and not only 这三个值。only是仅有的意思。 and是再添加这个属性的意思

demo–>从四列变三列再变成两列一列的CSS3响应式布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
.wrapper{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.wrapper div{
    width: 20%;
    display: inline-block;
    flex-grow: 1;
}

.wrapper div img{
    width:100%;
}

@media screen and (max-width:1000px){
    .wrapper div{
        width: 25%;
    }
}

@media screen and (max-width:800px){
    .wrapper div{
        width: 33.33%;
    }
}
@media screen and (max-width:400px){
    .wrapper div{
        width: 50%;
    }
}

@media screen and (max-width:200px){
    .wrapper div{
        width: 100%;
    }
}




CSS3动画
transform-style ：flat | preserve-3d；
注意：属性需要设置在父元素中，高于任何嵌套的变形元素。
设置了tranform-style :preserve-3d的原型，就不能设置overflow:hidden 否则preserve-3d失效
元素旋转，其他轴也在旋转
translate3d 这样写好了之后浏览器就会使用GPU加速。

下图代码块为爱的魔力转圈圈

    <style>
        .wrapper{
            position: relative;
            width: 200px;
            height: 200px;
            margin: 0 auto;
            transform-style: preserve-3d;
            /* transform: rotateX(-20deg); */
            margin-top: 200px;
            animation: turn 5s linear infinite;
        }
        .wrapper div{
            position: absolute;
            top: 0;
            width: 200px;
            height: 200px;
            opacity: 0.5;
            text-align: center;
            line-height: 200px;
            color :#fff;
            font-size: 30px;
        }

        .wrapper .item:nth-of-type(1){
            background-color: red;
            transform: rotateY(0deg) translateZ(200px);
        }
        .wrapper .item:nth-of-type(2){
            background-color: yellow;
            transform: rotateY(60deg) translateZ(200px);

        }
        .wrapper .item:nth-of-type(3){
            background-color: green;
            transform: rotateY(120deg) translateZ(200px);

        }
        .wrapper .item:nth-of-type(4){
            background-color: blueviolet;
            transform: rotateY(180deg) translateZ(200px);

        }
        .wrapper .item:nth-of-type(5){
            background-color: pink;
            transform: rotateY(240deg)translateZ(200px);

        }
        .wrapper .item:nth-of-type(6){
            background-color: yellowgreen;
            transform: rotateY(300deg) translateZ(200px);
        }

        @keyframes turn{
            0%{
                transform:rotateX(-20deg) rotateY(0deg);
            }
            100%{
                transform:rotateX(-20deg) rotateY(-360deg);
            }
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</body>
</html>

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：https://fengzehe.github.io/blog/2019/05/12/CSS3-note/

评论