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

最新推荐文章于 2023-01-28 19:38:03 发布

原创最新推荐文章于 2023-01-28 19:38:03 发布 · 684 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #css布局

springboot 专栏收录该内容

10 篇文章

订阅专栏

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

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

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

文章目录

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

前言

		本文基于vue绘制样式

零、块元素和行内元素

块级元素：块元素前后都不能有行内元素和文本节点。

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>
<address>、<blockquote> 、<form>

行内元素：但不能设置它的width、height、margin、padding属性，即使设置了，也是不生效的。

<span></span><a></a><img /><input type="" />

块元素和行内元素的区别，块元素自动换行，行内元素在同一行
举例说明先看效果图：
代码如下（可忽略）

<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、垂直和水平布局

div块元素默认垂直布局，效果图如下：
代码如下：（三个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>