web--04

盒子模型

 

content	内容区
padding	内边距
border	边框
margin	外边距

内边距

/*水平居中*/
margin:0 auto;
/*改变内边距距离顶部高度*/
padding-top: 20px;
/*上  左*/
padding 30px 50px;
/* 上，左右，下 */
padding: 10px 60px 90px;
 /* 上    右     下         左 */
padding: 10px 30px 60px 90px;

外边距

外边距不影响盒子大小,表示从border开始距离外面的下一个元素的中间距离为外边距

格式与内边距相似;

外边距的塌陷

<style>
        .father {
            width: 800px;
            height: 800px;
            background-color: aquamarine;
            /* border: 1px solid red; */塌陷的解决办法1(边框)
            /*padding: 5px;*/塌陷的解决办法2(padding值)
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* margin-bottom: 20px; */
            overflow: hidden;
        }

        .son2 {
            margin-top: 10px;
        }

        .son3 {
            margin-top: 10px;
        }

        .son1 {
            margin-top: 300px;
        }

        /* margin塌陷问题
        父元素的第一个子元素的margin-top值会被父元素抢走
        相当于给父亲加了一个margin值
        解决办法是给父元素添加边框
        overflow:hidden;  -------偏方
        */
        /* padding: 10px 20px 40px 50xp   顺时针 */
    </style>

文本溢出

<style>
        div {
            width: 800px;
            height: 800px;
            background-color: pink;
            /* overflow: auto; */加一个滚动条
            /* overflow: hidden; */拦腰截断,不知道后面的内容
            /* overflow: visible;s */变大可视窗口
        }
    </style>

样式继承

<style>
        a {
            text-decoration: none;
            color: #807474;
        }

        /* div,
        div span,
        div a {
            font-size: 40px;
        } */

        div {
            font-size: 50px;
            color: #807474;
            /* padding: 13px; */
        }

        /* css样式的继承性
        不是所有样式都继承，只有改变之后对布局无影响的样式，才会继承
        a链接最好在自身更改样式
         */
    </style>

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

 

box-sizing:border-box;
可以自动调整

flex布局

<style>
        .father {
            width: 800px;
            height: 800px;
            background-color: pink;
            display: flex;
            /* 排列方式 */
            flex-direction: row-reverse;从右到左
            flex-direction: column;竖着排列
            flex-direction: column-reverse;从下往上排列
            flex-direction: row;默认排列方式,从左往右
            /* 让flex布局变为多行 */
            flex-wrap: wrap;
            /* flex-wrap: nowrap; */
            /* flex-wrap: wrap; */
            /* 主轴上的布局 */
            justify-content: center;
            justify-content: end;
            justify-content: space-around;
            justify-content: space-evenly;
            justify-content: space-between;
            /* 侧轴 */
            /* align-items   单行的   align-content：多行的*/
            align-items: center;
            /* align-items: end; */
            align-items: start;恢复默认
            align-content: start;
            align-content: end;
            align-content: center;
            align-content: space-between;
            align-content: space-around;
            align-content: space-evenly;
        }

.son{
/*除了其他元素外填满所有位置*/
     flex:1;
}
.son2{
/*order值越小,排列在越靠前的位置*/
   order:-1;
}

定位补充 

