前端实训-Day3 常用属性、盒子模型

最新推荐文章于 2024-09-11 22:31:16 发布

劫o梦

最新推荐文章于 2024-09-11 22:31:16 发布

阅读量93

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/m0_57826741/article/details/130839753

版权

首先理解知识点盒子模型

在网页中我们会把html元素想象成一个盒子，效果展示

具体看代码

      
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }

    /* 在网页中我们会把html元素想象成一个盒子 */
    /* 盒子可以设置宽高,外边距,内边距 */
    .i1 {
      width: 200px;
      height: 100px;
      border: 5px solid red;
      /* margin-top: 10px; */
      /* margin-bottom: 20px; */
      /* margin-left: 30px; */
      /* margin-right: 40px; */
      /* 当元素的左右外边距设置为auto可以水平居中 */
      margin-left: auto;
      margin-right: auto;
      /* 上 右 下 左 */
      margin: 10px 20px 30px 40px;
      /* 上下  左右 */
      /* margin: 10px 20px; */
      /* margin: 10px auto; */
      /* 上  左右  下 */
      /* margin: 10px 20px 30px; */
      /* 上下左右 */
      margin: 10px;
    }

    /* 内边距会撑大元素 */
    .i2 {
      width: 170px;
      height: 80px;
      border: 5px solid red;
      padding-top: 20px;
      padding-bottom: 10px;
      padding-left: 10px;
      padding-right: 10px;
    }

    /* 普通盒子 */
    /* 宽 = 设置的宽度 + 左右边框 + 左右内边距 */
    /* 高 = 设置的高度 + 上下边框 + 上下内边距 */
    .i3 {
      width: 200px;
      height: 100px;
      border: 5px solid red;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 10px;
      padding-right: 10px;
      /* 边框盒子 */
      /* 宽 = 设置的宽度 */
      /* 高 = 设置的高度 */
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div class="i1"></div>
  <div class="i2">这里是内容部分</div>
  <div class="i3">这里是内容部分</div>
</body>

</html>

其次是弹性模型

通过代码的调试进行控制弹性盒子中的元素位置

修改一下，刚才是倒排，现在是正排，其他的根据代码自行调试

      
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 正常情况下 块元素默认是垂直从上向下排列的 */
    /* 但是我们有时候需求块元素水平显示 */
    /* 
    把需要水平显示的块元素的父元素设置为弹性盒子
    弹性盒子内部的元素是弹性子元素
    弹性子元素有自己的排列方式
    弹性子元素默认水平排列
    主轴:默认水平方向从左向右,左边为起点,右边为重点
    弹性子元素默认沿着主轴从起点向重点排列
    */
    .box {
      width: 500px;
      height: 500px;
      border: 5px solid black;
      /* 设置弹性盒子 display: flex; */
      display: flex;
      /* 设置子元素在主轴的排列方式 justify-content */
      /* justify-content: space-between; */
      /* justify-content: space-evenly; */
      /* justify-content: center; */
      /* 设置主轴的方向 flex-direction */
      /* 主轴有四个方向: 
      row左->右  row-reverse右->左 
      column上->下 column-reverse下->上 */
      /* flex-direction: row; */
      /* flex-direction: row-reverse; */
      flex-direction: column;
      /*flex-direction: column-reverse; */
    }

    .red {
      width: 100px;
      height: 100px;
      background-color: red;
    }

    .green {
      width: 100px;
      height: 100px;
      background-color: green;
    }

    .blue {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
  </div>
</body>

</html>

弹性模型2

修改一下，刚才是居中，现在是交叉轴起始位置排列，其他的根据代码自行调试

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 正常情况下 块元素默认是垂直从上向下排列的 */
    /* 但是我们有时候需求块元素水平显示 */
    /* 
    把需要水平显示的块元素的父元素设置为弹性盒子
    弹性盒子内部的元素是弹性子元素
    弹性子元素有自己的排列方式
    弹性子元素默认水平排列
    主轴:默认水平方向从左向右,左边为起点,右边为重点
    弹性子元素默认沿着主轴从起点向重点排列
    交叉轴:交叉轴方向跟主轴垂直
    交叉轴默认方向从上向下,上边为起点,下边为重点
    不管主轴从左向右还是从右向左交叉轴都是从上向下的
    不管主轴是从上向下还是从下向上交叉轴都是从左向右的
    主轴有四个方向交叉轴只有两个方向
    */
    .box {
      width: 500px;
      height: 500px;
      border: 5px solid black;
      /* 设置弹性盒子 display: flex; */
      display: flex;
      flex-direction: column;
      justify-content: center;
      /* 设置元素在交叉轴的排列方式  align-items */
       align-items: flex-start; 
      /* align-items: flex-end; */
      /* 交叉轴我们使用最多的就是垂直居中 */
      /* align-items: center; */
    }

    .red {
      width: 100px;
      height: 100px;
      background-color: red;
    }

    .green {
      width: 100px;
      height: 100px;
      background-color: green;
    }

    .blue {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
  </div>
</body>

</html>

固定定位

粉色条和绿色条固定住了

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .i1 {
      width: 100px;
      height: 100px;
      background-color: pink;
      position: fixed;
      left: 100px;
      bottom: 0px;
      /* top: ; */
      /* right: ; */
    }

    /* 当元素没有设置宽度或者高度的时候,元素会被拉伸 */
    .i2 {
      height: 100px;
      background-color: yellow;
      position: fixed;
      left: 10px;
      right: 0;
      top: 10px;
    }

    .i3 {
      width: 100px;
      background-color: green;
      position: fixed;
      top: 0px;
      bottom: 0px;
      left: 200px;
    }
  </style>
</head>

<body>
  <div class="i1"></div>
  <div class="i2"></div>
  <div class="i3"></div>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
</body>

</html>

Awesome文件导入，放在根目录下，放置加载图标

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.css">
  <style>
    .fa-gg-circle {
      font-size: 50px;
    }
  </style>
</head>

<body>
  <!-- fa不能删除 -->
  <!-- <i class="fa 想要图标的类名"></i> -->
  <i class="fa fa-camera-retro"></i>
  <i class="fa fa-chrome"></i>
  <i class="fa fa-gg fa-spin"></i>
  <i class="fa fa-gg-circle"></i>
  <i class="fa fa-spinner fa-pulse"></i>
</body>

</html>