前端学习第八周（1）

1.定位
1.1为什么需要定位？
定位可以让盒子在某个盒子内移动位置会固定屏幕中某个位置，并且可以压住其他盒子。
1.2定位组成
定位=定位模式+边偏移。
定位模式用于指定一个元素在文档的中的定位方式。边偏移则决定了该元素的最终位置。
（1）定位模式
定位模式决定元素的定位方式，它通过css的position属性来设置，值分为以下四个：
（2）边偏移
边偏移是定位的盒子移动到最终位置。有top、bottom、left、right4个属性。

1.3静态定位static（了解）
元素的默认定位方式，无定位。
语法：选择器{position：static；}
（1）静态定位是按照标准流特性摆放位置，他没有边偏移。
（2）很少使用静态定位。
1.4相对定位（重要）
是元素在移动位置时相对于他原来的位置来说的。
语法：选择器{position：relative；}
特点：（1）他是相对于自己原来的位置移动的。
（2）不脱标，继续保留原来位置。
1.5绝对定位absolute（重要）
元素在移动位置的时候。是相对于他祖先元素来说的。
语法：选择器{position：absolute；}
特点：（1）如果没有祖先元素或者组选元素没有定位，则以浏览器为准定位（Document）
（2）如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
（3）绝对定位不再占有原先的位置。（脱标）
1.6子绝父相的由来
（1）子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
（2）父盒子需要加定位限制子盒子在父盒子内显示。
（3）父盒子布局时，需要占有位置，因此父亲只能是相对定位。
1.7固定定位fixed(重要)
固定定位是元素固定于浏览器可视区的位置。主要适用场景：可以在浏览器页面滚动是元素的位置不会改变。
语法：选择器{position：fixed；}
特点：（1）以浏览器的可视窗口移动元素。
跟父元素没有任何关系。
不随滚动条滚动。
（2）固定定位不占有原先的位置。
固定定位小技巧：固定在版心右侧位置。
小算法：1.让固定定位的盒子left:50%,走到浏览器可视区的一半位置。
2.让固定定位的盒子margin-left：版心宽度的一半距离。多走版心宽度的一半位置。
就可以让固定定位的盒子贴着版心右侧对齐。
1.8粘性定位sticky（了解）
相对定位和固定定位的混合。
语法：选择器{position：sticky；top:10px;}
特点：（1）以浏览器的可视窗口为参照点移动元素
（2）粘性定位占有原先的位置。
（3）必须添加top、left、right、bottom其中一个才有效。
1.9定位叠放次序z-index
可以控制盒子的前后次序。
语法：选择器{z-index：1；}
（1）数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上。
（2）如果属性值相同，则按照书写顺序，后来居上。
（3）数字后面不能加单位。
（4）只有定位的盒子才有z-index属性。
1.10定位拓展
1.10.1绝对定位的盒子居中
（1）left:50%;(让盒子的左侧移动到父级元素的水平中心位置)
（2）margin-left:-100px;(让盒子向左移动自身宽度的一半)
1.10.2定位特殊特性
（1）行内元素添加绝对或固定定位，可以直接设置高度和宽度。
（2）块级元素添加绝对定位或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
1.10.3脱标的盒子不会触发外边距塌陷。
1.10.4绝对定位会完全压住盒子
浮动元素不同，只会压住他下面标准流的盒子，但是不会压住下面标准流盒子里面的图片（文字）。
2.元素的显示与隐藏
2.1display：显示隐藏
用于设置一个元素应如何进行显示。
（1）display：none;隐藏对象
（2）display：block；除了转换为块级元素外，还有显示元素的意思 。
注意：display隐藏元素后，不在占有原来的位置。
2.2visibility：可见性
visibility：visible；可视
visibility：hidden；隐藏
注意：visibility隐藏元素后，继续占有原来的位置。
2.3overflow：溢出
属性值：

 

如果有定位的盒子，慎用overflow：hidden，因为他会隐藏多余的部分。