小白的前端学习笔记（浮动+css选择器）

浮动

float：left(right)

特性：脱离正常文档流

正常文档流：自上而下，从左往右

解决浮动塌陷问题

  1、在父容器内设置css
       overflow：hidden;
  2、在父容器最底部加上一个空div
      <div style="clear=both"></div>
  3、在父容器内设置css
       .parent:after{
       	content: '';
       	height: 0px;
       	display: block;
       	clear: both;
       }

:after 和 :beforev i

:after  在元素后面添加内容   content设置其内容
:before 在元素的前面添加内容 content设置其内容

选择器

基本选择器

 1、类选择器
 2、ID选择器
 3、标签选择器
   优先级 ：
   ID选择器>类选择器>标签选择器

行内样式>内部样式>外部样式

高级选择器

 1、层次选择器
    a、后代选择器
	    E F{
			
		}作用范围：选择器E里面的所有选择器F(包含子类以及间接子类) 
	b、子代选择器
	    E>F{
			
		}作用范围：选择器E里面的所有子选择器（只能作用于子类 不能使间接子类）
	c、相邻兄弟选择器
	    E+F{
		   
	    }作用范围：紧紧位于选择器E的后面的选择器F（同一父元素下，一定是相邻且在选择器E的后面）
	d、通用兄弟选择器
	    E~F{
		
		}作用范围：跟在选择器E后面所有的选择器F（同一父元素下，所有跟在E后面的F）
 2、结构伪类选择器
    a、非指定类型的子元素
	    选择器 E F：first-child{
			//第一个子类
		}
		选择器 E F:last-child{
			//最后一个子类
		}
		选择器 E F:nth(n){
			//指定第几个 n是具体数值 也可以是表达式
		}
		** 注意：如果子类中有非F的 也计算其内
	b、指定类型的子元素
	       选择器 E F：first-of-type{
		   //第一个子类
	   }
	       选择器 E F:last-of-type{
		   //最后一个子类
	   }
	       选择器 E F:nth-of-type(n){
		   //指定第几个 n是具体数值 也可以是表达式
	   }
	        ** 注意：如果子类中有非F的 不计算计算其内
 3、属性选择器
      选择器E[name]{
		  作用于E元素内含有name属性
	  }
	  选择器E[name=？]{
		  作用于E元素内含有name属性 且值为？
	  }
	  选择器E[name^=a]{
		  作用有E元素内含有name属性，且值为a开头
	  }
	  选择器E[name$=a]{
		  作用于E元素内含有name属性，且值为a结尾
	  }
	  选择器E[name*=a]{
		  作用于E元素内含有name属性，且值内含有a
	  }

总结

	学习了浮动和选择器的分类，使自己在css样式的应用上有更多的选择，也能控制与实现更多的页面结构。