0524车玉霞

日志

一、知识总结

1、transform属性

none:不转换

translate(x,y):2D转换移动

translate3d(x,y,z):3D转换移动

​ scale(x[,y]) : 2D 缩放转换

​ scale3d(x,y,z) : 3D 缩放转换

rotate3d(x,y,z,angle) : 3D 旋转

2、transition 的属性

(1)transition-property:名称、效果
(2)transition-duration transition:效果完成时间
(3)transition-timing-function :transition效果的转速曲线
(4)transition-delay :效果的开始

3、动画

animation-name :选择器关键帧名称

animation-duration :动画完成的时间

animation-timing-function :动画的一个周期

animation-delay :动画开始前的延迟间隔

nimation-iteration-count:动画播放次数

infinite: 无限次

animation-direction :是否轮流反向播放动画

animation-play-state :动画正在运行或已暂停

实例:

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .div1 {

            width: 200px;
            height: 200px;
            border: 1px soid;
            background-color: #6495ED;
        }

        .div0 {
                float:left;
            width: 200px;
            height: 100px;
        border: 1px soid;
        }

    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div0"><p>每个分析的统计量是根据分析中的每个变量的值都不缺失或超出范围的案例计算的。用户定义的缺失值将作为缺失对待。
        每个分析的统计量是根据分析中的每个变量的值都不缺失或超出范围的案例计算的。</p>

    </div>

</body>

4、排版(布局)

​ 正常布局流属性

​ float:浮动(多列布局)

实例:

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #heart{

​ width: 200px;

​ height: 200px;

​ background-color: plum;

​ margin: 400px auto;

​ position: relative;

​ transform: rotate(45deg);

​ }

​ #heart:before{

​ content: "";

​ position: absolute;

​ left:-100px;

​ width: 200px;

​ height: 200px;

​ border-radius: 50%;

​ background-color: plum;

​ }

​ #heart:after{

​ content: "";

​ position: absolute;

​ top:-100px;

​ width: 200px;

​ height: 200px;

​ border-radius: 50%;

​ background-color: plum;

​ #heart{

​ width: 200px;

​ height: 200px;

​ background-color: plum;

​ margin: 400px auto;

​ position: relative;

​ transform: rotate(45deg);

​ }




​ clear:(both/left/right)清楚浮动

​ clear值:
​ left :停止任何活动的左浮动
​ right :停止任何活动的右浮动
​ both :停止任何活动的左右浮动

5、定位(position)

​ position-static:静态定位(默认)

​ position-relative:相对定位

​ position-absolute:绝对定位

​ position-fixed:固定定位

​ position-sticky:黏性定位

6、样式优先级

内联样式>内部样式>外部样式>浏览器默认样式

不同选择器优先级

ID选择器>class选择器>标签选择器

改变优先级:!important

7、重复定义样式时:

​ 在 a.css 和 b.css 中使用相同的选择器都定义了对于某个元素的样式属性时,那么谁在后边元素适配谁。

8、选择器比较
(1)Id :元素的属性值 ,区分大小写 ,作用在一个元素上
(2)Class :元素的属性值,区分大小写,可自定义,可适配多个不同元素
(3)元素标签:不区分大小写,只能适配同一元素,可以作用多个元素
(4)后代子元素:可适配多个元素,可以使用元素作为选择器的一部分,可以适配所有被包裹的元素

二、心得体会

通过昨天的学习,我更详细的了解了动画、布局、浮动、定位的学习,老师讲的非常细,也有充足的

练习时间。动画上面的有些知识还有点模糊。

标签

云创动力Java开发工程师 云创动力前端开发工程师 云创集训 开发喵 成都物联网 打造IT特种兵 教育生态服务商
© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1