关于css布局的记录(一) --table和flex布局

1、table方式布局

效果图:

关于css布局的记录(一) --table和flex布局_第1张图片

直接用table等标签布局,table布局自动垂直居中

亦可用 display:table == 、display:table-cell ==
等css属性代替table标签的效果

代码示例:




    
    test



    
1 2

2、经典的盒子模型

百度百科的经典图:

关于css布局的记录(一) --table和flex布局_第2张图片

通过控制div等盒子的margin(外边距),padding(内填充),border(边框),width(宽),height(长)等数据构造合适的布局

3、flex布局

推荐阮一峰老师的flex教程

弹性盒子,顾名思义宽和高是有弹性的,会自适应(不设置宽高会自动填充)

效果图:

关于css布局的记录(一) --table和flex布局_第3张图片




    
    test



    
1
2
3

除了盒子整体的属性外,可以给盒子里的每个项目设置具体的属性

  • order: integer || 0,数值越小,排列越靠前,默认为0
  • flex-grow: number || 0,定义项目的放大比例,默认为0
  • flex-shrink:number || 1,定义项目中的缩小比例,默认为1
  • flex-basis: length || auto,定义了在分配多余空间之前,项目占据的主轴空间(main size)
  • flex: flex-grow flex-shrink ? || flex-basis //定义三个属性的简写
  • align-self 设置单个项目与其他项目不一样的对齐方式,默认继承父元素的继承方式

你可能感兴趣的:(关于css布局的记录(一) --table和flex布局)