H5基础-9

一、透明度

opacity:0-1的数字;

filter:alpha(opacity=0-100的数字);---解决兼容性问题

注：0代表透明，opacity属性1或filter的100代表完全不透明，是让元素整体透明，如果只是让颜色透明，使用rgba{R,G,B,透明度}

二、自适应

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

1.宽度自适应

A.不设置宽度

B.使用百分比

C.使用最大最小宽度

min-width:*px;

max-width:*px;

2.高度自适应

A.不设置高度

注:如果子元素浮动，会脱离文档流，造成高度塌陷

解决方法：清除浮动带来的影响

方式一：

a.给浮动元素的最后面添加一个空的div，并给他一个类名clear---<div class="clear"></div>

b.给该元素设置唯一的样式---.clear{clear:both;}

方式二：

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

b.设置样式如下

.clearfix:after{

        display:block;---伪元素类型是块级元素

        content:' ';---元素内容为空

        clear:both;---清除前面兄弟的浮动

        height:0;---处理低版本兼容问题

}

.clearfix{zoom:1;}---IE6兼容

方式三：

给浮动的元素的父元素添加样式---overflow:hidden;

B.使用百分比

注：如果要实现一屏页面，需要先加---html,body{width:100%;height:100%;}

C.使用最大最小高度

min-height:*px;

max-height:*px;

三、伪元素

e:after{content:'内容';}---在元素e的内容前添加内容

e:before{content:'内容';}---在元素e的内容后添加内容

伪类和伪元素的区别：

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

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

注：

:after和::after都是伪元素，只是是不同版本的写法

::selection{ }---鼠标选中的文字样式设置

::placeholder{ }---提示信息的样式设置

四、兼容IE6最小高度的写法

min-height:*px;

height:auto !important;

_height:*px;(_---IE6特有的标识，只在IE6生效)