javaEE 初阶 — CSS 中的弹性布局

与大师约会

已于 2023-06-13 17:24:27 修改

阅读量312

点赞数 2

分类专栏： java EE 从入门到进阶文章标签： css html 前端 java-ee

于 2023-03-15 08:58:14 首次发布

本文链接：https://blog.csdn.net/m0_63033419/article/details/129529756

版权

java EE 从入门到进阶专栏收录该内容

54 篇文章 2 订阅

订阅专栏

弹性布局

布局就是控制某个指定元素放到指定位置上，弹性布局 是用来实现页面布局的。

实现页面布局有以下几种方式：

1、基于表格的布局方式。

2、基于浮动的布局方式，主要是解决 “水平方向排列” 问题。

3、弹性布局，也是解决 “水平方向排列” 问题。

4、网格布局，这是二维的布局，相当于是更加高级的的 “表格布局”。

这次只介绍 弹性布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我真帅</title>

    <style>
        div {
            width: 100%;
            height: 150px;
            background-color: red;
        }

        div > span {
            background-color: green;
            width: 100px;
        }
    </style>

</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>