HTML宽高自适应

1.透明度

​ opacity:0~1的数字

​ filter：alpha（opacity=0~100的数字）；

​ 0表示完全透明，opacity属性1或者filter的100代表完全透明；

​ 说明:这是让元素整体透明

​ 如果只是让颜色透明，用rgba（r，g，b ，透明度）

2.自适应

​ 概念 ：能够根据设备类型尺寸，自动调整页面效果，以达到显示一个比较正常的布局效果。

1.宽度自适应

​ 1.不设置宽度

​ 2.使用百分比

​ 3.最大最小宽度

min-width：*px 设置最小宽度
max-width：*px 设置最大宽度

2.高度自适应

​ 1.不设置高度

​ 注意:如果子元素浮动，会脱离文档流，造成高度塌陷，所以需要清除浮动，解决这个问题

​ 清除浮动的方式;

1.给元素的最后面添加一个空的div，并取类名clear

<div class="clear"> </div>

​ 并给该元素设置唯一样式

.clear{
clear: both;
	}

2.设置样式

给浮动元素的父亲添加类名clearfix

.clearfix:after{      		//在该元素的内容后面加添加一个伪元素
		display:block;		//伪元素类型伪块元素
		content:''; 		//元素的内容为空
		clear:both;			//清除前面兄弟的浮动
		height:0;			//处理低版本的浮动
}
.clearfix( zoom:i)//Ie6清除浮动

3.给浮动元素的父亲添加样式 overflow:hidden;

​ 2.使用百分比

​ 注意;如果要实现第一屏页面，需要先加

html,body{
width:100%
height:100%
}

3.使用最大最小高度

​ min-height；*px 设置最小高度

​ max-height：*px设置最大高度

3.伪元素

	e:after{
	content:'内容'
	} //在e元素后面加内容
	e：before{
	content:'内容'
	}//在e元素前面加内容

伪类和伪元素的区别：【面试题】

​ 伪类是一种临时状态，只有状态触发的时候生效，伪元素是一个假的元素，虚拟的dom节点。

​ 伪类使用单冒号，伪元素用双冒号

​ ：after和：：after都是伪元素，只是不同版本写法

：：selection{}//鼠标选中的文字样式设置
：：placeholder{}//提示信息的样式设置

兼容最小高度的写法

min-height:*px;
height:auto !important;
_height:*px;

多种显示与隐藏的区别

1.display：none；//不占据原位置
2.visibility：hidden //会占据位置| visible//显示
3.opacity ：0 //会占据原位置，可以点击触摸