html+css布局

最新推荐文章于 2024-04-24 09:27:42 发布

VIP文章 sh2001824

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量2.6k

点赞数 5

文章标签： html css 前端

本文链接：https://blog.csdn.net/sh2001824/article/details/125998713

版权

html+css的布局方式

总共分为浮动布局、定位布局、flex布局、table-cll表格布局、网格布局

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域

一、display（flex）布局

display中的属性

1.flex-direction:

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿

2.flex-wrap:

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方

justify-content:

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

align-items:
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

二、网格布局

网格布局就是把HTML 元素设置为 display，属性为 grid

grid-template-columns 属性在网格容器中创建列
grid-template-rows 属性在网格容器中设置行的高度

实例：

<!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>Document</title>
    <style>
        main {
            width: 800px;
            height: 600px;
            border: 1px solid darkcyan;
            display: grid;
            gr