HTML rem布局 html布局教程

转载

mob6454cc773039 2024-04-22 13:28:10

文章标签 HTML rem布局 html5 html 自适应 HTML 文章分类 机器学习人工智能

每天优于别人并不高贵，优于自己才是高贵

文章目录

前言
首先什么是布局
布局的分类
两列布局
三列布局
总结

前言

学不积硅步，无以至千里，不积小流，无以成江海 ~

接下来我们来了解一下什么是HTML中的布局，小白入门！

首先什么是布局

所谓的布局, 就是 HTML 页面的结构。实现布局是要通过 HTML 元素和 CSS 样式结合。

布局特别想盖楼的时候的设计图纸。

布局的分类

目前比较流行的布局:

居中布局: 水平方向居中布局、垂直方向居中布局以及水平和垂直都居中的布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>居中布局</title>
    <style>
        .q {
            width: 1662px;
            height: 300px;
            background-color: blueviolet;
            vertical-align: middle;
            display: table-cell;
        }
        .q1 {
            width: 300px;
            height: 300px;
            background-color: burlywood;
            display: table;
            margin: 0 auto;
        }
        .a {
            width: 1000px;
            height: 600px;
            background-color: chartreuse;
            position: relative;
        }
        .a1 {
            width: 200px;
            height: 200px;
            background-color: coral;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="q">
        <div class="q1"></div>
    </div>
    <div class="a">
        <div class="a1"></div>
    </div>
</body>
</html>

- 多列布局: 两列布局和三列布局、等分布局和等高布局(圣杯布局和双飞翼布局)

全屏布局

从技术角度分化的话:

CSS3 新增的弹性(flex)盒子模型
CSS3 新增的网格(grid)布局

根据场景不同, 也可以这样划分:

响应式布局: 一个 HTML 既可以在 PC 电脑端浏览器打开, 也可以在移动端浏览器打开
移动端布局: 在手机端或平板电脑端浏览器打开

之前比较流行的布局:

圣杯布局(三行三列布局)
双飞翼布局(优化版的圣杯布局, 淘宝前端团队推出的)
瀑布流布局

两列布局

所谓的两列布局, 并不是简单将两个元素水平排列, 而是一列是定宽的, 另一列是自适应的。

其中一列是定宽: 将该元素的宽度设置为固定的宽度
其中一列是自适应: 除了定宽之外所有的宽度都为第二列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两列布局</title>
    <style>
        .q {
            width: 800px;
            height: 300px;
            border: 1px solid #000;
        }
        .q1 {
            width: 200px;
            height: 300px;
            background-color: indianred;
            float: left;
        }
        .q2 {
            height: 300px;
            background-color: indigo;
            margin-left: 200px;
        }
    </style>
</head>
<body>
    <div class="q">
        <div class="q1"></div>
        <div class="q2"></div>
    </div>
</body>
</html>

HTML rem布局 html布局教程_HTML rem布局_02

三列布局

所谓的三列布局, 其中两列是定宽, 另一列是自适应。划分成以下两种情况:

定宽+定宽+自适应: 两个定宽的列是相邻的
定宽+自适应+定宽: 两个定宽的列不是相邻的(自适应这一列在中间)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三列布局</title>
    <style>
        .q {
            width: 800px;
            height: 300px;
            border: 1px solid #000;
            display: table;
            table-layout: fixed;
        }
        .q1,
        .q2,
        .q3 {
            display: table-cell;
        }
        .q2,
        .q3 {
            width: 200px;
            height: 300px;
        }
        .q2 {
            background-color: indianred;
        }
        .q3 {
            background-color: lightgrey;
        }
        .q1 {
            height: 300px;
            background-color: indigo;
        }
    </style>
</head>
<body>
    <div class="q">
        <div class="q1"></div>
        <div class="q2"></div>
        <div class="q3"></div>
    </div>
</body>
</html>