好程序员web前端分享高度自适应

好程序员web前端分享高度自适应

1、宽高自适应

网页布局中常常要定义元素的宽和高。但不少时候咱们但愿元素的大小可以根据窗口或子元素自动调整，这就是自适应。

它可以使网页显示更灵活，能够适应在不一样设备、不一样窗口和不一样分辨率下显示。

（1）宽度自适应

      块元素宽度默认为auto

（2） 高度自适应

元素{height:auto;}/高度不写

2、浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

解决高度塌陷的方法（清除浮动的方法）：

方法1：给父元素添加声明overflow:hidden;(缺点：会隐藏溢出的元素)

hack2:在浮动元素下方添加空块元素,并给该元素添加声明：clearboth;height:0;overflow:hidden;

（缺点：在结构里增长了空的标签，不利于代码可读性，且下降了浏览器的性能）

hack3:万能清除浮动法

选择符:after{content:".";clear:both;display:block;height:0;visibility:hidden; }

父容器选择符{zoom:1;}/*为了兼容IE6,IE7*/

3、伪类选择符/     ::伪元素或叫伪对象

1）:after(与content属性一块儿使用，定义在对象后的内容。)

如：div:after{content:url(logo.jpg);}

      div:after{content:"文本内容";}

2）:before:与content属性一块儿使用，定义在对象前的内容。

如：div:before{content:"在其前放内容";}

3）：first-letter:定义对象内第一个字符的样式。

4）：first-line:定义对象内第一行的样式。

说明：

*(:first-letter;:first-line该伪类只能用于块级元素。)

4、visibility:hidden/visible/inherit;隐藏/可见

visibility:hidden;和display:none;的区别：

visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，而 display:none属性会隐藏内容且空间消失。

元素具有最小高度最小宽度，最大高度，最大宽度的自适应

min-height属性：最小高度；

min-width:最小宽度

max-height:最大高度

max-width:最大宽度

注：IE6及如下版本不识别该组属性。

注：height属性在IE6里就相似min-height做用。

5、Filter:表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。

本质上讲，Filter是一种用来过滤不一样浏览器的Hack类型。

-----、过滤器(filter)

1）下划线属性过滤器
    当在一个属性前面增长了一个下划线后，因为符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，可是在IE6及更低版本浏览器中会继续解析这个规则。

语法：选择符{_属性：属性值；}

2）!important关键字过滤器
它表示所附加的声明具备最高优先级的意思。但因为IE6及更低版本不能识别它(important)，咱们能够利用IE6的这个Bug做为过滤器来兼容ＩＥ６和其它标准浏览器。

语法：选择符{属性：属性值!important;}

兼容元素具有最小高度自适应的方法：

hack1:min-height:value; _height:value;

hack2:min-height:value;  height:auto!important;   height:value;(建议使用)

3）*/+属性过滤器

    当在一个属性前面增长了*后，该属性只能被IE7及如下版本浏览器识别，其它浏览器忽略该属性的做用。

语法：选择符{*属性：属性值；}

4)扩展内容

\9：IE9如下的        语法：选择符{属性：属性值\9;}

\0:IE8 及以上                语法：选择符{属性：属性值\0;}

六、元素高度自适应窗口高度

        设置方法：html,body{height:100%;}

        2)自适应元素高度：height:100%;

扩展：

七、<iframe> 标签   框架

语法：<iframe   src="规定在 iframe 中显示的文档的 URL(默认的显示页面)" width="" height=""   frameborder="1/0"  name="iframe名称"     scrolling="yes/no/auto">   </iframe>

frameborder="1/0"  1表明有框架边框 /0表明无框架边框

滚动条：scrolling="yes/no/auto" yes :有   no:无    auto：自动

<a href="" target="iframe的name属性值"></a>表示超连接的目标地址在框架中打开。