css常用布局-居中方法/盒模型/flexbox模型

参考连接

BFC
居中1
居中2
Flex 布局教程：语法篇 - 阮一峰的网络日志
flex-demo
grid布局模型

linkTo mugu’s博客

一 css布局模型(.md+.png)

盒子模型

1. display文档流显示

• 外部显示类型

  • 控制在文档流中的排版

    • inline block run-in

• 内部显示类型

  • 控制子元素的排版

    • flow layout grid flex table

• legacy双关键字

  • inline-block

    • 文档流中(即外部)表现为inline内联, 自身为block

  • inline-flex

    • 外部表现为inline ,子元素为flex

    • 若是浮动或者为绝对定位,那么相当于flex

2. position定位

• 定基点: 可以理解为元素的左上角的位置;

  • 默认属性: static, 由浏览器控制, 无法设置top\left\right\bottom等, 定基点就是html文档;

  • 绝对定位属性: absolute, 相对上一级父元素进行定位,

    • 父元素不可以是static,这样会直接定位到html元素,所以在父元素要添加relative属性.
    • 会脱离正常页面流,不会占用空间.

  • 绝对绝对定位: fixed ,相对与屏幕位置

    • 表示元素的初始位置是基于视口计算的，否则初始位置就是元素的默认位置
    • 浮动在表面,不随页面滚动

  • 粘性定位: sticky 动态效果

    • sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位
    • 应用场景有:堆叠照片\表头固定

3. float浮动

• 特点

  • 沿其父元素的左侧或右侧放置,并变成块元素

    • 除了flex\inlien-flex

  • 保持流动性

    • 与absolute相反

• 定位

  • 脱离文档流

  • 遇到其他float则排列下去,自左向右,自上而下

  • 清除定位

    • clear: both

      • 用于其他元素排列在float的下方,而非重叠或者围绕的时候使用

    • clearfixed.after

      • 消除iinline-block与float的影响, 常用于水平导航栏制作

flexbox模型

1. 特点

• 灵活性
• 控制子元素的流动,自身是一个flex容器
• 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间

2. 指定

• 行内

  • inline-flex

• 块级

  • flex

3. 属性设置

• 容器

  • flex-direction

    • 决定项目排列方向

      • row 行
      • column 列

  • flex-wrap

    • 设置换行方式

      • nowarp
      • warp
      • warp-reverse

  • justify-content

    • 项目水平对齐方式

      • center
      • space-between
      • space-around

  • align-items

    • 项目垂直对齐方式

      • center
      • stretch
      • baseline
      • flex-start

  • align-content

    • 多轴线对齐

      • 若只有一条则不起作用

• 项目

  • order

    • 定义项目在容器中的排列位置，越小越靠前

      • 默认为0

  • flex-grow

    • 项目的放大比例

      • 默认为0

        • 存在剩余空间也不放大

      • 为不同项目设置数值

        • 剩余空间分配按照数值比例划分

  • flex-shrink

    • 与flex-grow相反，定义缩小比例

      • 默认为1
      • 没有负值

  • flex-basis

    • 分配多余空间之前，项目占据的主轴空间

  • align-self

    • 覆盖容器的flex-items，拥有自定义的对齐方式

gird网格模型 (待更新)

二 HTML元素

1. 行内

• 占据形式

  • 对应标签边框为界限

    • 具有包裹性

• 包含内容

  • 文本数据+其他行内元素

    • 若强制包含块级元素,会被打撒为匿名块,块级元素嵌套在其中,不提倡使用,不符合页面结构

• 特点

  • 自左向右流动

    • IFC

  • 不能设置宽高

• 常见

2. 块级

• 占据形式

  • 占据父元素的整个空间

• 包含内容

  • 所有元素类型

• 特点

  • 自上而下

    • BFC

  • 每个块元素独立一行

• 常见

  • div p ol ul h form table section aside article audio video

3. 主要特点

• 实际上没有区分,可以相互转化
• 主要区别是占据空间的形式
• 都在文档流内流动

三 居中

带红点的可以用于设置水平垂直居中, 其他属性也可以相互结合设置 , 较常用就是

​ ①不知道宽高&&是否兼容设置

​ ②是否能用flex

1. 水平居中

• 行内元素(inline)

  • text-align:center

  • 类型

    • inline/inline-block/inline-table/inline/flex

• 单个块级元素(block)

  • 父元素设置text-aligin:center; 子元素设置max/min-width+margin:auto;否则会被拉伸到父元素宽高;

  • position: absolute

    • margin: 0 auto;

  • flex

    • justify-content:center

• 多个块级元素(修改默认的inline为其他):

  • inline-block inline-flex flex block…

2. 垂直居中

• 行内

  • 设置 line-height = height

    • 文字的垂直居中

  • vertical-algin

• 块级

  • 知道宽高

    • 绝对定位

      • margin-top=marigin-bottom=50%

    • display: table-cell

      • vertical-align: middle;

  • 不知道宽高

    • 绝对定位

      • top/left=50%;
        transform: translate(-50%,-50%)

      • margin-auto

        • top/left/bottom/right:0

    • flex模型

      • align-items: center;

        • justify-content: center

    • 盒子模型

      • vertical-align: middle;

• table布局(待更)