学习css的第六天

  今天学习的主要内容是定位，啊这，我竟然无话可说，编不出来了，这可咋整，记得我初入职场

的时候，我们都是小虾米，我们的领导和我们说，你们有好的建议一定要说出来，好的倡议值得践行，

在某一次事件中，我的同事王某提出了我们一致认为非常有建设性的意见，然后告诉了领导，领导说：

“找清楚你自己的定位”，在我们一群人中传为“美谈”哈哈哈哈哈，自然，此“定位”非今天的定位，

好了，好了，不胡说了，下面说说今天的学习内容。

  定位主要学习了五种定位模式，分别是static、relative、absolute、fixed、sticky下面就分别介绍一下。

  首先是静态定位static，它啊，没个咩用，就是个没变化，默认属性，不用理它，hetui。

  然后学习了relative（相对定位）position: relative;相对定位是相对元素自己原来的位置来定位的，相对

定位不会脱标，原有在标准流的位置继续保留，后面的盒子仍然以标准流的方式对待它。

  接着是第二个重点，绝对定位（absolute）没有父级或者父级无定位的时候，它就会参照浏览器的位置定位，

对了，它的语法是position: absolute;在它父级有定位的情况下，它就会参照父级定位。绝对定位的盒子会脱标

并且不占有原来的位置，脱标之后可以在父盒子里随意摆放，并且不会影响父盒子中的其他元素。

  所以相对定位和绝对定位就组成了“子绝父相”即子级使用绝对定位，父级使用相对定位，在父级使用相对定位时

：不脱标，在标准流中占据空间，绝对定位的儿子们都参考父亲进行定位。子级使用绝对定位时，脱标，不影响其他

元素的摆放，自己则相对父级任意摆放位置。

  后来学了固定定位，固定定位（fixed）是相对浏览器的可视窗口来定位的；可以在浏览器的页面滚动时，元素的位

置保持不变。它的语法是position: fixed;固定定位会脱标但固定定位的元素同样不会占有原先的位置。***固定到版心

右侧的实现步骤是第一步：left: 50%;；第二步margin-left: 版心宽度的一半。

  最后一个定位粘性定位，粘性定位（sticky）同样也是相对浏览器的可视窗口来定位的；粘性定位不脱标，会占有原先的位置

position: sticky;差不多就这么多吧。

  然后总结一下其他杂七杂八吧，绝对定位的居中算法left: 50%; 向右移动到父盒子宽度的一半；margin-left: -宽度的一半;

利用负数向左移动子盒宽度的一半；top: 50%; 向下移动到父盒子高度的一半；margin-top: -高度的一半; 利用负数向上移动子盒高度的一半。

  还有一个display显示隐藏元素，这个display就是之前说的内个改变行内元素行内块啥的，有display-line、display-block

还有display-line-block。但是这个不是。display: none; 隐藏对象，display 隐藏元素后，不再占有原来的位置；display-block是显示元素。

  visibility: hidden 会隐藏元素，但是空间会保留；display：none 会隐藏元素，同时空间也不会保留（重点）

  最后一个显示隐藏是overflow，它和前面的不太一样。它是用来显示或者隐藏溢出的部分，就是你要的内容的多与部分，主要记住overflow hidden和

overflow auto。

  晚安，明天见，