CSS知识点

 引入css的几种方式:
     1.内部样式：通过style标签引入，通常会在head标签内部。
     2.行内样式： 通过style属性。
     3.外部样式：通过link标签
         href：样式的地址 (必要)
         rel : 引入文件和当前文件之间的关系 relationship, 样式表单的关系(必要)
     4.import：在一个css文件中导入另外一个css文件 @import url("css的地址")；

         css优先级别的高低：范围越小，优先级越高（css的权重）
        行内样式：style属性，优先级最高！！

引入css的3种选择器:
    1.id：标签的id属性不能重复的，选中其中的一个元素，通过#id属性选中。
    2.class：class属性可以重复的，并且可以添加在不同的元素上面。 通过 .c1 .c2 选中元素
    3.标签：通过标签名选中所有的同名的标签

    优先级别： id > class > 标签  （范围越小优先级越高）

font：
    font-family:字体样式  宋体 黑体 隶书、、、
    font-size: 字体的大小
    font-weight: 字重  bold bolder  100 - 900
    font-style:  斜体和正常 italic  normal

    font： font-style font-weight font-size font-family

text：
    color:颜色  rgba(255,0,0,0); a表示透明度   0-1  0表示透明   1表示不透明
    text-align:center right left  块标签里面的文本
    text-indent：首行缩进
    line-height:行高   通常会使用让 行高等于元素的高度  来调整文本的垂直居中;
    text-decoration:文本的修饰  下划线underline 中间线line-through 顶线overline
    text-shadow : color  x-offset  y-offset  blur-radius;
        color：阴影颜色
        x-offset：x轴偏移量
        y-offset：y轴偏移量
        blur-radius：模糊半径
    letter-spacing：字母间距
    word-spacing: 单词之间的间距
    white-spacing: 留白区域的控制
         pre:空格和换行受保护
         nowrap:不换行，除非遇到 br
    text-transform  none  正常显示可以包含大，小字符
        capitalize  字符串第一个字符大写
        uppercase  设置大写字符
        lowercase  设置小写字符
    vertical-align sub 设置文字为下标。
                    super  设置文字为上标。
                    top 文字 往上端靠齐。
                    middle 设置文字是在中线位置。
                    bottom 文字 往下端靠齐。

伪类：某种状态下的效果
a:link  :未单击访问时超链接样式
a:hover :鼠标悬浮其上的超链接样式
a:active :鼠标单击未释放的超链接样式
a:visited :单击访问后超链接样式

列表样式：   list-style

    list-style-type: none 不显示列表的标号。
                    disc 实体的小圆点。
                    circle  空心的小圆点。
                    square 实心的小方块。
                    decimal 1,2,3...
                    lower-roman i,ii,iii...
                    upper-roman I,II,III...
                    lower-alpha a,b,c,d,e...
                    upper-alpha A,B,C,D,E...
    list-style-position:
                    inside 列表项往右移
                    outside 列表项正常显示(默认)
    list-style-image:将标号改为 图片

背景：background
    background-color    十六进制 #ff0000;
                        英文名称 red;
                        三原色  rgb(255,0,0)
    background-image    url("bg.jpg") 背景图片
                        none 不设置背景图片
    background-repeat   repeat  将背景图案填满整个背景。
                        repeat-x 将背景图案在水平方向添满。
                        repeat-y 将背景图案在垂直方向添满。
                        no-repeat  图案只出现一次。
    background-position top left 设置背景 上左方
                        top center  设置背景 上方中间
                        top right  设置背景 上右方
                        center left  设置背景 中间左方
                        center center  设置背景 中间
                        center right 设置背景 中间右方
                        bottom left 设置背景 左下 方
                        bottom 设置背景 正下方
                        bottom right 设置背景右 下
                        第一个位置 左右 第二个位置 上下
    background-attachment scroll 设置背景图像会随视窗滚动 条的移动而移动。
                          fixed 设置背景图像不会随视窗滚动条 的移动而移动。

    一个背景样式： background: silver  url("img/1.jpg")  no-repeat  center;

    background-size: contain 包含   铺满短边   图片等比例缩放
                     cover   平铺   铺满长边   图片等比例缩放
                     水平大小  垂直大小  100% 100%    图片会被拉伸

5.渐变：gradient   线性渐变lineaner-gradient和径向渐变radial-gradient
    1）线性渐变lineaner： background-image: linear-gradient(direction方向, color-stop1, color-stop2, ...);
    2）径向渐变radial-gradientbackground-image: radial-gradient(shape size at position, start-color, ..., last-color);

1）边框： 宽度 颜色 线型
    border-width：  宽度
    border-color:   颜色
    border-style:   虚线 双线 点线  实线
                    none  不显示边线
                    dotted  点线
                    dashed 虚线
                    solid  实线
                    double 双线
2）设置边框时可以单独设置某一条边的颜色 宽度 线型；
   上边线
    border-top-color: red;
    border-top-width: 10px;
    border-top-style: solid;
    也可这样设置：  border-top: 10px solid red;
3）也可以同时设置四条边的颜色 宽度 线型
     border-width: 2px 4px 6px 8px;
     border-color: red green blue seagreen;
     border-style: double solid dashed dotted;
     如果是四个位置： 上 右 下 左
     如果是三个位置： 上 左右 下
     如果是两个位置： 上下 左右
4）border-radius：圆角
    可以单独设置某一个角的角度   右上角 border-top-right-radius: 10%;

