首页 前端知识 7种web前端页面css(css3)布局方式,不知道最后两种方式的就亏大了

7种web前端页面css(css3)布局方式,不知道最后两种方式的就亏大了

2024-05-11 23:05:50 前端知识 前端哥 168 733 我要收藏

前端页面常见的布局方式有以下几种

1、文档流 --内联元素从左往右排列,块级元素从上往下排列。
2、float(浮动)布局
3、position (定位)布局
4、display inline-block (行向)布局
5、margin 布局
6、display:flex 弹性布局
7、display:grid 栅格布局

1、文档流 (正常流,也叫文档流)

内联元素从左往右排列,块级 元素从上往下排列。

<p>
        <span>111</span>
        <span>222</span>
        <span>333</span>
    </p>
    <div>
        <el-button size="small" @click="handleCancel()">提 交</el-button>
        <el-button size="small" @click="handleCancel()">返 回</el-button>
        <el-button size="small" @click="handleCancel()">重 置</el-button>
    </div>

这里div、p元素属于块级元素,每个元素单独占一行,span、el-button,属于内联元素,并列排,直到宽带不够,自动换行

2、float(浮动)布局

CSS传统的 布局技术float 和 clear,用于实现多栏布局和处理浮动元素带来的影响,但有个缺点,会造成浮动塌陷,需要主动清除浮动。

<div class="container clearfix">
        <div class="left-column">
            <h2>Left Column</h2>
            <p>This is the content of the left column.</p>
        </div>
        <div class="right-column">
            <h2>Right Column</h2>
            <p>This is the content of the right column.</p>
        </div>
    </div>
     <style>
        .container {
            width: 100%;
            overflow: auto; /* 清除浮动元素影响 */
        }

        .left-column {
            width: 30%;
            float: left;
        }

        .right-column {
            width: 70%;
            float: left;
        }

        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
    </style>

在这个示例中,我们创建了一个包含两个栏目的容器,分别是左栏和右栏。我们使用 float 属性将这两个栏目浮动到左侧,以实现两栏布局。

为了清除浮动元素所带来的影响,我们使用了 clearfix 类。这是一种常见的做法,通过在父元素上添加一个伪元素并设置 clear: both; 来清除浮动。

在实际项目中,推荐使用更现代的布局技术,如 Flexbox 或 Grid,以便更轻松地创建复杂的布局,并避免 float 和 clear 带来的一些问题

3、position (定位)布局

position 是 CSS 属性之一,用于控制元素在页面上的定位方式。position 属性有多个可选值,每个值都会影响元素的定位方式和如何与其他元素交互。以下是常见的 position 属性值及其作用:

  • static: 这是默认值,元素按照文档流布局,不受其他定位属性的影响。设置为 static 时,top、right、bottom 和 left 属性无效。
  • relative: 元素相对于其原始位置进行定位,但仍保留文档流中的位置。您可以使用 top、right、bottom 和 left 属性来设置相对偏移。
  • absolute: 元素相对于其最近的已定位的父元素进行定位,如果没有已定位的父元素,则相对于文档进行定位。元素从文档流中脱离,不会占据空间。也可以使用 top、right、bottom 和 left 属性来设置绝对定位。
  • fixed: 元素相对于视口进行定位,即使页面滚动也不会改变其位置。常用于创建固定在页面上某个位置的导航栏、工具栏等。
  • sticky: 元素在跨越特定阈值前为相对定位,之后变为固定定位。常用于创建在页面滚动时“粘性”定位的元素,比如表头
.my-element {
    position: relative; /* 或其他position值 */
    top: 10px;
    left: 20px;
}

使用 position 属性时,务必注意元素的定位方式和影响范围,以确保您获得所需的布局效果。配合其他属性如 top、right、bottom 和 left,您可以更精确地控制元素在页面上的位置。但请谨慎使用 position 属性,以避免布局问题和复杂性。

4、display inline-block (行向)布局

display: inline-block; 是一种 CSS 属性值组合,用于在水平方向上创建行内块级元素。它结合了 display: inline; 和 display: block; 的特性,允许元素在同一行内显示,并且具有块级元素的盒模型特性。

使用 display: inline-block; 可以在不使用浮动或定位的情况下实现一些特定的布局需求,例如创建一行内的多个元素并允许设置宽度、高度和内外边距。

<div class="box">
        <p>Box 1</p>
    </div>
    <div class="box">
        <p>Box 2</p>
    </div>
    <div class="box">
        <p>Box 3</p>
    </div>

    <style>
        .box {
            display: inline-block;
            width: 150px;
            height: 100px;
            margin: 10px;
            padding: 10px;
            border: 1px solid #ccc;
        }
    </style>

