CSS布局
程序员文章站
2022-06-30 23:52:59
css中的三种基本定位机制 a.普通文档流 b.定位：相对定位 relative 绝对定位 absolute 固定定位 fixed c.浮动 1.普通流中，元素位置由文档顺序和元素性质决定，块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin值计算得到，行内元素在一行中水平布置 2.相对 ......
CSS布局
单列布局
单列布局是最常用的一种布局，它的实现效果就是将一个元素作为布局容器，通常设置一个较小的（最大）宽度来保证不同像素宽度屏幕下的显示一致
优点：基本上可以适配超过布局容器宽度的各种屏幕
缺点：过度的冗余设计必然会带来浪费,有空白区域浪费
两列布局
左右宽度不相等，例如后台的菜单
左侧固定（次要布局），剩余宽度由另一列撑满（主要布局）
三列布局
左中（主要布局）右，例如github
布局实现
要实现两列布局或者三列布局，可以按照下面的方法：
- 为了保证主要布局的优先级，应将主要布局写在次要布局之前
- 将布局容器进行水平排列
- 设置宽度，即次要容器固定，主要容器撑满
- 消除布局的副作用，如浮动造成的高度塌陷
- 为了窄屏下也能正常显示，可以通过媒体查询进行优化
本文地址：https://blog.csdn.net/qq_35836269/article/details/107554148