2. 技术
    3. css常用布局-居中方法盒模型flexbox模型

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

    技术2025-06-13  19

    参考连接

    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

    设置换行方式

    nowarpwarpwarp-reverse

    justify-content

    项目水平对齐方式

    centerspace-betweenspace-around

    align-items

    项目垂直对齐方式

    centerstretchbaselineflex-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布局(待更)

    Processed: 0.011, SQL: 9