NOTE——02

1. 盒模型

content(width,height)   padding   border   margin

内间距 - padding

        内容和盒子之间的距离

padding:  一个值        四个边的值都相等

                两个值        第一个代表是上下   第二个代表的是左右

                三个值        第一个是上  第二个是左右  第三个是下

                四个值        上右下左

padding-方向词：

        top        left        right        bottom   

注意：padding会撑大盒模型，如果解决？

                1.自减

                2.使用怪异盒模型属性：

                        box-sizing: border-box;

边框 - border

复合属性：

                边框的宽     边框的样式     边框的颜色

border:   border-width   border-style   border-color;

border-width:  边框的宽

                        一个值：四个边的值都一致

                        两个值： 第一个表示上下  第二个表示左右

                        三个值： 第一个是上  第二个是左右  第三个是下

                        四个值： 按照顺时针的方向一一对应

border-style:  边框的样式

                       solid 实线

                       dotted 点线

                       double 双实线

                       dashed  虚线

                       none  没有

border:     一个值：四个边的值都一致

                两个值： 第一个表示上下  第二个表示左右

                三个值： 第一个是上  第二个是左右  第三个是下

                四个值： 按照顺时针的方向一一对应

border-color：边框的颜色  (如果不给默认为黑色)

                       一个值：四个边的值都一致

                       两个值： 第一个表示上下  第二个表示左右

                       三个值： 第一个是上  第二个是左右  第三个是下

                       四个值： 按照顺时针的方向一一对应

border-方向词：

        top        bottom        right        left

外间距 - margin

        盒子与盒子之间的距离

margin： 一个值：代表的是四个值都相等

                 两个值： 第一个代表上下  第二个代表左右

                 三个值：第一个是上  第二个是左右  第三个是下

                 四个值：按照顺时针的方向一一对应，上右下左

取值：px        %（父元素）

        可正可负

margin-方向词 :

        margin-top： 距离顶部的距离

        margin-left： 距离左侧的距离

        margin-right： 距离右侧的距离

        margin-bottom： 距离底部的距离

如果实现块元素的水平居中？  (这个盒子必须有宽)

            1. 给盒子设置margin:0 auto;

2. 浮动

概念：

        浮动可以是元素脱离文档流，按照指定方向左/右排列

float:  

        left;  左浮动

        right; 右浮动

        none;  不浮动（默认值）

停止条件：

        直到遇到父元素的边界或者另一个浮动元素

注意：

        浮动会脱离文档流不会脱离文本流（不占位），如果盒子想一排显示，需要都加浮动

特点：

        1.浮动脱离文档流（不占位），不脱离文本流

        2.使得块元素水平显示，如果一行放不下自动折行

        3.浮动能够让行内元素生成块级框，支持text-align，line-height，上下的内外间距

        4.未定宽度的块元素由内容撑开

2.2 清除浮动方法

问题：

        浮动会导致父元素高度塌陷，会影响边框颜色的正常显示，会影响后续的布局？

解决：

        1.给父元素一个固定的高

                 优缺点： 不够灵活，一般情况下高度由内容撑开，适用于高度固定的布局中

        2.给父元素一个   overflow:hidden / scroll / auto;

                缺点：容易造成元素不能完全显示

        3.给父元素添加float

                缺点：父元素有高，但是不占位，影响后续布局

        4.在浮动元素的后面加一个不浮动的空盒子，然后给空盒子一个   clear:both;

                缺点： 容易造成页面结构的冗余

        5.伪元素清浮动

                (类名随便定义)

               .abc::after{

                    content: "";

                    display: block;

                    clear: both;

                }

            使用：在浮动元素的父元素身上添加类名 .abc

            优缺点：能够多次重复的利用，不会再结构上产生冗余代码

3.绝对居中方法

第一种：

            1.子绝父相

            2.top: 50%;  left: 50%;

            3.transform: translate(-50%,-50%);

第二种：

            1.子绝父相

            2.top: 50%;  left: 50%；

            3.margin-top: -自身高度一半

第三种：

            1.子绝父相

            2.四个方向值都为0

            3.margin: auto;

4.旋转

transform：rotate(xxdeg);        沿着中心点旋转

                     rotateX(xxdeg);        沿着X轴旋转

                     rotateY(xxdeg);        沿着Y轴旋转

        正值：  顺时针旋转

        负值：  逆时针旋转

注意：当沿X/Y轴旋转时，需要给父级加景深效果

        perspective: 800px;

5.缩放

transform: scale();        沿着X轴和Y轴等比例缩放

                   scaleX(xxdeg);        沿着X轴缩放

                   scaleY(xxdeg);        沿着Y轴缩放

                大于1，表示放大

                小于1，表示缩小

                只有一个值，代表水平和垂直方向都进行缩放

                两个值，第一个代表水平，第二个代表垂直

6.位移

transform: translate();

                   一个值，代表水平

                   两个值，第一个代表水平，第二个代表垂直

取值：px  %(自身)

注意：取值为负值时表示先反转后缩放

7.过渡动画

transition: 属性  时间  速度  延迟时间;

过渡的属性 —— transition-proterty:         (如果有多个属性有过渡，可以用逗号隔开)

        all 所有的属性都有过渡  (可省略)

过渡的运行的时间 —— transition-duration：

        默认单位为ms       1s = 1000ms

过渡的速度 —— transition-timing-function：

         linear     匀速的

        ease        慢-快-慢

        ease-in        慢速度开始

        ease-out        慢速度结束

        ease-in-out        慢-慢

延迟的时间 —— transition-delay：  

        1000ms = 1s

注意：

        如果想移入移出都有过渡，可以写在物体本身身上，如果仅仅只想鼠标移入有过渡，可以写在hover里面

8.动画

定义动画：

        @keyframes 动画名{

                0%(from){

                }

                100%(to){

                }

        }

调用动画：

        animation: name  duration  timing-function  delay  iteration-count direction  fill-mode;

动画名字 —— animation-name：

        必须写

动画的执行时间 —— animation-duration：

        必须写    1000ms=1s

速度 —— animation-timing-function：

        inear 匀速

延迟时间 —— animation-delay：

        1000ms=1s

动画执行次数 —— animation-iteration-count：

        后面跟数值        默认执行动画1次

        infinite(无限次)

方向(定义是否轮流反向播放动画) —— animation-direction：

        normal      正常

        revers      反向

        alternate       正反交替运动，次数必须大于1

        alternate-reverse       反正交替运动，次数必须大于1

动画定格的方式 —— animatio-fill-mode：

        none      动画定格在初始位置

        both      动画定格在结束位置

        forwards      动画定格在初始帧位置(动画结束时状态)

        backwards      动画开始时在初始帧位置，结束在结束帧位置(动画开始时状态)