2.6css定位、网页布局总结、元素显示与隐藏

定位

为什么需要定位？

答：（1）浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子

1. 定位则可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置，并且可以压住其他盒子（例如：网页中的侧边栏即使滚动下拉页面也可以固定在可视窗口中）

定位特殊特性：

绝对定位和固定定位也和浮动类似。

1. 行内块元素添加绝对或者固定定位，可以直接设置高度和宽度
2. 块级元素添加绝对或者固定定位，若不给宽度或高度，默认大小为内容的大小

绝对定位（固定定位）会完全压住盒子：

1. 浮动元素不同，只会压住它下面标准流的盒子，但不会压住下面标准流盒子里面的文字或图片；但绝对定位（固定定位）会压住下面标准流所有内容
2. 浮动不会压住文字原因：浮动产生的目的最初时为了做文字环绕效果的，文字会围绕浮动元素

定位组成：

 定位：将盒子定在某个位置，所以定位也是在摆盒子，按照定位的方式移动盒子

 定位=定位模式+边偏移

 定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

边偏移：

 边偏移就是定位的盒子移动到最终位置。有top、bottom、left、right 属性

静态定位static（了解）：

 选择器{ position: static; }

 静态定位是元素的默认定位方式，无定位的意思。

1. 静态定位按照标准流特性摆放位置，他没有边偏移
2. 静态定位在布局时很少用到