Web-main/QF Phase 1/02-所有上下左右居中方式.md

20181008 课程笔记

1、浮动和定位的时候，宽高由内容撑开。

2、定位的话，绝对定位和固定定位可以改变盒子的属性，但是相对定位不会。

3、相对定位和绝对定位的区别： 相对定位不脱离文档流，是相当于自身的。 绝对定位是脱离文档流的，相对于最近的具有定位属性的父元素。

4、浮动元素上下左右居中：

• 子元素：浮动添加绝对定位 absolute。
• 在浮动元素外面再嵌套一层div，将这一层div居中。（转化为块元素居中）
• 父元素：display: flex; justify-content: center; align-items: center;
• （最简单粗暴的）设置上下margin值。
• 设置百分比。

5、元素上下居中：

• 行内元素：父元素：line-height

• 行内块元素：

  父元素：line-height; font-size:0; 
  子元素：vertical-align: middle;
  

• 块元素：

  1、有固定宽高：

  父元素：position: relative;
  子元素：position:absolute; top: 50%; margin-top: -xxpx;
  

  2、无固定宽高：

  父元素：position: relative;
  子元素：position:absolute; top: 50%; left:50%; transform: translate(-50%, -50%);
  
  或者：
  父元素：display: flex; justify-content: center; align-items: center;
  
  或者：
  父元素：position: relative;
  子元素：position:absolute; top:0; bottom:0; left:0; right:0; margin: auto;
  
  或者：
  父元素：dispaly:table;
  子元素：display:table-cell; text-align:center; vertical-align:middle;
  
  或者：
  转换成行内块元素。
  父元素: text-align:center; line-height
  

  ​

6、浏览器兼容问题

• a标签中插入图片，在低版本的IE浏览器中有默认边框。

解决办法：图片的border:0;

• 代码换行会产生间距（图片并排放置的话，图片之间出现间距）

解决办法：1：图片浮动。2：为图片的父元素：font-size:0;

9、transform的变换相当于相对定位，保留原来的位置的。

10、浏览器五大内核

IE：trident

firefox：gecko

chrome/safari：webkit

Opera：presto

谷歌和欧朋共同开发：blink