【css布局】传统布局详解梳理及原因分析

本文详细讲解了CSS布局中的块元素和行内元素,以及如何实现水平布局、垂直布局、居中对齐。重点讨论了块元素的转换、行内块元素的使用场景和各种居中技巧,包括margin、position属性的应用。

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

【css布局】布局详解梳理及原因分析

前言

		本文基于vue绘制样式

零、块元素和行内元素

  1. 块级元素:块元素前后都不能有行内元素和文本节点。
<div><p><h1>...<h6><ol><ul><dl><table>
<address><blockquote><form>
  1. 行内元素:但不能设置它的width、height、margin、padding属性,即使设置了,也是不生效的。
<span></span><a></a><img /><input type="" />
  1. 块元素和行内元素的区别,块元素自动换行,行内元素在同一行
  2. 举例说明先看效果图:
    在这里插入图片描述
  3. 代码如下(可忽略)
<template>
    <div>
        <div class="d d1"></div>
        <div class="d d2"></div>
        <p>p1</p>
        <p>p2</p>
        <h1> h1 </h1>
        <h1> h2 </h1>
        <span>sp1</span>
        <span>sp2</span>
        <a>a1</a>
        <a>a2</a>
        <img src="../assets/logo.png"/>
        <img src="../assets/logo.png"/>
        输入1<input type="text">
        输入2<input type="text">
    </div>
</template>

<script>
    export default {
        name: "Demo1"
    }
</script>

<style scoped>
    .d{
        width: 100px;
        height: 100px;
        background-color: red;
        border: solid #42b983;
    }
</style>

问题一、是否可以将块元素和行内元素互相转换?
答案是可以的。转换效果如下,将上面所有的行内元素转成块元素,将块元素转成行内元素。
在这里插入图片描述
问题二、上面的div设置为inline之后为什么展示效果不再是一个正方形?
因为转为行内元素,不能设置宽高,宽高不生效。
相应的,之前的span等行内元素设为block后,可以设置宽高了。
问题三、inline-block(行内块元素)什么情况使用?
问题二的情况,需要使用inline-block,既要一行显示,又要设置宽高。

一、水平布局和垂直布局

看此部分之前,请先看零、块元素和行内元素
默认布局方式参考零、块元素和行内元素,不再多说。

1、div块元素布局详解

1.1、垂直和水平布局
  1. div块元素默认垂直布局,效果图如下:
    在这里插入图片描述
  2. 代码如下:(三个div,无任何布局样式调整,默认垂直布局)
<template>
    <div>
        <div class="d d1"></div>
        <div class="d d2"></div>
        <div class="d d3"></div>
    </div>
</template>

<script>
    export default {
        name: "Demo1"
    }
</script>

<style scoped>
    .d{
        width: 100px;
        height: 100px;
        background-color: red;
        border: solid #42b983;
    }
</style>

原因分析:
div块元素。默认垂直布局。
2、div块元素水平布局,效果图如下:
在这里插入图片描述
2、代码如下:

<template>
    <div>
        <div class="d d1"></div>
        <div class="d d2"></div>
        <div class="d d3"></div>
    </div>
</template>

<script>
    export default {
        name: "Demo1"
    }
</script>

<style scoped>
    .d{
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
        border: solid #42b983;
    }
</style>

原因分析
行内块元素

1.2、水平居中和垂直居中

结合1.1的块元素及行内块元素,实现水平居中:

1.2.1、块元素水平居中:

在这里插入图片描述
代码如下:

.d{
        margin: 0 auto;
        width: 100px;
        height: 100px;
        background-color: red;
        border: solid #42b983;
    }

原因分析
每个块占用一行,通过margin实现当前块元素居中。

1.2.2、行内块元素的水平居中:

先看代码:

.d{
        margin: 0 auto;
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
        border: solid #42b983;
    }

再看效果:(不生效)
在这里插入图片描述
先截图看效果,行内块元素,每个元素是它自身的宽度。所以对当前块单独设置margin: 0 auto 不生效。
修改后效果如下:(增加父布局样式)
在这里插入图片描述
代码如下:

<template>
    <div class="d-p">
        <div class="d d1"></div>
        <div class="d d2"></div>
        <div class="d d3"></div>
    </div>
</template>

<script>
    export default {
        name: "Demo1"
    }
</script>

