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

最新推荐文章于 2022-03-31 16:18:19 发布

haibo_bear

最新推荐文章于 2022-03-31 16:18:19 发布

阅读量615

点赞数

分类专栏： springboot 文章标签： css 前端 css布局

本文链接：https://blog.csdn.net/haibo_bear/article/details/90229073

版权

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

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

【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>