9.CSS2_9css2-CSDN博客

1. CSS3:

border-raduis : 边线弧度

    <style>
        .a1 {
            width: 200px;
            height: 200px;
            border-radius: 100px;
            opacity: 0.5;
        }
        .a1:hover {
            transform: scale(1.2);
            transition: all 2s;
            /* opacity: 1; */
        }
    </style>
</head>
<body>
    <div style="width: 200px; height: 200px;overflow: hidden;">
        <img src="/Snipaste_2021-04-27_09-24-30.png" class="a1" />
    </div>

2. 伸缩盒子：box flex;

伸缩问题，块的轴布局
父标签要display:flex
flex-direction:轴：横轴row 纵轴column
justify-content; 位置; 开始start 中间center 结束end 空格环绕space-around 空格间隔space-between
algin-items: 另一个轴的位置
子标签可伸缩：
- flex-grow: 放大比
- flex-shrink: 缩小不动 0代表不懂

场景：块的垂直居中

 <style>
        .a1 {
            margin: 0 auto;
            display: flex;
            /* 轴的方向： row/cloumn */
            flex-direction: column; 
            /* 居中，start center end space-between */
            /* justify-content: left; */
            /* 另一个轴居中 flex-start center flex-end */
            /* align-items: flex-end; */

            /* width: 900px; */
            height: 600px;
            border: 1px solid black;
        }
        .a1 > .a2 {
            width: 200px;
            height: 100px;
        }
        .a2:nth-child(1) {
            /* min-width: 500px; */
            /* flex-shrink: 0; */
            flex-grow: 5;
            flex-shrink: 1;
            background-color: red;
        }
        .a2:nth-child(2) {
            flex-grow: 1;
            flex-shrink: 0;
            background-color: green;
        }
        .a2:nth-child(3) {
            flex-grow: 1;
            flex-shrink: 1;
            background-color: blue;
        }
    </style>
    <div class="a1">

        <div class="a2"></div>
        <div class="a2"></div>
        <div class="a2"></div>

    </div>

3. 盒子模型：

margin/border/padding

4. 怪异盒子模型：box-sizing:border-box;

5. outerline: 外轮廓。边框外的边框

6. 媒体检测：@media 响应式原理

    <style>
        /* 媒体监测 */
        @media all and (max-width: 768px) {
            div {
                border: 1px solid black;width:100px;height:100px;outline: 10px solid green;margin: 101px;
            }
        }
        @media screen and (min-width: 768px) and (max-width: 1024px){
            div {
                border: 1px solid black;width:100px;height:100px;outline: 10px solid purple;margin: 101px;
            }
        }
        @media screen and (min-width: 1024px) {
            div {
                border: 1px solid black;width:100px;height:100px;outline: 10px solid red;margin: 101px;
            }
        }
    </style>
</head>