XF-TECH

- flfxt -

已于 2022-04-10 13:26:57 修改

阅读量79

点赞数

分类专栏： flfxt 文章标签：其他

于 2021-08-07 21:48:24 首次发布

本文链接：https://blog.csdn.net/weixin_44651376/article/details/119493422

版权

flfxt 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客深入探讨了前端布局的各种模式，包括盒模型、网格系统、响应式设计以及Flexbox和Grid布局。通过示例代码和图形解释，详细阐述了如何创建复杂的网页布局，同时提到了CSS新特性在布局中的应用，如Flexbox的灵活性和Grid的强大定位功能。

摘要由CSDN通过智能技术生成

/*
┌──┐┌──┐┌─────┐    ┌─────┐┌─────┐┌─────┐┌─┐ ┌─┐
│  ││  ││ ┌───┘    └─┐ ┌─┘│ ┌───┘│ ┌─┐ ││ │ │ │
└─┐└┘┌─┘│ └─┐┌──────┐│ │  │ └──┐ │ │ └─┘│ └─┘ │
┌─┘┌┐└─┐│ ┌─┘└──────┘│ │  │ ┌──┘ │ │ ┌─┐│ ┌─┐ │
│  ││  ││ │          │ │  │ └───┐│ └─┘ ││ │ │ │
└──┘└──┘└─┘          └─┘  └─────┘└─────┘└─┘ └─┘
*/
/*
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┄┄┄┏━━┓┏━━┓┏━━━━━┓┄┄┄┄┏━━━━━┓┏━━━━━┓┏━━━━━┓┏━┓┄┏━┓┄┄┄
┄┄┄┃┄┄┃┃┄┄┃┃┄┏━━━┛┄┄┄┄┗━┓┄┏━┛┃┄┏━━━┛┃┄┏━┓┄┃┃┄┃┄┃┄┃┄┄┄
┄┄┄┗━┓┗┛┏━┛┃┄┗━┓┏━━━━━━┓┃┄┃┄┄┃┄┗━━┓┄┃┄┃┄┗━┛┃┄┗━┛┄┃┄┄┄
┄┄┄┏━┛┏┓┗━┓┃┄┏━┛┗━━━━━━┛┃┄┃┄┄┃┄┏━━┛┄┃┄┃┄┏━┓┃┄┏━┓┄┃┄┄┄
┄┄┄┃┄┄┃┃┄┄┃┃┄┃┄┄┄┄┄┄┄┄┄┄┃┄┃┄┄┃┄┗━━━┓┃┄┗━┛┄┃┃┄┃┄┃┄┃┄┄┄
┄┄┄┗━━┛┗━━┛┗━┛┄┄┄┄┄┄┄┄┄┄┗━┛┄┄┗━━━━━┛┗━━━━━┛┗━┛┄┗━┛┄┄┄
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/

  ___   ___   ________       ________   ________   ________   __    __ 
 |   | |   | |   _____|     |__    __| |   _____| |   __   | |  |  |  |
 |_  |_|  _| |  |___   ______  |  |    |  |___    |  |  |__| |  |__|  |
  _|  _  |_  |   ___| |______| |  |    |   ___|   |  |   __  |   __   |
 |   | |   | |  |              |  |    |  |_____  |  |__|  | |  |  |  |
 |___| |___| |__|              |__|    |________| |________| |__|  |__|
 
/*
┌───────┐┌──────┐┌──────┐┌───────┐┌─┐ ┌─┐
│ ┌───┐ ││ ┌──┐ ││ ┌──┐ │└┐ ┌──┐ ││ │ │ │
│ │   └─┘│ └──┘ ││ └──┘ │ │ │  │ ││ └─┘ │
│ │ ┌───┐│ ┌─┐ ┌┘│ ┌──┐ │ │ │  │ │└─┐ ┌─┘
│ │ └─┐ ││ │ │ │ │ │  │ │ │ │  │ │  │ │  
│ └───┘ ││ │ │ └┐│ │  │ │┌┘ └──┘ │  │ │  
└───────┘└─┘ └──┘└─┘  └─┘└───────┘  └─┘  
*/

/*
┌──────┐┌─────┐┌─────┐┌──────┐┌─┐ ┌─┐
│ ┌──┐ ││ ┌─┐ ││ ┌─┐ │└┐ ┌─┐ ││ │ │ │
│ │  └─┘│ └─┘ ││ └─┘ │ │ │ │ ││ └─┘ │
│ │ ┌──┐│ ┌┐ ┌┘│ ┌─┐ │ │ │ │ │└─┐ ┌─┘
│ │ └┐ ││ ││ │ │ │ │ │ │ │ │ │  │ │  
│ └──┘ ││ ││ └┐│ │ │ │┌┘ └─┘ │  │ │  
└──────┘└─┘└──┘└─┘ └─┘└──────┘  └─┘  
*/

/*
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┄┄┄┏━━━━━━┓┏━━━━━┓┏━━━━━┓┏━━━━━━┓┏━┓┄┏━┓┄┄┄
┄┄┄┃┄┏━━┓┄┃┃┄┏━┓┄┃┃┄┏━┓┄┃┗┓┄┏━┓┄┃┃┄┃┄┃┄┃┄┄┄
┄┄┄┃┄┃┄┄┗━┛┃┄┗━┛┄┃┃┄┗━┛┄┃┄┃┄┃┄┃┄┃┃┄┗━┛┄┃┄┄┄
┄┄┄┃┄┃┄┏━━┓┃┄┏┓┄┏┛┃┄┏━┓┄┃┄┃┄┃┄┃┄┃┗━┓┄┏━┛┄┄┄
┄┄┄┃┄┃┄┗┓┄┃┃┄┃┃┄┃┄┃┄┃┄┃┄┃┄┃┄┃┄┃┄┃┄┄┃┄┃┄┄┄┄┄
┄┄┄┃┄┗━━┛┄┃┃┄┃┃┄┗┓┃┄┃┄┃┄┃┏┛┄┗━┛┄┃┄┄┃┄┃┄┄┄┄┄
┄┄┄┗━━━━━━┛┗━┛┗━━┛┗━┛┄┗━┛┗━━━━━━┛┄┄┗━┛┄┄┄┄┄
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/

 _______   _______   _______   ________   _     _
|  ___  | |  ___  | |  ___  | |_   __  | | |   | |
| |   |_| | |___| | | |___| |   | |  | | | |___| |
| |  ___  |  _   _| |  ___  |   | |  | | |__   __|
| | |_  | | | | |   | |   | |   | |  | |    | |
| |___| | | | | |_  | |   | |  _| |__| |    | |
|_______| |_| |___| |_|   |_| |________|    |_|

- flfxt -

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
XF-TECH

/*┌──┐┌──┐┌─────┐ ┌─────┐┌─────┐┌─────┐┌─┐ ┌─┐│ ││ ││ ┌───┘ └─┐ ┌─┘│ ┌───┘│ ┌─┐ ││ │ │ │└─┐└┘┌─┘│ └─┐┌──────┐│ │ │ └──┐ │ │ └─┘│ └─┘ │┌─┘┌┐└─┐│ ┌─┘└──────┘│ │ │ ┌──┘ │ │ ┌─┐│ ┌─┐ ││ ││ ││ │ │ │ │ └───┐│ └─┘ ││ │ │ │└──┘└──┘└─┘
复制链接

扫一扫

专栏目录