阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

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

      例子

      原理

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


      介绍

      核心代码

      例子

      原理

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

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录