CSS部分基础属性查缺补漏|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第4天

一、display转换属性

1.块级元素：

(1)独自占据一行,故默认宽度是容器的100%。

(2)可以设置宽、高、行高、内外边距。

(3)可以容纳行内元素和其他块级元素。

2.行内元素：

(1)会和相邻的行内元素排成一行。

(2)设置宽、高无效，默认宽高是其自身内容的宽高。

(3)只能设置水平方向的内外边距。

(4)只能容纳其他行内元素和文本。

3.行内块级元素：综合了块级元素和行内元素的特点

(1)和相邻行内块级元素在同一行。

(2)默认宽、高为其内容的宽、高。

(3) 可以设置宽、高、行高、内外边距。

    <style>
        a{
            display: block;
            /*转换为块级元素*/
            width: 230px;
            height: 40px;
            background-color: #838788 ;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
          /*去掉下划线*/
            text-indent: 2em;
          	line-height: 40px;
            /*让行高等于块的高度（文字垂直居中）*/
        }
        a:hover{
            /*设置鼠标经过变换颜色*/
            background-color: orange;
        }
    </style>

二、背景属性

        h3{
            width: 118px;
            height:40px;
            font-size: 14px;
            font-weight: 400;
            background-image: url("img/icon.png");
            /*背景图片*/
            background-repeat: no-repeat;
            /*背景是否平铺*/
            background-position: left center ;
            /*背景位置 ： x y 原点为左上角*/
             background-attachment: fixed;
            /*背景图片是否固定*/
            background: rgba(0,0,0,0.6);
            /*背景透明度，前三位是颜色，后面的小数是不透明度*/
        }

三、css动画基本使用

   /*定义动画 */
        @keyframes move {
            0%{
                transform: translateX(0px);
            }
            100%{
                transform: translateX(1000px);
            }
        }
        div{
            width: 200px;
            height: 200px;
            background-color: #bddebd;
            /*调用动画*/
            animation-name: move;
            /*持续时间*/
            animation-duration: 2s;
            animation-timing-function: ;    /*  规定动画的速度曲线默认是”ease“    */
            animation-delay: ;      /*规定动画何时开始，默认是0 */
            animation-iteration-count: ;    /*规定动画被播放的次数默认是1，还有infinite(无限) */
            animation-direction: ;  /*规定动画是否在下一周期逆向播放，默认是“normal” alternate逆播放*/
            animation-play-state: ; /*规定动画是否正在运行或暂停。默认是“running” ，还有“paused"*/
            animation-fill-mode: ;  /*规定动画结束后状态，保持forwards回到起点backwards*/
        }