css中如何让div水平居中(下)

一期我们说到了三种解决方案，这期再给大家分享两种方法。

学前端，就找锐盈课堂！！！

先设定html和css样式

html结构，嵌套的两个div

方法一：transform（注意兼容性）

方法二：背下来就行

这两种也很常用，就是要注意兼容性的问题。

学前端，关注锐盈课堂，私信我了解更多！

ue3 嵌套路由的使用和 Vue2 相差不大，主要的区别是 Vue3 的路由实例化使用了 createApp() 方法，所以实例化路由时需要传入根组件。另外，Vue3 的路由对象除了包含 Vue2 中的导航守卫、导航钩子和解析守卫等功能外，还新增了 meta prop 和 route prop。

在使用嵌套路由时，建议将路由按照功能模块进行分层，每一层代表一个主要的功能块，每个层级下的路由数量不要过多，一般建议不要超过 10 个，层级也不要超过 5 层。同时，根据实际业务需求，可以适当调整路由层级和数量，以达到更好的管理和使用效果。

route文件下 index.ts文件代码：

import {
  createRouter,
  createWebHashHistory,
  RouteRecordRaw
} from "vue-router";
// createWebHashHistory,createWebHistory

const routes: RouteRecordRaw[]=[
  {
    path: '/',
    redirect: '/home',
  },
  {
    path: '/home',
    name: 'Home',
    component: ()=> import('@/views/Home/index.vue'),
    meta: {
      title: 'Home Page',
      roles: ['admin', 'admin1']
    },
    children: [
      {
        path: 'lx',
        name: 'Lx',
        component: ()=> import('@/views/Home/Lx.vue'),
        // 也可以使用props传参方式接收传来的参数
        props: (propsRouter)=> {
          // console.log('props >router', propsRouter)
          // 可以return query 也可以return params支持两种传参方式
          return propsRouter.query
        },
        // 多级嵌套 建议用query传参
        children: [
          {
            path: 'childA',
            name: 'ChildA',
            component: ()=> import('@/views/Home/ChildA.vue'),
          },
        ]
      },
      {
        path: 'lxb/:id/:title', // 提前定义params参数（可以定义多个）
        name: 'Lxb',
        component: ()=> import('@/views/Home/Lxb.vue'),
      },
    ]
  },
]

export const router=createRouter({
  // 路由的history模式，共有三种模式，
  // createWebHistory、createWebHashHistory、createMemoryHistory
  history: createWebHashHistory(),// history: createWebHistory(),
  // 路由配置
  routes,
  // 是否严格匹配路由
  strict: true,
  // 路由跳转完成后，页面滚动行为
  scrollBehavior: ()=> ({ left: 0, top: 0 }),
})

main.ts文件代码：

import { router } from './route/index'
import { createApp } from 'vue'

const app=createApp(App)
app.use(router).mount('#app')

App.vue文件代码：

<template>
  <router-view />
</template>

<script>
import { defineComponent } from 'vue'
 // vue3.0版本语法
export default defineComponent({
  name: 'App',
})
</script>

views文件夹下的Home文件夹下的index.vue文件代码：

<template>
  <div class="home">
    <h2>首页{{ title }}</h2>
    <!-- 模拟有权限时显示 -->
    <div v-if="roles.includes(role)">
      <h2>嵌套路由</h2>
      <router-link to="/home/lx">push跳转到/home/lx页面</router-link>
      <br>
      <!-- 加了/就要写全 /home/lxb -->
      <router-link replace to="/home/lxb/id:2/title:102">push跳转到/home/lxb页面</router-link>

      <router-view></router-view>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, onMounted, toRefs, } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export default defineComponent({
  name: 'Home',
  setup() {
    const router=useRouter()
    const route: any=useRoute()

    const state=reactive({
      title: '',
      role: '', // 我的当前角色
      roles: [''],
      routerGo: (path)=> {
        if (path==='lx') {
          // query传参可以用path 也可以用name: Lx
          router.push({
            path: path,
            query: {
              title: '101',
              id: 1
            }
          })
          // router.replace
        } else {
          // params传参只能用name
          router.replace({
            // path: path + '/id:2/title:102',
            name: 'Lxb',
            params: {
              title: '102',
              id: 2
            }
          })
        }
      },
    })
    onMounted(()=> {
      console.log('/home', route)
      state.title=route.meta.title
      state.roles=route.meta.roles
      // 模拟一个接口
      setTimeout(()=> {
        const res={
          code: 200,
          data: {
            token: '123456',
            userName: '吴彦祖',
            role: 'admin'
          }
        }
        state.role=res.data.role
      }, 0)
    })
    return {
      ...toRefs(state)
    }
  }
})
</script>

<style lang="less" scoped>
.home {
  color: pink;
  font-size: 14px;
}
</style>

views文件夹下的Home文件夹下的Lxb.vue文件代码：

<template>
  <div style="font-size: 14px;">
    <h2>我是练习b{{ route?.params?.title }}页面</h2>
    <div>id:{{ route?.params?.id }}</div>
    <button @click="routerGoBack">返回首页</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// vue3.0语法
export default defineComponent({
  name: 'Lxb',
  setup() {
    const route=useRoute()
    const router=useRouter()
    const state: any=reactive({
      routerGoBack: ()=> {
        router.replace('/home')
        // 由replace跳转进来的不可以使用router.go(-1) 路由栈是空的》回不到上一个路由
      },
    })

    onMounted(()=> {
      console.log(route)
    })

    return {
      route,
      ...toRefs(state)
    }
  },
})
</script>

views文件夹下的Home文件夹下的Lx.vue文件代码：