1）box-shadow： 盒子阴影
box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow   必需的。水平阴影的位置。允许负值
v-shadow   必需的。垂直阴影的位置。允许负值
blur   可选。模糊距离
spread 可选。阴影的大小 （在阴影的宽高上 加减spread的值）
color  可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset  可选。从外层的阴影（开始时）改变阴影内侧阴影

1）margin： 外边距
2)padding: 内边距(内填充)
    四个位置：上右下左
    三个位置：上左右下
    两个位置：上下左右

w3c:盒子模型  content-box，给定的宽度是内容的宽度
    div所占的高度：上外边距+上边框+上内边距+height+下内边距+下边框+下外边距
ie的盒子模型： border-box 给定的宽度是border的宽度

1)margin:调整元素的水平居中,元素自己必须有宽度.
 margin: 0 auto;
2)上下相邻的两个元素，margin-botton和margin-top的时候，
    当两个值都是正数的时候，取两者中的最大值；
    当有负数存在时，结果是相加的后的值。
    当两个值都是负数的时候，取两者绝对值大的那个；

当子元素紧贴父元素上方元素时，设置子元素的margintop时父元素也会一起向下移动。

min-height:最小高度
min-width:最小宽度

max-height:最大高度
max-width:最大宽度

over-flow：属性，溢出控制
    overflow:hidden;  溢出隐藏
    overflow:auto; 超出出现滚动条
    overflow:scroll; 强制出现滚动条 

常用的区块元素： div p  ul li h1~h6  ol form table dl dd dt
常用的行内元素： strong span i big small cite em  input select
行内块：   img  audio  embed

以上元素的状态可以使用display属性进行转换。
区块：元素独自占据一行，宽高边距全部又有效。
行内元素：多个行内元素并排显示，不会换行，直到排满为止才会换行，添加宽高不起作用，宽和高内容进行支撑，水平方向的内外边距都产生效果，垂直方向不产生边距效果。

display：inline-block,缺点：元素之间如果存在换行会有一定的间隙。
float：浮动，飘起来，脱离原来（标准的文档流）的文档流。

父元素边框塌陷： 子元素全部浮动。
    body:after:表示通过 css 给元素内部后面追加内容。
            content: "sdfasdf";  动态追加的内容
    以下为追加内容 的css属性：
            width: 100px;
            height: 100px;
            background: slategrey;
            display: block;
            clear: both;
    ：before：表示通过 css 给元素内部前面面追加内容。

display:none   就是  隐藏的意思

position: static
          absolute  绝对定位;
          relative  相对定位
          fixed     固定定位  参考位置视窗左上角,脱离原来的文档流；

position: static
          absolute  绝对定位 : 当祖先元素具有定位属性，就以具有定位属性的祖先元素的左上角给参考位置，
                              如果祖先元素没有定位属性，以视窗的左上角为参考位置。
                              绝对定位的元素会脱离文档流，让出自己的位置。
          relative  相对定位 : 参考位置为自己的左上角（原本自己应该出现位置的左上角）,不会脱离文档流，不会让出自己的位置,给绝对定位提供参考点。
          fixed     固定定位 : 参考位置视窗左上角,脱离原来的文档流；

z-index:层级 值越大 越靠上  正整数。

transition：过度
    transition-property  ：产生过度效果的属性   通常会写  all
    transition-duration   ：过度效果持续的时间
    transition-timing-function：过度效果的时间函数
            ease：速度由快到慢（默认值）
            linear：速度恒速（匀速运动）
            ease-in：速度越来越快（渐显效果）
            ease-out：速度越来越慢（渐隐效果）
            ease-in-out：速度先加速再减速（渐显渐隐效果）
    transition-delay：延时几秒执行

旋转：rotate(a);
    参数a单位使用deg表示
    参数a取正值时元素相对原来中心顺时针旋转

缩放：scale()函数可以只接收一个值，也可以接收两个值，只有一个值时，第二个值默认和第一个值相等

    scaleX(1.5)  只缩放x轴 scale(1.5,0)
    scaleY(1.5)  只缩放Y轴 scale(0,1.5)
    scale(1.5)

skew(ax, ay);
    可以仅设置沿着X轴或Y轴方向倾斜
    skewX（ax）：表示只设置X轴的倾斜
    skewY（ay）：表示只设置Y轴的倾斜

 /*
                添加执行动画效果



            */
            /*animation: myAnimate 8s infinite linear alternate;*/
            animation-name: myAnimate;/*动画的名字*/
            animation-duration: 8s;/*动画持续的时间*/
            animation-delay: 2s;/*延时2s执行动画*/
            animation-direction: normal;/*   动画播放的方向：  normal reverse alternate             */
            animation-iteration-count: 2;/*无数次   infinite*/
            animation-timing-function:  ease-in-out ;/*linear  ease-in-out  ease in  ease out*/
        }

        /*
            动画：需要有关键帧
        */
        @keyframes myAnimate {

            /*
                定义动画过程中的关键帧
            */
            0%{
                left: 0;
                top: 0;
                background: skyblue;
            }

            25%{
                left: 600px;
                top: 0;
                background: seagreen;
                width: 100px;
            }

            50%{
                left: 600px;
                top: 600px;
                background: sandybrown;
            }

            75%{
                left: 0;
                top: 600px;
                background: saddlebrown;
            }

            100%{
                left: 0;
                top: 0;
                background: #5c9815;
            }