the two day 前端 2022-7-19（11不要问我为什么用two 不用 second，because i like it ）

本文深入探讨了CSS中的盒子模型，包括content-box和border-box两种模式，以及如何通过box-sizing属性进行调整。此外，还介绍了盒子的圆角、阴影效果的实现。接着讲解了背景属性的应用，如背景图片、颜色、大小和重复。进一步阐述了定位属性，如relative、absolute，以及如何通过定位和文档流创建布局。最后，提到了CSS的过渡、平移和动画效果，包括使用transition和keyframes创建动态效果。文章还简单提及了Flex布局的基础知识，展示了如何通过Flexbox实现响应式和动态布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS 属性和取值

文本属性

举例

盒子属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>盒子模型</title>
  <style>
    /**
  box-sizing 属性设置盒子模型
  1.content-box内容盒子模型，width 和 weight 定死内容的宽高
    对外扩散
    盒子实际宽高= width/height + 2 * （边框 + 内边距）
  2.border-box边框盒子模型，width 和 height 定死边框的宽高
    向内压缩
    盒子内容宽高= width/height - 2 * （边框 + 内边距）

    盒子由3部分组成：内容+内边距+边框  盒子的尺寸与这三部分有关
    外边距是盒子边框以外的距离
    width height
    padding
    border
    margin

    并不是所有元素都有盒子模型
    块元素（占一行）：有盒子模型，典型的块元素是div
      1.有高度宽度属性
        定死高度 .box-1
        弹性高度 .box-2
      2.默认占据父元素的一行
    行（内联）元素：没有盒子模型，典型的行元素是span

    1.直接使用像素单位设置宽度和高度
    2.使用百分比设置高度和宽度 （子元素参考父元素宽度） .box-4
  */
    /*定死高度*/
    .box-1{
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    /*不定死高度*/
    .box-2{
      width: 200px;
      background-color: red;
    }
    /*不定死 会溢出*/
    .box-3{
      height: 50px;
      /*overflow: hidden;溢出隐藏*/
      /*overflow: auto;给一个上下滑轮*/
      /*overflow: scroll;给一个上下左右换轮*/
      background-color: yellow;
    }

    .box-4{
      /*boby默认的宽度是浏览器视口的100%，boby默认没有高度*/
      height: 50px;
      width: 50%;
      background-color: green;
    }
    /*给浏览器设置一个默认的高度*/
    html,boby{
      height: 100%;
    }
    .box-4-1{
      height: 50%;
      width: 50%;
      overflow: auto;
      background-color: blue;
    }
  </style>
</head>
<body style="height: 100%">

<div class="box-1"></div>

<div class="box-2">
  1<br>
  1<br>
  1<br>
</div>
<div class="box-3">
  2<br>
  2<br>
  2<br>
</div>
<div class="box-4"></div>
<div class="box-4-1"></div>
</body>
</html>

盒子的圆角

    /*盒子圆角*/
    .box-5{
      height: 100px;
      width: 100px;
      border-radius: 100px 100px 100px 100px ;
      background-color: black;
    }
    .box-5-1{
      height: 50%;
      width: 27%;
      border-radius: 100px 100px 100px 100px ;
      background-color: black;
    }
  </style>
</head>

<body style="height: 100%">

<div class="box-5-1"></div>

<div class="box-5"></div>

盒子的阴影

.box-5-1{
      height: 50%;
      width: 27%;
      border-radius: 100px 100px 100px 100px ;
      box-shadow:  1px 1px 50px   red;
      background-color: #eb5bff;
    }

背景属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>背景属性</title>

  <style>
    .c1{
      background-image: url("dby.png");
      background-color: #eb5bff;
      width: 500px;
      height: 500px;
      background-size: 50px;


      background-repeat: repeat;


    }
  </style>
</head>
<body>
<div class="c1"></div>
</body>
</html>

定位属性

relative

.box2{
      height: 100px;
      background-color: yellow;
      position: relative;
      top: 50px;
      left: 100px;
    }

absolute

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>定位使用</title>
  <style>

    .box{
      width: 500px;
      height: 500px;
      background-color: #eb5bff;
    }
    div{
      margin: 10px;
      width: 50%;
    }
    .box1{
      height: 100px;
      background-color:red;
    }
    .box2{
      height: 100px;
      background-color: yellow;
      position: absolute;
      top: 50px;
      left: 100px;
    }
    .box3{
      height: 100px;
      background-color: green;
    }
  </style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div></div>
</body>
</html>

过渡、平移、动画

CSS 动画

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CCS动画</title>
  <style>
    .box div{
      width: 50px;
      height: 50px;
      background-color: rgb(235,092,032);
      margin: 10px;
      color: blue;
      font-weight: bold;
      font-size: 14px;
      text-align: center;
      /*文本垂直居中 line-height = height*/
      line-height: 50px;
      /*过渡时间*/
      transition: all 1s;
    }
    /*:hover 表示鼠标悬浮到元素上才会触发这个选择器*/
    .box div:hover{
      /*移动100px*/
      transform: translate(100px);
      /*倾斜90deg*/
      transform: skewX(90deg);
      /*旋转360deg*/
      transform: rotate(360deg);
      /*放大1.5倍*/
      transform: scale(1.5);
      /*叠加*/
      transform: translate(100px)  rotate(360deg) scale(1.5);
      /*沿着Y轴转*/
      transform: rotateY(360deg) ;
      /*3d旋转*/
      transform: rotate3d(10,10,10,360deg);
    }
  </style>
</head>
<body>
<div class="box">
  <div>汽车</div>
  <div>服装</div>
  <div>化妆品</div>
  <div>数码</div>
  <div>家电</div>
</div>
</body>
</html>

CSS动画-关键帧

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS动画-关键帧</title>
  <style>
    .qlz{
      width: 200px;
      animation: kf 4s linear;
    }
    @keyframes kf {
      25%{
        transform: translate(400px,200px);
      }
      50%{
        transform: translate(300px,300px);
      }
      75%{
        transform: translate(100px,100px);
      }
      100%{
        transform: translate(200px,200px);

      }
    }
  </style>
</head>
<body>
<img src="dby.png"class="qlz">
</body>
</html>

布局

1.写死 px 和百分比

2.盒子模型

3.定位和文档流

4.浮动（淘汰）

5.Flex 布局

详细链接：

https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex布局</title>
  <style>
    .container{
      background-color: lightgray;
      /*设置父div为flex容器*/
      display: flex;
      /*子元素宽度写死，当父元素的宽度不够子元素分的时候*/
      /*  策略1：nowrap 压缩子元素 策略2：wrap 不压缩，子元素换行*/
      flex-wrap: wrap;
      /*设置所有子元素的排列方向*/
      /*column 上下上到下 column-reverse 下到上 row 水平左到右 row-reverse右到左 */
      flex-direction: row;
      /*水平对齐方式 flex-start flex-end center space-between space-around*/
      justify-content: space-around;
      /*垂直对齐方式*/
      align-items: center;
    }
    .container>div{
      height: 50px;
      background-color: pink;
      /*margin外边距*/
      margin: 5px;
      font-size: 20px;
      color: white;
      font-weight: bold;
      text-align: center;
      line-height: 50px;
      /*宽度不写死，会根据子元素的个数，占一份，弹性的*/
      /*flex: 1;*/
      /*宽度写死，实际宽度 <= 150px */
      /*当父容器的宽度足够大的时候，子元素宽度最宽是150，当父容器宽度不够的时候，子元素会压缩自己*/
      width: 150px;

    }
    /*只对2操作*/
    /*所有子元素的order属性默认是0*/
    /*利用order来排序*/
    .container>div:nth-child(2){
      order: 1;
    }
    .container>div:nth-child(3){
      order: 2;
      align-self: start;
    }
    .container>div:nth-child(5){
      order: -1;
      align-self: end;
    }

  </style>
</head>
<body>
<div class="container">
  <div style="height:50px">1</div>
  <div style="height:100px">2</div>
  <div style="height:200px">3</div>
  <div style="height:300px">4</div>
  <div style="height:50px">5</div>
  <div style="height:500px">6</div>
  <div style="height:50px">7</div>
  <div style="height:100px">8</div>
  <div style="height:50px">9</div>
  <div style="height:50px">10</div>
</div>
</body>
</html>