02-CSS中级学习笔记

一.CSS布局

　　1.Display属性

　　　　规定是否/如何显示元素。

　　　　每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。(none,block,inline)

　　　　　　block 块级元素总是从新行开始，并占据可用的全部宽度。(尽可能向左或向右伸展)

　　　　　　inline 行内元素不从新行开始，仅占据所需的宽度。

　　　　　　none 通常和JavaScript一起使用，以隐藏和显示元素，而无需删除和重新创建他们。

　　　　(注：display:none和visibility:hidden的区别，两者都可以做到隐藏元素的效果，但前者隐藏后会删除其占据的空间，影响整体布局，而后者不会删除空间)

　　2.Position 定位

　　　　规定应用于元素的定位方法的类型（static、relative、fixed、absolute 或 sticky）。

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

　　　　　　relative 元素相对于其正常位置进行定位。

　　　　　　fixed 元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。

　　　　　　absolute 元素相对于最近的祖先元素进行定位。

　　　　　　sticky 元素根据用户的滚动位置进行定位。

　　　　　　z-index 重叠元素，指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）

　　3.Overflow 溢出

　　　　指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

　　　　　　visible 默认。溢出没有被剪裁。内容在元素框外渲染.

　　　　　　hidden 溢出被剪裁，其余内容将不可见.

　　　　　　scroll 溢出被剪裁，同时添加滚动条以查看其余内容.

　　　　　　auto 与 scroll 类似，但仅在必要时添加滚动条.

　　　　overflow-x:指定如何处理内容的左/右边缘。

　　　　overflow-y:指定如何处理内容的上/下边缘。

　　4.float 浮动 

　　　　用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

　　　　　　left 元素浮动到其容器的左侧.

　　　　　　right 元素浮动在其容器的右侧.

　　　　　　none 元素不会浮动（将显示在文本中刚出现的位置）.默认值。

　　　　　　inherit 元素继承其父级的 float 值.

　　　　注：使用clear属性可以清除浮动。