CSS 布局概述

🌙
手机阅读
本文目录结构

CSS 布局非常重要!

布局是整个页面的骨架,如果这个架子搭建的不合理,会导致基于骨架的更小模块的各种怪异情况,让你焦头烂额,按下葫芦浮起瓢;

真实项目种写页面,并不会从上到下的逐一写,而是像画素描一样,先定型,定下骨架图,然后慢慢的填充涂鸦等。

掌握布局技巧,可以让你的页面更容易扩展和维护。

介绍

最后总结的链接

https://leohxj.gitbooks.io/front-end-database/html-and-css-basic/assets/Visual-formatting-model.jpg

https://www.imooc.com/article/300513

核心代码

  • 水平居中
  • 垂直居中
  • 水平垂直居中
  • 一行一列
  • 一行两列
  • 一行三列
  • 两行一列
  • 两行两列
  • 两行三列
  • 顶部和底部定高,中间自适应
  • 顶部定高和左侧定宽,右侧自适应
  • 顶部、底部定高,左右两侧定宽,中间自适应
  • Flex 常用布局
  • 三列布局
  • 三行一列布局代码
  • 三行三列布局
  • 三行两列布局
  • 两列布局
  • 单列布局
  • 双飞翼布局
  • 右侧固定,左侧自适应
  • 圣杯布局
  • 多栏布局
  • 将垂直元素变成水平
  • 左中右布局
  • 左侧、中侧定宽,右侧自适应
  • 左侧和右侧定宽,中间自适应
  • 左侧固定,右侧自适应
  • 左右布局
  • 清浮动
  • 等分等高
  • 等宽布局
  • 等高布局
  • 网格布局
  • 顶栏底栏固定,中间高度自适应

例子

原理

++++++++++++++++++++++


介绍

核心代码

例子

原理

|||||||||||||||||||||

axihe
axihe

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

axihe
axihe
新版红宝书,最低44元! axihe 京东购买 / 天猫购买 / 图灵购买