Skip to content

[css] 第11天 css常用的布局方式有哪些? #32

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第11天 css常用的布局方式有哪些?

Activity

tiyunchen

tiyunchen commented on Jun 1, 2019

@tiyunchen
Damon99999

Damon99999 commented on Jun 18, 2019

@Damon99999

1:圣杯布局
2:双飞翼
3:flex

AricZhu

AricZhu commented on Jun 24, 2019

@AricZhu

圣杯布局,双飞翼布局,绝对布局,flex弹性布局

DarthVaderrr

DarthVaderrr commented on Jul 3, 2019

@DarthVaderrr
  • flex
  • float
  • grid 栅格化
  • position
  • column 瀑布流
Konata9

Konata9 commented on Jul 25, 2019

@Konata9
  • 流式布局: 最基本的布局,就是顺着 html 像流水一样流下来
  • 绝对定位: 利用 position: absolute 进行绝对定位的布局
  • float 布局: 最初用来解决多栏布局的问题。比如圣杯、双飞燕的布局都可以用 float 来实现
  • 珊格布局: bootstrap 用的布局,把页面分为 24 分,通过 row 和 col 进行布局
  • flex 布局: css3 的布局可以非常灵活地进行布局和排版
  • grid 布局: 网格布局
hc951221

hc951221 commented on Aug 7, 2019

@hc951221

float浮动,position定位,flex弹性,栅格(分为24份),流式布局(顺着html像流水一样流下来)

censek

censek commented on Oct 12, 2019

@censek
  • 浮动 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

larry0442

larry0442 commented on Apr 7, 2020

@larry0442
  • 基本的流式布局
  • 浮动
  • 定位

css3:

  • flex
  • grid
blueRoach

blueRoach commented on May 27, 2020

@blueRoach
  • 普通的流式布局
  • float流
  • 绝对定位流
  • flex
  • grid
giggleCYT

giggleCYT commented on Jun 3, 2020

@giggleCYT
LancelotSaki

LancelotSaki commented on Jul 17, 2020

@LancelotSaki

flex一把梭

smile-2008

smile-2008 commented on Sep 7, 2020

@smile-2008

普通的流式布局
float流
绝对定位流
flex
grid

smile-2008

smile-2008 commented on Sep 7, 2020

@smile-2008

普通的流式布局
float流
绝对定位流
flex
grid

xiezhenghua123

xiezhenghua123 commented on Apr 12, 2021

@xiezhenghua123

flex布局
流式布局
浮动布局
双飞翼布局
圣杯布局

youyanhui

youyanhui commented on Jul 16, 2021

@youyanhui

栅格
flex
双飞翼
圣杯
(这类并排的三栏布局可以说是:固比固;延申开来就会有:固固固,比比比等等)

amikly

amikly commented on Oct 29, 2021

@amikly

传统盒模型布局方式

通过盒模型,使用 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 ,子元素的 floatclearvertical-align 属性将失效

grid(网格)布局

grid 布局又称为“网格布局”,可以实现二维布局方式,和之前的 表格table布局差不多

这是使用 CSS 控制的,不是使用 HTML 控制的,同时还可以依赖于媒体查询根据不同的上下文得新定义布局

将元素的display属性设为 gridinline-grid 或者是 subgrid(该元素父元素为网格,继承父元素的行和列的大小)

注:当元素设置了网格布局,columnfloatclearvertical-align属性无效

WangXi01

WangXi01 commented on Jul 13, 2022

@WangXi01

float布局,flex一把梭,圣杯和双飞翼

Iambecauseyouare

Iambecauseyouare commented on Feb 21, 2023

@Iambecauseyouare

flex弹性布局,grid布局,绝对定位布局,float布局,表格布局

lili-0923

lili-0923 commented on Feb 2, 2024

@lili-0923

flex布局 双飞翼布局 圣杯布局 gird 瀑布流

pengsir120

pengsir120 commented on Sep 12, 2024

@pengsir120

1.圣杯布局
2.双飞翼布局
3.流式布局
4.弹性布局

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@Konata9@LancelotSaki@WangXi01

        Issue actions

          [css] 第11天 css常用的布局方式有哪些? · Issue #32 · haizlin/fe-interview