<template>
  <div style="font-size: 14px;">
    <h2>我是练习{{ title }}页面</h2>
    <div>id:{{ id }}</div>
    <div>props: {{ props }}</div>
    <button @click="routerGoBack">返回上一页</button>
    <br>
    <button @click="routerGo('/home/lx/childA')">去子路由childA</button>
    <!-- <router-view></router-view> -->
    <router-view />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// vue3.0语法
export default defineComponent({
  name: 'Lx',
  props: {
    id: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
  },
  setup(props) {
    const route=useRoute()
    const router=useRouter()
    const state: any=reactive({
      id: '',
      title: '',
      routerGoBack: ()=> {
        router.go(-1) // go(-1)回到上一个路由
        // 也可以用router.replace('/home')跳回指定页
      },
      routerGo: (path)=> {
        router.push(path)
      }
    })

    onMounted(()=> {
      console.log('lx route', route)
      console.log('lx props', props)
      if (route.query) {
        state.id=route.query.id
        state.title=route.query.title
      }
    })

    return {
      props,
      ...toRefs(state)
    }
  },
})
</script>

views文件夹下的Home文件夹下的ChildA.vue文件代码：

<template>
  <div style="font-size: 14px;background: skyblue;">
    <h3>我是ChildA组件</h3>
    <h3>route.query:{{ route.query }}</h3>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, } from 'vue'
import { useRoute, useRouter } from 'vue-router'
// vue3.0语法
export default defineComponent({
  name: 'ChildA',
  setup() {
    const router=useRouter()
    const route=useRoute()
    function goBack() {
      router.go(-1)
    }
    onMounted(()=> {
      console.log(route)
    })
    // 可以在页面销毁前清除事件
    // onUnmounted(()=> {
    //   proxy.$mittBus.off('mittUserA')
    // })
    return {
      route, goBack
    }
  },
})
</script>

初始页面效果：

先点击push跳转到/home/lxb页面>（嵌套一层的路由）页面效果：

嵌套一层的路由从原本/home跳入了/home/lxb 子路由页面，点击回到首页。

再点击push跳转到/home/lx页面>（嵌套多层的路由）页面效果：

先去到了第一层/home/lx子路由页面，

再点击去子路由childA按钮>页面效果：

进到了嵌套的第二层/home/lx/childA子路由页面

点击可返回上一页/home/lx 再点击可回到/home首页。

欢迎关注我的原创文章：小伙伴们！我是一名热衷于前端开发的作者，致力于分享我的知识和经验，帮助其他学习前端的小伙伴们。在我的文章中，你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师，还是仅仅对前端开发感兴趣，我的文章将能为你提供宝贵的指导和知识。

在我的文章中，你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。

此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。

我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。

如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！

#前端#

级元素与内联元素的概念与区别

在HTML中，大多数元素都被定义为块级元素或内联元素。

块级元素通常会独立成行，而内联元素会并排显示。

在我们学过的元素中，

块级元素如：<h> <p> <table>这些。

内联元素如<td><a><img>

下面我们通过练习来直观看看他们的区别。

块级元素展示，代码如下：

<body>
  <h1>第一个网页</h1><hr><h2>表格元素</h2><hr>
  <p>块级元素与内联元素</p>
  <p>零基础自学网页制作</p>
  <table border="1" width="50%">
  <thead>
  <tr>
  <td colspan="2">表格的头部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的脚部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格标题</caption>
  <colgroup>
  <col span="1" style="background-color:#ff0000;"></col>
  </colgroup>
  <tr>
  <th>姓名</th>
  <th>年龄</th>
  </tr>
  <tr>
  <td>
  <table border="1" width="100%">
  <tr>
  <td>1</td>
  <td>2</td>
  </tr>
  </table>
  </td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td>二列一行</td>
  <td>二列二行</td>
  </tr>
  </tbody>
  </table>
  </body>

如图：

内联元素展示如下

示例代码：这段代码被我放在了</table>后面。

<a href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin">歼20战斗机</a>
<img src="img/战斗机/image3.jpg" width="200px"/>

效果如图：

其中，<img>标签中的width属性规定了图片的宽度为200px，也就是200像素。

HTML中，如果只对图片的宽或高进行数值指定，那么未指定的数值会随着指定数值进行等比例缩放！

熟知html元素是块级还是内联对以后进行页面布局有一定的指导意义。

<div>与<span>标签

为了方便开发者对页面内容进行布局和调整，html开发者为html加入了专门的区块元素<div></div>。

<div></div>是一个块级元素，大家可以把它理解为一个容器，它本身是不会显示在页面上的。

比如这个！

笔者第一个漫画作品

如果抛开画面内容，我们看到的是一堆对画面进行分割的方格子。像这样

<div></div>元素的作用就是对页面进行了这样的分割。

实际上我们的页面布局都是基于这样思路进行分割的，只是页面上不会像漫画一样显示外边框而已。例如：

强制为其添加边框分割：

大家看明白了吗？<div></div>就是用来对页面进行分割划区域的。

通过给<div>标签设置不同的id属性，可以在css文件中对不同<div>区块中的所有信息进行统一调整样式的操作。

这是对块级元素整体改变样式的方法。

但是，如果我们想对一个块级元素中的不同文字或图片这些内联元素进行单独操作怎么做呢？

html开发者为我们提供了<span></span>这样的内联标签。比如我们对<p>我有一个梦想</p>这个段落元素中的"梦想"两个字进行变化颜色的操作，我们可以这样写：

通过对<span>指定不同的id或class属性在CSS文件中对"梦想"二字进行改变颜色的操作而不会影响段落元素中的其他文字。

今天的内容结束了，下一次我们建立一个新的页面来简单看看<div>元素的基本用法。

喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

在线咨询

上一篇：H5直播RTSP摄像头视频流解决方案
下一篇：文件上传漏洞详解

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商