CSS定位与布局(display+visibility+position+z-index+float+清除浮动+溢出处理)

1.display属性 （盒子模型的行为方式）

display元素决定了盒模型的行为方式。

• display: block

是占用最大可用宽度的元素，前后都有换行符。

• display: inline

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

注意事项
设置元素的display属性，只会改变元素的显示方式，不会改变元素的类型。带有display：block内联元素不允许在其中包含其他块元素。

• display: none 隐藏元素

none 隐藏一个元素，因此不占用任何空间，好像不曾来过这繁华且莫测的世界。

• 其他参数值： list-item、table、table-cell、table-column、grid。

2.visibility属性

visibility:visible : 元素可见

visibility:hidden : 元素不可见

注意与display:none的区别

visibility:hidden;隐藏元素，但是仍然占据与之前相同的空间，仍然影响页面布局。
display：none 隐藏一个元素，是不占用空间的，且没有为该元素保留一个位置。

3.CSS position定位

功能：

• 定位元素
• 将元素放在另一个元素之后，并指定元素内容太大时应该发生的情况。

属性值
使用top、bottom、left、right 属性定位元素的时候，前提条件是position属性进行初始化设置参数，只有这样，才可以起作用。

absolute绝对

参照物：为具有非静态定位属性的第一个父 （长辈元素） 元素
特性：

1. 当使用绝对定位时，会使得元素脱离标准文档流，换句话说，就是不占用标准控件，会漂浮起来。

2. 通常body的一级子元素（亲儿子）不使用绝对定位。

3. 可以重叠其他元素。

fixed固定

参照物：浏览器窗口（body）。
特性：

1. 不随窗口的滚动而滚动,脱离标准文档流。
2. fixed参数能把元素从正常的顺序中拉出。可以无视其他元素的定位，设置了fixed的元素,可以重叠在其他元素上。
3. 通常固定定位是做悬浮块用，比如固定顶部的导航，右下角的广告等。

relative 相对

参照物：自身
特性：

1. 移动：移动位置，只改变显示位置，不改变空间位置。

2. 不常用来改变上下方向的位置，通常用来改变左右位置；

3. 通常也可以专门用来作为绝对定位需要的参照物来添加相对定位；

static 静态定位（默认值）

静态定位元素不受 top、bottom、left、right属性的影响。

inherit 继承父级元素的定位情况

4.z-index指定元素的堆栈顺序

• 在制作闹钟案例的时候，秒针>分针>时针 就是用了这个属性。
• 默认情况下，当元素堆叠的时候，最后一个元素会在其他元素上方出现。
  == z-index仅适用于定位元素（position:absolute，position:relative 或 position:fixed）。换句话说，为了能使z-index能起作用，我们必须使用position属性==

5.float浮动

功能
使用float属性，可以使元素向左或者向右推，以便于允许其他元素环绕。
使用

• float通常与图像一起使用，在处理页面布局的时候，也非常有用。

1. left 使元素向左浮动
2. right 使元素向右浮动
3. none 确保元素不进行浮动
   注意事项
   1.元素是水平浮动的，这意味着元素只能左右浮动，不能上下浮动。
   2.当几个浮动的元素相邻，如果空间(如宽度width)足够，那么它们会并排显示

6.清除浮动 clear

元素设置浮动之后，会影响其后面的元素，以围绕在其周围。这是，我们清除浮动，可以消除这种影响。
clear属性指定某个元素不受其他设置了float属性的元素的影响。

clear: left;
clear: right;

clear: both; 清除来自任何一个方向的浮动。

7. overflow 溢出处理

指定内容溢出元素边框时发生的行为。
值

• visible 默认值
• scroll 阻挡内容移除，会增加水平和垂直方向两个滚动条，拉动滚动条浏览所有内容。
• auto 如果内容溢出被限制，则会添加一个滚动条，使超出的内容可以通过滚动展示出来。。
• hidden 隐藏溢出部分，溢出的内容不可见。