CSS

盒子模型

 浏览器默认外边距为8.

内边距

div{

        padding-top：20px； （left，right，bottom）

        padding:x,y;上下   左右        x,y,z;  上 左右  下      x,y,z,a 上 右  下  左   

    }

外边距

ul li{

       list-style:none;                                去小圆点

        b-c:**;

        margin-bottom:30px;                        外边距间隔30px

        margin-right:5px;        

        }

外边距塌陷问题

父元素的第一个子元素的margin-top值会被父元素抢走

1.给父元素加border，padding：加边框   偏方

2.overflow：hidden； 文本溢出

 文本溢出

        

 overflow:auto(自适应)

                hidden，visible

overflow-x：（x轴溢出）

overflow-y：（y轴溢出）

解决padding，，border影响盒子大小问题：

box-sizing: border-box;

CSS样式继承

div {
            font-size: 50px;

            color: #807474;

        }

唯独超链接的颜色未发生变化，需要单独在超链接中修改

css样式的继承性：

不是所有样式都继承，只有改变之后对布局无影响的样式，才会继承

a链接最好在自身更改样式

flex布局

排列方式

flex-direction: row;                                        默认排列方式，从左到右

flex-direction:row-reverse;                              从右到左

lex-direction:column;                                     竖着排列

flex-direction:column-reverse;                        竖着倒着排列

当一行有很多的情况时，同时挤在一行

flex布局变多行

.father{
            height: 800px;

            width: 800px;

            background-color: pink;  

            display: flex;

            flex-direction:row;  

            flex-wrap: wrap;                    换行（nowrap 不换行 默认）

        }

垂直轴上的布局（侧轴）

<style>

        .father{
            height: 800px;

            width: 800px;

            background-color: pink;  

            display: flex;

            flex-direction:row;  

            flex-wrap: wrap;

            justify-content: space-between;

            align-items: center;

        }

设置单行：

align-items：center（end，self-end自身结尾，start顶格）
设置多行：

align-content：start两行排列（end结尾，center中间，space-between上下靠边中间自分，space-around，space-evenly不靠边自分 ）

flex

.son1{

        flex: 1;

    }

flex：1；                   除了其他元素外填满所有位置

 .son2{

     order: -1;

   }

order值越小，排列在越靠前的位置

z-index: 1;——定位显示优先级，值越大优先级越高

浮动

  .son2{

            background-color: blue;

            float: left;

        }

浮动会脱离文档流 不保留原来位置 会造成下方的兄弟元素发生变化

当子元素发生浮动时，父元素会发生高度塌陷（高度为0）（此时父元素没有高度，靠子元素撑起来的情况）

解决方法

1，给父亲加height——为解决兄弟元素的影响

 ul {

           height: 300px;

        }

2，直接让父亲也浮动 ——问题更加严重，父亲的兄弟直接文字环绕

3，overflow：hidden——问题更大，子元素兄弟连数字直接丢失

ul {

           height: 300px;

           overflow: hidden;

        }

4，接近完美：clear：left——消除左浮动影响：不能为行内元素 自身不能浮动

 div {

            clear: both;

        }

渐变

background-image: linear-gradient(to right,green,pink,yellow);

从左到右渐变

字体图标

<style>

      span{

            color: orange;

        }

        .icon-meishi{

            font-size: 400px;

        }通过类名更改大小

    </style>

js字体图标

.icon {
          width: 1em;
          height: 1em;
          vertical-align: -0.15em;
          fill: currentColor;
          overflow: hidden;
        }
        .icon{
            font-size: 400px;
        }

<svg class="icon" aria-hidden="true">

<use xlink:href="#icon-meishi">

</use>

</svg>

 媒体查询

div {

            background-color: pink;

        }

        @media screen and (min-width: 900px) {

            div {

                background-color: green;

            }

        }                        当视图变为900px时背景颜色变为绿色

默认外边距：存在默认外边距，在布局时先将其默认内外边距设为0

<style>

        *{
            margin: 0;

            padding: 0;

        }

    </style>

2d转换

动画

平移

.son{

            width: 300px;

            height: 300px;

            background-color: pink;

            transform: translate(40px);

        }

（40px，40px）——第一个表示x轴的偏移量，第二个便是y轴的偏移量

旋转

只有绕着z轴旋转时才是平面

.son{

            width: 300px;

            height: 300px;

            background-color: pink;

            transform: rotateZ(40deg);

        }

向右移动100px，旋转45°：

 .son{

            width: 300px;

            height: 300px;

            background-color: pink;

            transform: translate(100px) rotateZ(40deg);

        }

中间用空格隔开，不能用逗号，复合写法旋转永远放在最后

缩放

            transform: scale(0.5);                缩小0.5倍，上下左右都缩小

            transform: scaleX(0.5);                只缩小x轴

            transform: skew(40deg);                扭曲

3d

1，开启3d空间

            transform-style:preserve-3d ;

                给父元素添加开启3d空间

            perspective: 800px;

        ​​​​​​​        景深，距离物体的距离，不能给负数，有透视效果，近大远小

2，透视点位置——观察者的位置

            perspective-origin: 100px 200px;

        ​​​​​​​        改变相对位置

3，3d旋转

            transform: rotatex(45deg) ;

                绕x轴旋转45°，3d旋转（正值顺时针）

            transform: rotate3d(1,1,0,45deg);

                绕x，y轴转45°，z轴不转，1代表是0代表否，顺序为x，y，z

 backface-visibility: hidden;

                背部不可见性

            transform-origin: top;

                改变原点位置

css过渡

transition: all 5s;                过渡谁变化给谁加

 .son:hover {

            width: 800px;

            transform: rotateX(45deg);

        }

                鼠标经过时宽度增加，绕x轴旋转45°，所有都是这个效果