第11天 css常用的布局方式有哪些?
Activity
tiyunchen commentedon Jun 1, 2019
布局方式太多,详见这篇文章
Damon99999 commentedon Jun 18, 2019
1:圣杯布局
2:双飞翼
3:flex
AricZhu commentedon Jun 24, 2019
圣杯布局,双飞翼布局,绝对布局,flex弹性布局
DarthVaderrr commentedon Jul 3, 2019
Konata9 commentedon Jul 25, 2019
position: absolute
进行绝对定位的布局float
来实现hc951221 commentedon Aug 7, 2019
float浮动,position定位,flex弹性,栅格(分为24份),流式布局(顺着html像流水一样流下来)
censek commentedon Oct 12, 2019
float
;清除浮动clear
属性overflow
属性设置为visible
之外的值position
: 相对定位relative
;绝对定位absolute
;固定定位fixed
;粘性定位sticky
display: flex;
display: grid;
align-items
,justify-items
, ……https://www.w3cplus.com/css/guide-css-layout.html
larry0442 commentedon Apr 7, 2020
css3:
blueRoach commentedon May 27, 2020
giggleCYT commentedon Jun 3, 2020
常见布局
LancelotSaki commentedon Jul 17, 2020
flex一把梭
smile-2008 commentedon Sep 7, 2020
普通的流式布局
float流
绝对定位流
flex
grid
smile-2008 commentedon Sep 7, 2020
普通的流式布局
float流
绝对定位流
flex
grid
xiezhenghua123 commentedon Apr 12, 2021
flex布局
流式布局
浮动布局
双飞翼布局
圣杯布局
youyanhui commentedon Jul 16, 2021
栅格
flex
双飞翼
圣杯
(这类并排的三栏布局可以说是:固比固;延申开来就会有:固固固,比比比等等)
amikly commentedon Oct 29, 2021
传统盒模型布局方式
通过盒模型,使用
display
属性(文档流布局) +position
属性(定位布局) +float
属性(浮动布局)进行布局文档流布局
按照文档顺序一个一个显示出来,块元素独占一行,行内元素共享一行
浮动布局
使用
float
属性,是元素脱离文档流,浮动起来定位布局
使用
position
属性对元素进行定位flex(弹性)布局
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性
将元素的
display
属性设为flex
,Webkit 内核的浏览器,必须加上-webkit
前缀注:当元素设置了 Flex ,子元素的
float
、clear
和vertical-align
属性将失效grid(网格)布局
grid 布局又称为“网格布局”,可以实现二维布局方式,和之前的 表格
table
布局差不多这是使用 CSS 控制的,不是使用 HTML 控制的,同时还可以依赖于媒体查询根据不同的上下文得新定义布局
将元素的
display
属性设为grid
或inline-grid
或者是subgrid
(该元素父元素为网格,继承父元素的行和列的大小)注:当元素设置了网格布局,
column
、float
、clear
、vertical-align
属性无效WangXi01 commentedon Jul 13, 2022
float布局,flex一把梭,圣杯和双飞翼
Iambecauseyouare commentedon Feb 21, 2023
flex弹性布局,grid布局,绝对定位布局,float布局,表格布局
lili-0923 commentedon Feb 2, 2024
flex布局 双飞翼布局 圣杯布局 gird 瀑布流
pengsir120 commentedon Sep 12, 2024
1.圣杯布局
2.双飞翼布局
3.流式布局
4.弹性布局