Day10 自适应和块级格式化文档

一、自适应。
	1.概念：网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口宽度
	或子元素多少自动调整宽度和高度，这就是自适应。
	2.宽度自适应：不写宽度，让元素的宽度随着浏览器窗口大小改变而改变。
	默认值：width:auto;
	3.高度自适应：不写高度，高度由子元素撑开，随着子元素多少，自动调整。（好处是不会溢出）
	height:auto;
	4.浮动元素的宽度自适应问题
	元素浮动后默认转为块元素，
	块元素如果不写宽度，默认独占一行，但是在浮动后，宽度由内容撑开。
	5.浮动元素的高度自适应问题
	高度塌陷：父元素不写高度，子元素浮动，会造成高度塌陷。
	解决：
	<1>给父元素添加高度。（父元素就不自适应了。）
	<2>给父元素添加overflow:hidden;(当我们需要元素超出盒子范围时，使用此属性不合适)
	<3>在父元素最后边添加一个子元素，使用clear:both解决高度塌陷。(弊端：页面中多了
	很多的空标签，影响页面结构)
	<4>万能清除浮动法。
	塌陷元素::after{
	content: "";
	display: block;
	height: 0;
	overflow: hidden;
	clear: both;
	}
	总结：能用overflow:hidden解决的就用它解决，不能解决再去考虑万能清除浮动法。
	6.BFC:块级格式化上下文。
	<1>作用：有些属性可以触发bfc，为自身创建一个作用域模块，以用来解决
	margin-top穿透问题、高度塌陷问题。
	<2>什么是matgin-top穿透问题：父元素下边的第一个子元素添加margin-top会出现在父元素身上。
	<3>哪些属性可以触发bfc:
	overflow:hidden，auto，scroll
	float:left/right;
	position:absolute、fixed;
	弹性盒
	inline-block
	7.clear 清除浮动影响
	left 清除左浮动造成影响
	right 清除右浮动造成影响
	both 清除两侧浮动造成影响
	8.伪元素选择器
	伪类选择器
	:hover{
	}
	伪元素选择器
	::after{ 在...之后（需要搭配content使用）
	content:'';
	}
	::before{ 在...之前（需要搭配content使用）
	content:'';
	}
	::first-line{} 选中...的第一行
	::first-letter{} 选中...的第一个字符
	区别：伪类选择器是单冒号，伪元素选择器是双冒号。
	二、元素显示、元素隐藏和元素透明。
	1.元素隐藏
	<1>display:none; 元素隐藏和消失，元素不再占据页面空间
	<2>height:0px;搭配overflow:hidden; 元素高度和元素溢出
	<3>opacity:0; 元素透明，元素并未消失。
	<4>visibility:hidden; 元素隐藏和消失，元素仍占据页面空间。
	hidden 消失
	visible(默认值) 元素出现
	<5>transform:scale(0); 元素缩放，缩放为原本的0倍，达到元素消失。(下周讲)
	2.元素透明
	opacity 元素透明 0-1 0全透明——1不透明
	transparent 透明色
	rgba(0-255,0-255,-255,0-1) 透明色，前三个参数为红绿蓝三色域取值，第四个参数为透明度(0-1）
	三、最小最大宽高
	max-width 最大宽度
	min-width 最小宽度
	max-height 最大高度
	min-height 最小高度
	元素在不去写宽高时
	<1>宽度按照最大宽度或者实际宽度显示(浏览器窗口小于最大宽度时)
	<2>高度按照内容高度去显示。如果没有内容或者小于min-height就按照min-height显示，
	如果内容大小超出max-height，按照max-height显示。
	四、iframe 页面嵌套
	作用：iframe是用来在网页中插入第三方页面，可以把一些网站的公共部分摘离出来，通过iframe按需引入即可。
	五、宽高满屏
	html,body{
	height:100%;
	}
	.xx{
	height:100%;
	}
	六、calc计算函数
	作用：用于动态计算长度值，运算顺序和数学运算顺序一致。
	注意：运算符前后需要加空格。