2020Web前端知识点总结-CSS篇（四）

1、元素的显示和隐藏

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

visibility:hidden;
display:none;

visibility: visible;
display:block;
display:inline;

overflow 
属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
overflow:visible; 	
/* 默认值。内容不会被修剪，会呈现在元素框之外。 */
overflow:hidden ;	
/* 内容会被修剪，并且其余内容是不可见的。 */
overflow:scroll ;	
/* 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 */
overflow:auto ;
/* 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 */
overflow:inherit; 	
/* 规定应该从父元素继承 overflow 属性的值。 */

2、定位

    position:staic;
    position:relative;
    position: fixed;
    position: absolute;
    position: sticky;

3、浮动

 float:right;
 float:left;
 clear:both;