css

57 阅读1分钟

margin负值有什么效果?

  • margin-left 负值,元素自身向左移动
  • margin-top 负值,元素自身向上移动
  • margin-right 负值,右边的元素向左移动
  • margin-bottom 负值,下边的元素向上移动

margin负值的应用

  • 增加宽度
  • 圣杯布局
  • 双飞翼布局

什么是圣杯布局

两边固定宽度,中间自适应宽度

什么是双飞翼布局

左右宽度固定,中间宽度自适应,中间的内容优先加载

清除浮动的方法

  • 父级加 overflow:hidden
  • 父级设置 clearfix
  • 父级也浮动

手写clearfix

.clearfix:after { content: ""; display: block; clear: both; }

常见的垂直水平居中方法

  1. position+margin负值的方法(宽高固定)
  2. position+margin:auto (固定宽高)
  3. display:table-cell + vertical-align:middle (固定宽度)
  4. position+transform(不需要固定宽高)
  5. flex (不需要固定宽高)