Day08-CSS

0810

浮动：

浮动作用：
	1.环绕布局
	2.并列显示(主要作用)
属性：
	float:;
		left;
		right;
		none;
css布局时，有三种布局机制
	1.标准文档流，普通流，主要实现上下布局的排列效果
	2.浮动流，主要实现并列显示的布局 float
	3.定位流，主要实现层叠显示的布局 position
	
浮动元素的特点：
	浮动元素会脱离文档流，后面的元素会把位置补上去，从而被浮动元素覆盖，而内容不会被覆盖；
	
浮动实现并列布局:
	特点：1.浮动元素会以顶对齐的方式显示；
		 2.浮动之后元素之间没有默认的空隙问题；
		 3.浮动会脱离文档流 
		 4.并列显示的同辈元素都要添加float属性
		 5.都右浮动的时候顺序会颠倒；
		 6.浮动元素会一直向左或向右浮动，知道遇到元素边缘，另一个元素、padding、margin时才会继续浮动
		 7.浮动元素对margin属性的auto属性值失效
		 8.浮动对元素本身的影响：
		 	块元素：添加浮动属性之后，宽高根据内容显示，依然可以定义宽高
		 	行内元素：添加浮动之后，就可以定义宽高等属性，可以理解为隐形转换成了块元素

浮动引起的高度塌陷：(清除浮动的方法)

什么是高度塌陷：
	高度不能被子元素撑高，显示为0，就是没有高度了
怎么引起的高度塌陷：
	由于子元素浮动，而引起父元素的高度塌陷
解决高度塌陷的方法：
	1.给父元素设置高度；height:;
		优点：简单
		缺点：高度固定，你能根据内容改变
	2.开启bfc
		给父元素添加overflow:hidden;
			优点：简单
			缺点：如果子元素溢出，则会被隐藏
		给父元素添加float:left;
			优点:简单
			缺点：会影响下面的布局，元素不能居中
		给父元素添加display:inline-block;
			优点：简单
			缺点：会带来新的问题，元素不能居中
	3.给浮动元素的后面添加空元素，并且给空元素添加css属性：clear:both;
		清除浮动属性：
			clear:;
				none 默认值，会被浮动元素所覆盖
				left 不会被左浮动元素覆盖
				right 不会被右浮动元素覆盖
				boths 不会被左/右浮动元素所覆盖
		该属性不是给浮动元素所添加的，是受到浮动元素影响的元素添加的；
			优点：可以解决塌陷的问题
			缺点：增加结构代码	
		一般采用div和br标签
	4.伪元素方法：万能清除法：推荐使用
		父元素::after{
			content:'';
			clear:both;
			display:block;
			/*兼容低版本浏览器*/
			height:0;
			overflow:hidden;
			visibility:hidden;
		}
		::after 
		content:'';	是给伪元素添加内容的属性
		clear:both
		display:block;

伪元素：

::before
说明：
	1.伪元素：表示假的元素，是通过CSS添加的
	2.伪元素，在使用时结合content=''属性一起使用
	3.通过伪元素添加的元素，显示为行内块元素类型
	4.伪元素里面的内容通过content属性添加

隐藏元素属性：

visibility:hidden; 元素隐藏，但位置保留
opacity:0; 元素透明，但是还存在
display:none; 元素隐藏，但位置不保留

BFC

BFC：与上下文无关的独立的渲染区域
BFC的布局规则：
            1、内部的Box会在垂直方向，一个接一个地放置。
            2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）
            3、每个元素的margin box的左边， 与包含块border box的左边相接触

            4、BFC的区域不会与float box重叠。
            5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
            6、计算BFC的高度时，浮动元素也参与计算

        开启BFC的条件：
            1、根元素(html)
            2、float属性不为none
            3、position为absolute或fixed
            4、display为inline-block, table-cell, table-caption, flex, inline-flex
            5、overflow不为visible

        BFC的应用：
            1、自适应两栏布局
            2、清除内部浮动（高度塌陷）
            3、防止margin上下重叠