示例中,我们创建了三个具有 display: inline-block; 样式的 div 元素,它们会在同一行内显示。每个 div 元素都具有设置的宽度、高度、内外边距和边框,且它们按照设定的间距排列。

display: inline-block; 常用于创建水平导航菜单、横向的卡片布局等。需要注意的是,由于它是行内块级元素,因此会受到行内元素的换行和空白字符影响。如果不想让它们在代码中产生额外的空白字符,可以将元素标签写在一行

5、margin 布局

使用 margin 进行布局是一种传统的 CSS 布局方法,以下是一个使用 margin 进行简单布局的示例,展示如何在一个容器中创建多个带有间距的块元素:

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<style>
    .container {
        width: 100%;
        text-align: center; /* 居中块元素 */
    }
    .box {
        display: inline-block;
        width: 150px;
        height: 100px;
        margin: 10px;
        background-color: #ccc;
    }
</style>

创建了一个具有 .container 类的容器,以及三个具有 .box 类的块元素。每个 .box 元素都具有指定的宽度、高度和 margin。通过设置 display: inline-block;,这些块元素将在同一行内显示。

通过调整 .box 元素的 margin 值,您可以控制它们之间的间距。在这个例子中,每个块元素都具有 10px 的外边距,从而在它们之间创建了一定的间距

注:需要注意的是,使用 margin 布局可能会受到外边距折叠的影响,特别是在垂直方向上。在复杂布局中,可能需要额外的 CSS 或技巧来解决这些问题

6、display:flex 弹性布局

display: flex; 是 CSS 中的一个属性,用于创建灵活的盒子模型,使其更容易实现各种布局需求。Flexbox(弹性盒模型)是一种现代的 CSS 布局技术,适用于水平和垂直方向上的布局,具有响应式设计的优势

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<style>
   .container {
        display: flex;
        justify-content: space-between; /* 在容器内均匀分布子元素 */
    }
    .box {
        width: 150px;
        height: 100px;
        background-color: #ccc;
        margin: 10px;
    }
</style>

将.container 容器,并将其设置为 display: flex;。这使得容器内的子元素(.box 元素)成为一个弹性容器。我们还使用了 justify-content: space-between; 属性,将子元素在容器内均匀分布,创建了一种类似于多栏布局的效果。

使用 display: flex; 的优点包括更少的代码、更少的浮动、更少的清除浮动需求以及更灵活的布局控制

以下是一些常用的 Flexbox 属性:

  • 容器属性(应用于父元素)

    • display: 定义一个元素作为 Flex 容器。设置为 flex 会创建一个行级 Flex 容器,设置为 inline-flex 则会创建一个内联 Flex 容器。
    • flex-direction: 定义 Flex 容器内项目的排列方向。可选值为 row(默认,水平排列)、column(垂直排列)、row-reverse 和 column-reverse。
    • justify-content: 定义项目在主轴上的对齐方式。可选值有 flex-start、flex-end、center、space-between、space-around 等。
    • align-items: 定义项目在交叉轴上的对齐方式。可选值有 flex-start、flex-end、center、baseline、stretch 等。
    • align-content: 定义多根轴线的对齐方式(仅当项目在多行上排列时有效)。可选值有 flex-start、flex-end、center、space-between、space-around、stretch 等。
  • 项目属性(应用于子元素):

    • order: 定义项目的排列顺序。数值越小,排列越靠前。
    • flex-grow: 定义项目在剩余空间中的放大比例。
    • flex-shrink: 定义项目在空间不足时的缩小比例。
    • flex-basis: 定义项目的初始主轴尺寸。
    • flex: 为 flex-grow、flex-shrink 和 flex-basis 的简写属性。
    • align-self: 定义单个项目在交叉轴上的对齐方式,覆盖容器上的 align-items 设置。可选值有 auto、flex-start、 - flex-end、center、baseline、stretch 等。

这里只列了一部分属性,要深入了解 Flexbox,您可以参考 MDN 文档或其他 CSS 教程。

7、display:grid 栅格布局

display: grid; 是一种现代的 CSS 布局技术,用于创建二维网格布局。Grid 布局使得在水平和垂直方向上都能够非常灵活地进行布局。您可以将容器划分为行和列,并在交叉点上放置项目

以下是一些常用的 display: grid; 相关的属性:

