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 / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

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

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

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

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

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

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

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