<style scoped>
    .d-p{
        text-align: center;
    }
    .d{
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
        border: solid #42b983;
    }
</style>

原因分析
父布局看作一个容器,父布局占用一行,其中三个div块是它的内容。通过设置内容居中实现子div水平居中。

此处插入一个问题
问题一、直接设置父布局的div的heght高度100%不生效
代码如下:

<template>
    <div class="d-p">
        <div class="d d1"></div>
        <div class="d d2"></div>
        <div class="d d3"></div>
    </div>
</template>

<script>
    export default {
        name: "Demo1"
    }
</script>

<style scoped>
    .d-p{
        background-color: aqua;
        text-align: center;
        height: 100%;
    }
    .d{
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
        border: solid #42b983;
    }
</style>

效果如下:
在这里插入图片描述
修改App.vue的父元素高度为100%即可,代码如下:

html,body,#app{
        height: 100%;
    }

在这里插入图片描述

1.2.3、块元素垂直居中:
1.2.3.1、css position基础说明:(可跳过)

position:absolute;绝对定位,元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
例如:

<template>
    <div class="d-p">
        <div class="d d1"></div>
    </div>
</template>

<script>
    export default {
        name: "Demo1"
    }
</script>

<style scoped>
    .d-p{
        background-color: aqua;
        height: 100%;
    }
    .d1{
        position: absolute;
        left: 100px;
        top: 100px;
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
        border: solid #42b983;
    }
</style>

效果如下:
在这里插入图片描述
问题一、此处是相对于父布局还是相当于浏览器窗口?
相对于父布局,例证如下:父布局绝对布局向右移动200像素。子布局跟着动。
定义:相对于 static 定位以外的第一个父元素进行定位。

.d-p{
        background-color: aqua;
        height: 50%;
        width: 50%;
        position: absolute;
        bottom: 0px;
        left: 200px;
    }
    .d1{
        position: absolute;
        left: 100px;
        top: 100px;
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
        border: solid #42b983;
    }

效果图:
在这里插入图片描述
position : fixed 绝对定位,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
代码如下:

<template>
    <div class="d-p">
        <div class="d d1"></div>
    </div>
</template>

<script>
    export default {
        name: "Demo1"
    }
</script>

<style scoped>
    .d-p{
        background-color: aqua;
        height: 50%;
        width: 50%;
        position: absolute;
        bottom: 0px;
        left: 200px;
    }
    .d1{
        position: fixed;
        left: 100px;
        top: 100px;
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
        border: solid #42b983;
    }
</style>

在这里插入图片描述
position : relative 生成相对定位的元素,相对于它正常位置进行定位。
先理解一下正常位置的概念,就是没有任何修改的位置。直观效果如下:

.d-p{
        background-color: aqua;
        height: 50%;
        width: 50%;
        position: absolute;
        bottom: 0px;
        left: 200px;
    }
    .d1{
        width: 100px;
        height: 100px;
        background-color: red;
        border: solid #42b983;
    }

效果如下:
在这里插入图片描述
使用相对定位效果如下:
在这里插入图片描述
代码如下:

.d-p{
        background-color: aqua;
        height: 50%;
        width: 50%;
        position: absolute;
        bottom: 0px;
        left: 200px;
    }
    .d1{
        position: relative;
        left: 100px;
        top: 100px;
        width: 100px;
        height: 100px;
        background-color: red;
        border: solid #42b983;
    }

position : static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。这些声明都不会有任何效果。效果,略。
position : inherit 规定应该从父元素继承 position 属性的值。举例如下:

.d1{
        position: inherit;
        left: 100px;
        top: 100px;
        width: 100px;
        height: 100px;
        background-color: red;
        border: solid #42b983;
    }

在这里插入图片描述

1.2.3.2、垂直居中布局

效果图:
在这里插入图片描述
代码如下:使用绝对定位absolute相对于父元素的上下50%,偏移50%

<template>
    <div class="d-p">
        <div class="d d1"></div>
    </div>
</template>

<script>
    export default {
        name: "Demo1"
    }
</script>

<style scoped>
    .d-p{
        background-color: aqua;
        height: 100%;
        width: 100%;
        position: absolute;
    }
    .d1{
        position: absolute;
        left:50%;top:50%;transform:translate(-50%,-50%);
        width: 100px;
        height: 100px;
        background-color: red;
        border: solid #42b983;
    }
</style>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值