css常用布局-居中方法盒模型flexbox模型
本文最后更新于:2021年3月30日 下午
一 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布局(待更)
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!