CSS学习总结（6）——定位与布局

display属性

display属性决定了盒模型的行为方式。 block(块元素)是占用最大可用宽度的元素，前后有换行符。设置元素的display属性只会改变元素的显示方式，而不会改变元素的类型。

p {
   display: block;
}

inline元素只占用尽可能多的宽度，并不强制换行。

p {
   display: inline;
}

none 隐藏一个元素，所以它不占用任何空间。 该元素将被隐藏，在页面显示时不会展现出来，就好像该元素不存在一样。

p{
   display: none;
}

visibility属性

visibility属性用于指定元素是可见的还是隐藏的。 最常见的值是visible和hidden。可以通过将display属性设置为“none”或者将visibility属性设置为“hidden”来隐藏元素。
但是这两种方法会产生不同的结果：
visibility:hidden隐藏了一个元素，但是它仍然占据与之前相同的空间。 该元素将被隐藏，但仍然会影响布局。

position属性

position属性允许定位一个元素。 它也可以将元素放在另一个元素之后，并指定元素的内容太大时应该发生的情况。
position属性的值可以为：

• absolute（绝对定位）
• fixed（固定定位）
• relative（相对定位）
• static（默认值，无定位）
• inherit（继承父级定位）

position:static 静态定位元素不受top, bottom, left, 和right属性的影响，使页面的元素在默认顺序中展示，按照页面的正常流动进行定位。。HTML元素默认为静态。

position:fixed（固定定位）
能使具有固定位置的元素相对于浏览器窗口被定位，并且即使窗口被滚动也不会移动。可以使用top, right, bottom, 和left的一个或多个属性来指定位置。
fixed参数能把元素从正常的顺序中拉出。可以无视其他元素的定位。设置了fixed的元素可以重叠在其他元素上。
position:relative（相对定位）
元素的定位是相对其正常位置。可以使用top, right, bottom, 和 left的属性来指定呈现的元素将如何移动。
relative定位的元素的内容可以移动并与其他元素重叠，但是元素的保留空间在正常流程中仍然保留。在table中设置position:relative是无效的。
absolute绝对定位
绝对位置元素相对于具有非静态位置的第一个父元素进行定位。 如果找不到这样的元素，则针对的是。绝对定位的元素将从正常流程中移除。 文档和其他元素的行为像绝对定位的元素不存在。绝对定位的元素可以重叠其他元素。

z-index属性

当元素位于正常流程顺序之外时（受position等属性影响时），它们可以重叠于其他元素。z-index属性指定元素的堆栈顺序（通过z-index的值可以决定哪个元素应放置在其他元素的前面或后面）。
z-index仅适用于定位元素（position:absolute，position:relative 或 position:fixed）。

float属性

• 使用float

使用CSS中float，可以将元素向左或向右推，以允许其他元素环绕它。float通常与图像一起使用，float属性的值是 left，right，和 none。left，right会使元素向左或者向右浮动。none能确保元素不会进行浮动。
如果连续放置几个浮动的元素，那么如果有足够的空间，它们将相互浮动。

• 清除float

元素设置了float属性后会使后面的元素都受其影响，将环绕在其周围。为了避免这种情况，请使用clear属性。clear属性指定某个元素不受其他设置了float属性的元素的影响。
clear属性可以使用right，left和both来指定某一个元素不受其他浮动元素的影响。 默认值是none，它允许在两边都有浮动元素。

overflow属性

页面上的每个元素都是一个盒子，如果没有设置盒子的高度，那么盒子的高度将随着所需的内容的增大而变大。

overflow属性有四个值：visible（默认值），scroll，hidden和auto。

• scroll值能阻止内容溢出，但会增加出滚动条，通过拉动滚动条可以浏览所有内容。

  div {
   width: 180px;
   height: 180px;
   background-color: rgb(235, 173, 80);
   float: left;
   overflow: scroll;
 }

• auto - 如果内容溢出被限制，则会添加一个滚动条，使超出的内容可以通过滚动展示出来。
• hidden - 隐藏掉内容溢出的部分，溢出的内容将不可见。
• overflow的默认值是visible