fe-interview
fe-interview copied to clipboard
Published
20 hours ago •
haizlin
haizlin
[css] 第11天 css常用的布局方式有哪些？
- 流式布局: 最基本的布局，就是顺着 html 像流水一样流下来
- 绝对定位: 利用
position: absolute进行绝对定位的布局 - float 布局: 最初用来解决多栏布局的问题。比如圣杯、双飞燕的布局都可以用
float来实现 - 珊格布局: bootstrap 用的布局，把页面分为 24 分，通过 row 和 col 进行布局
- flex 布局: css3 的布局可以非常灵活地进行布局和排版
- grid 布局: 网格布局
- 浮动
float；清除浮动clear属性 - 块级格式化上下文 BFC ： 给其
overflow属性设置为visible之外的值 - 定位
position： 相对定位relative；绝对定位absolute；固定定位fixed；粘性定位sticky - Flex 布局：
display: flex; - Grid 布局：
display: grid; - 对齐方式：
align-items,justify-items, ……
https://www.w3cplus.com/css/guide-css-layout.html
传统盒模型布局方式
通过盒模型，使用 display 属性（文档流布局） + position 属性（定位布局） + float属性（浮动布局)进行布局
文档流布局
按照文档顺序一个一个显示出来，块元素独占一行，行内元素共享一行
浮动布局
使用float属性，是元素脱离文档流，浮动起来
定位布局
使用position属性对元素进行定位
flex（弹性）布局
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性
将元素的display属性设为flex，Webkit 内核的浏览器，必须加上 -webkit 前缀
.ele{
display: -webkit-flex;
display: flex;
display: inline-flex;
display: -webkit-inline-flex;
}
注：当元素设置了 Flex ，子元素的 float、clear 和 vertical-align 属性将失效
grid（网格）布局
grid 布局又称为“网格布局”，可以实现二维布局方式，和之前的 表格table布局差不多
这是使用 CSS 控制的，不是使用 HTML 控制的，同时还可以依赖于媒体查询根据不同的上下文得新定义布局
将元素的display属性设为 grid 或 inline-grid 或者是 subgrid（该元素父元素为网格，继承父元素的行和列的大小）
注：当元素设置了网格布局，column、float、clear、vertical-align属性无效
