CSS与HTML学习笔记-浮动、定位、文字溢出解决办法

1.CSS常用选择器

           id选择器                             #                             
           class选择器                          .                               
           标签选择器                          标签
           子代选择器                            >
           后代选择器                           空格
           通用选择器                            *
           兄弟选择器                            ，
                 选择器的优先级为：id选择器  >  class选择器  >子代选择器> 标签选择器 >后代选择器 > 通用选择器  
      最优先级： ！mportanr     （css属性）      

2.CSS中的浮动fioat
元素的水平方向浮动
一般常用法为
float: right; 元素的水平方向右浮动
float: left; 元素的水平方向左浮动

注意：
一旦元素添加浮动，元素将变为行内块级元素，脱离文档流，父容器检测不到浮动元素，向添加的浮动放向水平向上偏移，
直到它的外边缘碰到父容器框或另一个浮动框的边框或文档信息为止。和浮动元素几个浮动的元素放到一起，如果有空间的
话，它们将彼此相邻。

3.清除浮动带来的影响

clear:属性可以清除浮动所带来的影响

父容器未添加宽高的情况下
注：父容器没有设置宽高，利用伪类进行清除带来影响        添加后，父容器独占一行，与子元素同高
:after{
 		content:"";
 		text-spacing:none;
 		display: inline-block;	 		 		
 	}	
 	 注2：将父容器定位或浮动

4.定位position

一般用法为
position：absolute;           绝对定位            当未在带有定位属性容器时，以浏览器窗口左上角为起始坐标进行定位
                                                 当在已有定位属性的容器内时，以最近的带有定位属性的容器为坐标
                                                 
position：relative;           相对定位             相对于与自身位置为坐标进行元素定位
position：fixed;           固定对位                以浏览器窗口左上角为起始坐标进行定位   

注意：
元素一旦定位将会变成块级元素，脱离文档流。当定位的位置已有元素，它原本所占的空间不会改变，将会产生重叠覆盖效果。

 解决覆盖问题
  添加CSS属性：  z-index：-1:；    对想要被覆盖的元素进行添加  注：Z为z坐标轴

5.文字溢出处理
一行文字长度大于容器时会直接超出容器溢出
解决办法1

   处理文字溢出三件套
     overflow  :     hidden
     容器溢出处理      隐藏
     text-overflow     :   ellipsis
     文字溢出处理           溢出部分为   ……
     white-space: nowrap
     文本不会换行

解决办法2

  overflow: auto    文字溢出部分通过右边边框滚动条可见

解决办法3

  overflow:  scroll    边框出现滚动条

多行文字溢出省略号处理

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;