.son1 {
            position: absolute;
            /* z-index  定位中显示的优先级 
             值越大优先级越高*/
            z-index: 5;
            top: 100px;
            left: 50px;
            background-color: aqua;

浮动

<style>
        img {
            width: 100px;
            float: left;
        }
    </style>

<style>
        .father {
            width: 1000px;
            /* height: 1000px;  */
            background-color: pink;
        }

        .son {
            float: left;
            width: 200px;
            height: 200px;
            background-color: aqua;
        }

        .son2 {
            background-color: blue;
            float: left;
            /* 浮动，会脱离文档流   不再保留原来位置  会造成在其下方的兄弟元素位置发生变化  */
            /* 当子元素发生浮动时，其父元素的高度发生塌陷 */
(解决办法:1.给父亲加hright--未解决兄弟元素的影响
         2.让父亲也浮动--父亲兄弟会直接文字环绕
         3.overflow:hidden--子元素兄弟数据直接丢失
         4.clear:left--消除左浮动影响,不能为行内元素 自身不浮动)

        }

        .son3 {
            width: 400px;

            background-color: black;
        }
    </style>

渐变

div {
            width: 400px;
            height: 800px;
            background-image: linear-gradient(to right, green, pink, yellow, red);
/*默认从上到下,该式从左到右*/
        }

字体图标

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


<svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-a-008_hanbaokuaican
        "></use>
</svg>

媒体查询

<style>
        div {
            background-color: pink;
        }

        @media only screen and (max-width:699px) and(min-width:550px){
            div{
                background-color: pink;

            } 
        }
        /*当视图变为900px时背景颜色变为绿色*/
        @media screen and (min-width: 900px) {
            div {
                background-color: green;
            }
        }


        @media only screen and (min-width: 320px) and (max-width: 700px) {
            div {
                background-color: blue;
            }
        }
    </style>

默认外边距

在布局时记得将默认内外边距设置为0;

2d转换

.son {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 平移 */
            /* transform: translate(-40px, 40px); */
            /* transform: translateX(70px); */
            /* transform: translateY(-60px); */
            /* 旋转 */
            /* transform: rotateZ(40deg); */
            /* 复合写法  旋转永远放在最后一个 */
            /* transform: translate(100px) rotateZ(45deg); */
            /* transform: rotateZ(45deg) translate(100px); */
            /* transform: scale(1.5); */
            /* transform: scaleX(2); */
            /* transform: scaleY(2); */
            /* transform: skew(40deg); */
            /* 向右下移动100px   旋转45度    缩放1.5 */
            transform: translate(100px, 100px) scale(1.5) rotate(45deg);
        }

3d转换

    <style>
        .father {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 100px auto;
            /*开启3d空间*/
            transform-style: preserve-3d;
            /* 景深,有透视效果,近大远小*/
            perspective: 800px;
            /*观察者位置*/
            /* perspective-origin: 100px 200px; */

        }

        .son {

            width: 300px;
            height: 300px;
            background-color: pink;
            /* transform: translateZ(-200px); */
            transform: rotateX(45deg);
            /* transform: rotateY(45deg); */
            /* transform: rotate3d(1, 1, 0, 45deg); */
            backface-visibility: hidden;
            transform-origin: bottom;
        }
    </style>

css过渡

<style>
        .father {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 100px auto;
            transform-style: preserve-3d;
            perspective: 800px;
            /* perspective-origin: 100px 200px; */

        }

        .son {
            /* transition   谁变化给谁加 */
            transition: all 5s;

            width: 300px;
            height: 300px;
            background-color: pink;
            /* transform: translateZ(-200px); */
            /* transform: rotateY(45deg); */
            /* transform: rotate3d(1, 1, 0, 45deg); */
            /* backface-visibility: hidden; */

        }

        .son:hover {
            width: 800px;
            transform: rotateX(45deg);

        }
    </style>

动画

<style>
        @keyframes myMovie {
            from {
                width: 200px;
                background-color: pink;
            }

            to {
                width: 800px;
                background-color: aqua;
            }

        }

        @keyframes myfirst {
            0% {
                width: 200px;
                background-color: pink;
            }

            20% {
                width: 400px;
                background-color: green;
            }

            80% {
                width: 800px;
                background-color: red;
            }

            100% {
                width: 1200px;
                background-color: aquamarine;
            }
        }

        div {
            width: 200px;
            height: 50px;
            background-color: aqua;
            animation: myMovie 5s infinite alternate steps(4);
            animation: myfirst 5s infinite alternate steps(400);

        }
    </style>