阿西河

所有教程

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

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    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的教程都有!

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

    目录
    目录