天景科技苑

这个屌丝很懒，什么也没留下！

热门标签

前端必备的几种ui布局的方式_web前端怎么给ui标签设置位置

作者：天景科技苑 | 2024-07-12 05:02:20

踩

web前端怎么给ui标签设置位置

在Web 开发中，很重要的一部分的工作就是设计好看的页面。Web页面由文字、图片、视频等元素组成，想要设计出漂亮的网页，还需要一些动画的辅助，做这一切的前提是我们能够对网页中的元素有完全的控制权，比如让一张图始终停留到左上角，让文字环绕在某张图的旁边。

Web发展了这么长时间，随着移动端的出现，Web 也需要支持在移动端可以完美地展示。因此，web 的布局方式也在不断优化。目前支持 7 种布局方式「流式、position、float、flexbox、grid、table、muti-column」。相比移动端来说更胜一筹。

Web 的布局是通过 CSS 来控制的，一个 Web 页面是由一堆 HTML 标签组成，比如 div、p、span。今天我们先看看 Web 支持的默认布局方式「流式布局」。

流式布局

HTML 中有 block 和 inline-block 两种标签，它们在流式布局中具有不同的表现：

1. inline-block 标签可以嵌套在 block 标签中，反之则不可；

2.可以通过 display 修改标签属于 block 或者 inline-block 类型；

3.block 类型的标签布局是每一个标签独占一行，而 inline-block 标签会一个挨着一个进行布局；<head>

    <meta charset="utf-8">    <title>Basic document flow</title>
    <style>        body {            width: 500px;            /* 下面这句话竟然能居中 */            margin: 0 auto;        }
        p {            background: aqua;            border: 3px solid blue;            padding: 10px;            margin: 10px;        }
        span {            background: red;            border: 1px solid black;        }
        .positioned {            background: yellow;        }</style></head>
<body>    <h1>我是Web流式布局</h1>    <p>我是一个 p 标签</p>    <p class="positioned">我也是一个 p 标签</p>    <p>我还是一个 p 标签</p>    <p>我是 p <span>我是 span 标签</span> and <span>我是 span 标签</span> 哈哈</p>
</body>

上面的代码按照流式布局效果如下：

通过 display 修改 span 标签为 block 标签:

span {

display: block;

background: red;

border: 1px solid black;

}

显预览效果如下（sapn会独占一行）：

流式布局中，每个元素的布局顺序与代码的顺序一致，这是基本的布局方式，需要掌握。

流式布局无法满足某些需求，比如某个文字就要固定到网页中的某个位置，这时候就必须通过某种方式来打破流式布局，也就是说通过某种方式，把按流式布局的元素让其脱离流式布局，寻求另外一种新的布局方式。流式布局：

<!DOCTYPE html><html>
<head>    <meta charset="utf-8">    <title>Basic document flow</title>
    <style>        body {            width: 500px;            /* 下面这句话竟然能居中 */            margin: 0 auto;        }
        p {            background: aqua;            border: 3px solid blue;            padding: 10px;            margin: 10px;        }
        span {            background: red;            border: 1px solid black;        }
        .positioned {            background: yellow;        }</style></head>
<body>    <h1>Web布局方式</h1>    <p>我是一个 p 标签</p>    <p class="positioned">我也是一个 p 标签</p>    <p>我还是一个 p 标签</p>    <p>我是 p <span>我是 span 标签</span> and <span>我是 span 标签</span> 哈哈</p>
</body>
</html>

通过 position 的方式可以打破流式布局，它支持的值有：static，relative，absolute，fix 和 sticky。

static：默认值，它遵循流水布局；

relative：相对布局，需要结合 top、bottom、left 和 right 配合使用，仅设置 position:relative 属性不管作用。它不会打破默认的布局的方式，只会在默认的布局方式发生偏移。修改上面的postioned 的样式：

.positioned {

    position: relative;    top: 30px;    left: 20px;    background: yellow;}

预览后发现黄色的标签会「在流式布局的基础上」向左偏移了 30px，向上偏移了 20px，效果如下：

absolute：绝对布局，这种布局方式会 使元素脱离原有的流式布局。修改上面的 postioned 的样式：

.positioned {

position: absolute;

top: 30px;

left: 20px;

background: yellow;

}

预览样式如下，黄色的标签会脱离「流式布局」。

以哪个元素作为「参考元素」，取决于它的祖先元素的 postion 属性，如果祖先没有设置 postion 属性，会依据默认的祖先（html标签）作为布局参考。上图就是依据 html 标签为参考。修改 body 的样式为，让黄色的元素把 body 作为「参考元素」：

body {

width: 500px;

/* 下面这句话竟然能居中 */

margin: 0 auto;

position: relative;

}

预览效果如下：

fix：它的作用就是把某个元素固定到某个位置，比如把下面的标题「Web布局方式」始终固定到顶部，无论如何滑动都不会改变其位置。

sticky：它的作用是在某个位置固定某个元素的位置，比如滑动到某个位置后，让其固定。

Flex布局

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

可以参考阮一峰文章：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】