web---css

盒子模型

组成部分：content（内容）、padding（内边距）、margin（外边距）、border（边框）

影响盒子大小的因素：content、padding、border（外边距不会影响盒子大小）

1、边框：  border:   px   solid  color;

2、内边距：padding-top:   px;（内容距离边框的距离）

                    padding:   20px（上、下、左、右）;

                    padding:   10px（上、下） 20px（左、右） ;

                    padding:  10px（上） 20px（左右） 30px（下）；

                    padding:   10px（上）20px（右）30px（下）40px（左）;

    （行内元素  span  的左右内边距可以准确设置）

3、外边距：margin: 0  auto;（实现元素水平居中）

                    （margin可以设置负值）

4、外边距塌陷：父盒子里第一个子盒子 margin-top 会被父盒子抢掉

                           解决方法：1.给父元素加边框（border）

                                              2.给父元素加内边距（padding）

                                              3.偏方   overflow: hidden

5、避免padding将盒子撑大

     解决方法：box-sizing: border-box;

6、flex布局

弹性盒子：display： flex;

改变子元素排列方式：flex-direction: row-reverse（反转）/column（沿列）/row-column（沿列反转）

改变主轴对齐方式：justify-content: space-between    两边贴边，中间平分剩余空间

                                 justify-content: space-around   平分在子项的两边

                                 justify-content: space-evenly    子项平分

                                 justify-content: center      子项居中

侧轴单行对齐方式：align-items： center

允许换行：flex-wrap: wrap;

侧轴对齐方式：align-content: space-between

                         align-content: space-around 

                         align-content: space-evenly

                         align-content: center

flex: 1;（flex 占剩余空间的多少）

order   值越小，排列越靠前，没有设置的子元素默认为0.

去除标签默认外边距：margin: 0;

7、渐变：background-image: linear-gradient(to  方向 ,颜色（多种）)

重复线性渐变：background-image: repeating-linear-gradient()

镜像渐变：background-image: radial-gradient()

8、css继承性：会继承（字体属性、文本属性、字体颜色……）不会继承（边框、背景、内外边距、宽高……）

9、浮动：float

    clear: both; （清除浮动）

10、2d转换

移动：transform: translateX(10px);（沿X轴方向）

（单独写会覆盖）

         复合写法：transform: translate(10px  10px)

缩放：transform: scaleX(倍数)  （>1 放大，<1 缩小）

旋转：transform: rotateX(  deg);（deg  度）

改变旋转原点：transform-origin: top left（左上角）;

11、3d转换

先给父元素开启3d空间：transform-style: preserve-3d;

然后改变空间视角：perspective:   20px;

旋转：transform: rotate 3D(0(X),0(Y),0(Z) ,10px)（为0时，不旋转；为1时，旋转）

背部可见性：backface-visibility: hidden;

12、过渡

transition-property: width,height,abckground;

transition-duration: 时间；

复合写法：transition: all, 时间，steps(3);  （step  帧）

13、动画

（1）定义动画：@keyframes movie{

                                                       from{

                                                      }

                                                       to{

                                                      }

                                                }

animation: movie（定义的动画名字）

animation-duration（动画执行时间）:

animation-delay（动画延迟时间）：

动画方式：animation-timing-function: steps();

动画执行次数：animation-iteration-count: infinite（无限）;

动画方向：animation-direction:reverse（反转）/alternate（往复）;

动画最后停止位置：animation-fill-mode: forward（最后）;