weixin_43842821的博客

要求：对一个东西实现水平垂直居中 利用text-align和line-height 针对行级元素 利用table-cell，vertical-align和text-align 在子元素不确定宽高和数量时，特别实用 利用flex 简便、完整、响应式 利用grid 和flex类似 有两种实现方式： 1. 在父容器中设置display: grid; align-content: center; justify-content: center; 2. 在父容器中设置display：grid; 在子元素中

要求 假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应 方案：float布局，absolute布局，表格布局，grid布局，flex布局，双飞翼布局，圣杯布局（共7种） float布局 做法：左右两侧部分分别左右浮动，中间容器要设置的左右margin为左右两侧分别的宽度 注意：在中间的div区域要放到最前面进行渲染 优点：比较简单，兼容性也比较好。只要清除浮动做的好，是没有什么问题的 缺点：浮动元素是脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如高度塌陷等