编程教育资源分享平台

网站首页 > 后端开发 正文

「css」常用的几种水平垂直居中方式与盒子模型,面试经常问到!

luoriw 2024-02-01 14:28:21 后端开发 13 ℃ 0 评论

div水平垂直居中

假设结构为此,2个div嵌套

实现方式1:

absolute绝对定位+margin位移实现

这种方式适用于内外2个div的宽高是已知时使用。外层使用相对定位,内层使用绝对定位50%,并使用位移宽高的一半使之居中

实现方式2:

transform实现

这种方式,几乎和上一直一样。但是如果子div宽高不定时,也可以实现居中。比第一种好点。

实现方式3:

flex布局实现,使用justify-content和align-items实现

盒子模型

盒子模型由内容、内边距、边框、外边距组成。

上方是一张图,下方是盒子模型

这是盒子结构:

这是内容:

这是内边距:

这是边框:

外边距为0:

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表
最新留言