【前端面试】三列布局、两列布局、垂直居中、自适应布局

CSS

三列布局

 

条件：左右200px宽  中自适应
方法	布局	样式
绝对定位	外       左 中 右	外：相对定位 左中右：高200px 左右：宽200px     绝对定位 左：左定位0        上定位0 右：右定位0        上定位0 中：左右外边距200px
浮动布局	外       左 右 中	左中右：高200px 左右：宽200px 左：左浮动 右：右浮动 中：左右外边距200px
圣杯布局	外       中 左 右	外：左右内边距200px； 中左右：左浮动  高200px 左右：宽200px  相对定位 中：宽100% 左：左外边距-100%  左定位-200px 右：左外边距-200px  右定位-200px
双飞翼布局	外       中(内) 左 右	中左右：左浮动  高200px 左右：宽200px 中：宽100% 内：左右外边距200px  高200px 左：左外边距-100% 右：左外边距-200px
Flex布局	外       左 中 右	外：布局flex 中左右：高200px 左右：宽200px 中：flex：1
Table布局	外       左 中 右	外：布局table  宽：100% 中左右：布局table-cell  高200px 左右：宽200px
Grid布局	外       左 中 右	外：布局grid   宽：100% 网格行高：200px 网格列宽：200px auto 200px；

两列布局

方法	布局	样式
左：不定宽，右：自适应。左右：高200px、内边距10px
Flex布局	外       左 右	外：flex布局 右：flex：1
float+BFC	外       左 右	左：左浮动 右：overflow：hidden （开启BFC）
左：定宽200px，右：自适应。左右：高200px、内边距10px
Flex布局	外       左 右	外：flex布局 右：flex：1
float+BFC	外       左 右	左：左浮动 右：overflow：hidden （开启BFC）
Float+margin	外       左 右	左：左浮 右：左外边距：200px
定位	外       左 右	外：相对定位 右：绝对定位     右定位：0     上定位：0
左：右 = 1：2   且   右上：右下 = 1：1
Flex布局	外    左  右         右上   右下	外：flex布局 左：宽33.33% 右：flex：1    右边的div：宽：50%
左右等高
Flex布局(弹性布局)	外       左 右	外：flex布局 左右：宽200px
浮动+overflow 负外边距+正内边距	外       左 右	外：overflow：hidden 左：左浮动，宽200px 右： -9999px底外边距 9999px底内边距
粘连布局：按键连在下方
负外边距+内边距	外    上  下	外：最小高度：100% 上：高度100% 底内边距：50px 下：高度50px     顶外边距：-50px

一般规则:

      宽高：设定大小

      外边距：判断位置

      内边距：留出大小(给其他元素)

居中布局

方法	目标元素	布局	样式
垂直居中(父：300*300   子：100*100[若知道儿子])
Flex	块级元素	父     子	父：flex布局    Align-items：center
定位	块级元素	父     子	父：相对定位 子：绝对定位 上定位：50% 上外边距：-50px (或者：transform：Y轴移动-50%)
行高	单行行内元素	父     子	子：line-height：300px (行高=父高)
垂直样式	多行行内元素	父     子	父：display：table-cell vertical-align：middle
水平居中(父：300*300   子：100*100[若知道儿子])
Flex	块级元素	父     子	父：flex布局    Justify-content：center
定位	块级元素	父     子	父：相对定位 子：绝对定位 左定位：50% 左外边距：-50px (或者：transform：X轴移动-50%)
外边距	块级知子宽	父     子	子：margin：0 auto
行内元素+文本居中	块级不知子宽	父     子	父：text-align：center 子：display：inline   //inline-block
文本居中	行内元素	父     子	父：text-align：center
垂直水平居中(父：300*300   子：100*100[若知道儿子])
Flex+margin	行内	父     子	父：flex布局 子：margin：auto
Flex样式	行内	父     子	父：flex布局    Justify-content：center    Align-items：center
定位	行内	父     子	父：相对定位 子：绝对定位     上定位：50% 左定位：50% 上外编剧：-50px 左外边距：-50px (或者：transform：X轴移动-50% transform：Y轴移动-50% 或者：cal计算定位距离)
定位Auto	行内	父     子	父：相对定位 子：绝对定位 上下左右定位：0 外边距：auto
Table三级	行内	父 子  子内	父：table布局 子：tabe-cell布局      Text-align：center      Vartival-align：middle 子内：inline-block布局

 

Em、rem、vw、vh

em相对于父元素，rem相对于根元素。

响应式布局

媒体响应式布局：

Viewport适配

Rem适配(+viewport)：

1rem = 宽度/16

如果设计师给的图是750px;  那么1rem = 750/16 = 46.875px；

元素i宽度60px  转为  width：1.28rem  60px/46.875px*1rem = 1.28rem

因此：

      计算元素宽度（单位rem）  宽 / rem  =  rem单位的宽度

Rem+vw & vh

清除浮动