css知识点总结

一、浮动

1.属性值：

• float：left 左浮动
• float：right 右浮动
• float：none  默认值 不浮动

• 
  float：left /* 左浮动 */
  float：right /* 右浮动 */
  float：none  /* 默认值 不浮动 */

2.开启bfc

子元素浮动引起的父元素坍塌问题可以使用bfc解决

开启bfc的方式：

• overflow的值不是visible的其他值
• display的值是inline-block、table、table-cell、flex、
• float的值不是none的其他值

bfc能解决的问题：

• margin重叠问题
• 浮动带来的父元素高度坍塌的问题 

overflow: hidden;
display: inline-block; 
float: left;

二、定位

1.相对定位

相对于自身原来的位置。原来的位置不会因为位置变动消失，原来的位置还在。

.box1{
				/* position: static; 默认*/
				position: relative; /* 相对定位 相对于自己原来的位置 */
				left: 500px;
				top: 200px;
				width: 200px;
				height: 200px;
			}

 

2.绝对定位

脱离正常文档流 定位相对于浏览器 包含框无定位 相对于浏览器定位 包含框有定位 相对于离自己最近的包含框定位

搭配：父元素相对定位，子元素绝对定位。

.box1{
				position: absolute;  /* 绝对定位 */
				left: 0;
				top: 0;
				width: 200px;
				height: 200px;
			}

 

3.固定定位

特殊的绝对定位 始终相对于浏览器定位

	.box1{
				position: fixed;/* 固定定位 */
				/* 始终相对于浏览器定位 */
			    right: 0;
				bottom: 0; 
				width: 200px;
				height: 200px;
			}

 

4.粘滞定位

position:relative与position:fixed结合
当在某个阈值，是相对定位，超出某个阈值后，为固定定位

.box1{
				position: sticky;  /*粘性定位 */
				/* 是 position:relative 与 position:fixed 的结合体 */
				position: fixed;
				top: 20px;
				height: 100px;
			}

定位堆叠顺序

• 堆叠顺序值越大，优先级越高 即值越大，堆叠越靠上
• 值可以为正 也可以为负。
• z-index只在定位的情况下才起作用 

三、清除浮动

   1.给父元素加height
   2.给父元素加overflow:hidden
   3.在所有有浮动的元素后加一个空元素div，给此空元素添加样式clear:both
     

clear:left   /* 清除左浮动 */
clear:right  /*    清除右浮动 */
clear:both    /* 清除左、右浮动 */

   4.给父元素添加伪元素,在此伪元素上清除浮动

.clearfix::after{
    display:block;
    content:"";
    clear:both;
}