Wzw的博客

一、基本概念 1.1 flexbox 是什么 CSS3 的新布局模式，是一种当页面需要适应不同屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 flex 弹性盒是一个一维布局模型，可以在界面中的项目之间提供空间分布和强大对齐功能的布局方式。 所谓一维布局模型是指：flex 在同一时刻只控制行或列。这和二维布局模型 Grid Layout （同时控制行和列）相反。 1.2 flexbox 的两个轴 flexbox 有两个轴——主轴和交叉轴。主轴由 flex-direction 属性定义，而交叉轴和主轴

0、引言 这份笔记是记录在 b 站上看到一个视频，讲 CSS 的定位方式，内容非常好，因此记录下来。视频地址见文末。 1、为什么会有 positon 定位 我们知道每个布局都是盒子，期望布局像搭积木一样，从上往下挨个堆盒子，就能完成各式各样的页面，然而多实现几个页面就会发现：文档流中任意一个元素位置调整都会影响后面的元素。 有一种脱离文档流的解决办法就是浮动，但浮动规则的局限性很大，它会向左上角或右上角靠过去，可惜这两个方向并不是布局的全部。日益增长的网页复杂度，和落后的 CSS 布局方式之间的矛盾越来越大