(1)、grid-template-columns 设置列
(2)、grid-template-rows 设置行
(3)、grid-template-areas 定位空间
(4)、grid-template (1)和(2)和(3)组合使用缩写
(5)、grid-column-gap 设置列间隙
(6)、grid-row-gap 设置行间隙
(7)、grid-gap (5)和(6)组合使用缩写
(8)、justify-items 设置水平对齐内容位置
(9)、align-items 设置垂直对齐内容位置
(10)、justify-content
(11)、align-content

实例如下:

<template>
	<view class="content">
		<view class="one-feeds-box" v-for="(data,i) in showFeedsList">
			<view class="one-feed" v-for="(item,index) in data" :key="index" :class="index%6==0?(i%2==0?'feed-big-left':'feed-big-right'):''">
				<navigator url="">
					<img :src="item.cover" class="feed-content" mode="aspectFill" :lazy-load="true">
				</navigator>
			</view>
		</view>
	</view>
</template>

<style>
    .content{
	background-color: #fff;
	padding-bottom: 20upx;
	.one-feeds-box{
		outline: 1px solid gray;
		width: 704upx;
		margin: 4upx 22upx 0 22upx;
		display: grid;
		grid-template-columns: 232upx 232upx 232upx;
		grid-template-rows: 232upx 232upx 232upx;
		grid-row-gap: 4upx;
		grid-column-gap: 4upx;
		background-color: #dadada;
		.one-feed{
			position: relative;
			.feed-content{
				width: 232upx;
				height: 232upx;
				border: 1px solid #eee;
				border-radius: 4upx;
			}
			&.feed-big-left{
				grid-column-start: 1;
				grid-column-end: 3;
				grid-row-start: 1;
				grid-row-end: 3;
				background-color: #dadada;
				.feed-content {
					width: 466upx;
					height: 466upx;
					border: 1px solid #EEEEEE;
				}
			}
			&.feed-big-right {
				grid-column-start: 2;
				grid-column-end: 4;
				grid-row-start: 1;
				grid-row-end: 3;
				background-color: #DADADA;
				.feed-content {
					width: 466upx;
					height: 466upx;
					border: 1px solid #EEEEEE;
					}
				}
		}
		
	}
</style>

  • 容器属性(应用于父元素):

    • display: 将元素设置为网格容器。设置为 grid 会创建一个块级网格容器,设置为 inline-grid 则会创建一个内联网格容器。

    • grid-template-columns: 定义网格列的大小和数量。您可以指定像素、百分比、自动填充、网格轨道等值。

    • grid-template-rows: 定义网格行的大小和数量,使用的值类似于 grid-template-columns。
      项目属性(应用于子元素):

    • grid-column: 定义项目所占的列数范围。例如,grid-column: 2 / 4; 表示项目占据第2列到第4列。

    • grid-row: 定义项目所占的行数范围。类似于 grid-column,您可以设置起始和结束的行号。

    • grid-area: 为项目同时定义网格行和列。可以将它们组合在一起,如 grid-area: 2 / 1 / 3 / 3;。

  • 其他布局属性:

    • grid-gap 或 gap: 定义网格行和列之间的间距。
    • justify-items: 定义项目在单元格内的水平对齐方式。
    • align-items: 定义项目在单元格内的垂直对齐方式。
    • justify-content: 定义项目在网格容器内的水平对齐方式。
    • align-content: 定义项目在网格容器内的垂直对齐方式。

使用 display: grid; 布局可以实现复杂的网格结构,包括自适应和响应式设计。您可以根据具体需求设置网格的行列,以及项目的位置和对齐方式。与 Flexbox 相比,Grid 布局在处理二维布局时更具优势。如需深入了解 display: grid; 布局,请查阅 MDN 文档或其他 CSS 教程。

以上7中页面布局在实际项目中都有所使用,推荐Flex 布局和 Grid 布局,都是现代 CSS 布局方式中非常流行的两种

1、Flex 布局相对于 Grid 布局更加灵活,列表、导航菜单之类的布局。
2、Grid 布局相对于 Flex 布局更加强大,比如网格式布局、多栏排版等,则建议选择 Grid 布局。    
需要注意的是,使用 Grid 布局的话,兼容性方面需要更加考虑。而 Flex 布局的兼容性比 Grid 布局更加良好。
转载请注明出处或者链接地址:https://www.qianduange.cn//article/8183.html
标签
评论
发布的文章

JSON三种数据解析方法

2024-05-22 09:05:13

使用nvm管理(切换)node版本

2024-05-22 09:05:48

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!