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