前端第三天 2022.7.20

QSJZSDLZ

已于 2022-07-21 11:12:45 修改

阅读量148

点赞数

文章标签：前端 css html

于 2022-07-21 08:59:09 首次发布

本文链接：https://blog.csdn.net/ZSDLZ37/article/details/125885906

版权

这篇博客探讨了前端布局中的关键概念，包括不同类型的居中方法和实现元素水平、垂直排列的各种策略。此外，还提供了两个实践练习来巩固这些技能。

摘要由CSDN通过智能技术生成

17.居中的几种体现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>居中的几种体现</title>
  <style>
    .box1{
      width: 300px;
      height: 300px;
      background-color: green;
    }
    .box2{
      width: 100px;
      height: 100px;
      background-color: yellow;
    /*  普通文本水平对齐方式，与flex无关 */
    /*  text-align:center;*/
    /*  line-height:100px;*/
      /*普通文本行高属性，设置行高=盒子高度实现内容垂直居中，只适用于盒子中只有一行内容*/
      display: flex;
      justify-content: center;
      align-items: center;
      /*auto自动计算*/
      /*通过计算剩余空间，然后写死左外边距为剩余空间的一半实现水平居中*/
      /*margin-left: 100px;*/
      /*margin: 0px auto;*/
      margin-bottom: 20px;

      
      /*使用定位+平移实现居中*/
      position:relative;
      /*定位后从左往右移动50%（父元素的50%）*/
      left: 50%;
      /*平移 translateX 水平方向平移，50%是自己的50%，正右负左*/
      /*如果水平方向都要平移，就都写到一个里面*/
      transform: translate(-50%,-50%);
      bottom: -50%;
    }
    .sp{
      background-color: red;
      padding: 10px;
    }
  </style>
</head>
<body>
<!--  1.分清什么是居中（盒子？内容？）-->
<!--    内容居中：1.普通文本属性 test-align 和行高属性 line-height-->
<!--            2.使用内边距padding-->
<!--            3.使用flex容器，设置 justify-content 和align-items-->
<!--    盒子居中：1.使用margin外边距实现（只能实现父元素中水平居中）-->
<!--            2.使用相对定位+ position:relative + left:50% 组合 transform:translateX(50%)-->
<!--                                                       组合 transform:translateY(50%)-->
<!--                                                       同时出现 translateX 和 translateY 要写在一起-->
<!--                                                       transform:translate(50%,50%)-->
<!--            3.给父元素使用 flex 容器 ，设置 justify-content 和align-items-->
<div class="box1">
  <div class="box2">hello<br>hello</div>
  <span class="sp">hello</span>
</div>
</body>
</html>

18.实现水平排列和垂直排列的几种方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>实现水平排列和垂直排列的几种方式</title>
  <style>
    /**
    1.使用 float 属性实现左浮动和右浮动，但是有副作用-父元素会塌陷，需要手动清除浮动，否则会对后面的元素产生影响
    2.使用 display 属性切换块级元素和内联元素
      display:block 切换为块级元素，块元素特征：有宽度和高度，独占一行 (在子元素中设置)
      display:inline 切换为内联元素 内联元素特征：没有宽度和高度，不独占一行 (在子元素中设置)
      内元素可以与内元素在一行显示，除非显示不下了会换行，或者用<br>换行
      内元素不可以与块元素在一行显示，因为块元素独占一行
      块元素不可以与块元素在一行显示
      display:inline-block 切换为在一行显示的块元素 (在子元素中设置)
    3.display:flex 切换为 flex 容器，可以管理子元素/或者内容挂的排列 （在父元素中设置）
        flex-direction 设置排列方向
        flex-wrap 设置是否换行
        justify-content 设置主轴排列方向
        align-items 是指交叉轴排列方向
      display:none 隐藏元素，切换为inline/block/inline-block/flex 元素就可以显示
          */
    .box1>div{
      background-color: yellow;
      margin: 5px;
      /*左浮动*/
      /*float: left;*/
      /*右浮动*/
      /*float: right;*/
      /*内联元素没有宽高*/
      display: inline;
      display: inline-block;

    }
    .box2>span{
      background-color: green;
      margin: 5px;
      /*width: 50px;*/
      /*display: block;*/

    }
  </style>
</head>
<body>

<div class="box1">
  <!--div 默认 块元素-->
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="box2">
  <!--span 默认 内联元素-->
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
</div>
</body>
</html>

练习1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>练习1</title>
<style>
  .box>div{
    color: white;
    font-family: 楷体 ;
    font-style: oblique;
    font-size: xxx-large;
    background-color: #ffb101;

    margin: 10px;
    width: 100px;
    height: 100px;

    /*float: left;*/

    border-radius: 100px;

    text-align:center;
    line-height:100px;

    display: inline-block;


  }
</style>
</head>
<body>
<div class="box">
  <div>商品</div>
  <div>商品</div>
  <div>商品</div>
  <div>商品</div>
  <div>商品</div>
</div>
</body>
</html>

练习2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>练习2</title>
  <style>
    .box{
      height: 60px;
      display: flex;

      text-align: center;
      background-color: pink;

      display: flex;
      justify-content: end;
      text-align:center;
      align-items: center;
    }
    .box>span{
      background-color: #ffb101;
      border-radius: 10px;
      margin: 10px;
      height: 40px;
      width: 100px;

      display: flex;
      justify-content: center;
      align-items: center;


    }
  </style>
</head>
<body>
<div class="box">
  <span>我的商品</span>
  <span>我的订单</span>
  <span>我的客服</span>
  <span>我的购物车</span>
  <span>我的地址</span>
</div>
</body>
</html>