博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
宽高自适应
阅读量:5270 次
发布时间:2019-06-14

本文共 2148 字,大约阅读时间需要 7 分钟。

一、宽高自适应

网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应。

元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以

适应在不同设备、不同窗口和不同分辨率下显示。

(1)宽度自适应

        元素宽度设置为100%。(块元素宽度默认为100%)

(2) 高度自适应

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

(3)元素具备最小高度的自适应

min-height属性:最小高度;

min-width:最小宽度

max-height:最大高度

max-width:最大宽度

注:IE6及以下版本不识别该组属性。

注:height属性在IE6里就类似min-height作用。

Filter:表示过滤器的意思,它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲,Filter是一种用来过滤不同浏览器的Hack类型。

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

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

语法:选择符{_属性:属性值;}

 

 

2)!important关键字过滤器
它表示所附加的声明具有最高优先级的意思。但由于IE6及更低版本不能识别它,我们可以利用IE6的这个Bug作为过滤器来兼容IE6和其它标准浏览器。

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

兼容元素具备最小高度自适应的方法:

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

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

 

3)*属性过滤器

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

语法:选择符{*属性:属性值;}

4)扩展内容

\9:IE浏览器组         语法:选择符{属性:属性值\9;}

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

+:ie7  IE7 以下(包括IE7)             语法:选择符{+属性:属性值;}

 

(3)浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷)

hack1:给父元素添加声明overflow:hidden;

hack2:在浮动元素下方添加空div,并给该元素添加声明:clear:both;height:0;overflow:hidden;

hack3:万能清除浮动法

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

overflow:hidden;visibility:hidden; zoom:1;}

hack4:

 

 

一、伪对象选择符(伪元素选择符):

1):after(与content属性一起使用,定义在对象后的内容。)

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

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

2):before:与content属性一起使用,定义在对象前的内容。

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

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

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

说明:

*(该伪元素只能用于块级元素。)

*ie6以下版本浏览器不支持伪对象选择符

 

visibility:hidden/visible;隐藏/可见

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

visibility:hidden;属性会使对象不可见,但该对象在网页所占的空间没有改变,等于留出了一块空白区域,而 display:none属性会使这个对象彻底消失。

 

 

 

 

(4)元素高度自适应窗口高度

        设置方法: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>表示超链接的目标地址在框架中打开

<a href="news.html #top">返回我原来页面的原来位置</a>

 

 

 

html高度自适应三种经典布局:

http://download.csdn.net/detail/flqbestboy/9920506

转载于:https://www.cnblogs.com/fanlinqiang/p/7741256.html

你可能感兴趣的文章
jquery javascript 回到顶部功能
查看>>
JS中实现字符串和数组的相互转化
查看>>
用格式工厂将mts文件转换成其它格式flv,mpg失败
查看>>
web service和ejb的区别
查看>>
Silverlight StoryboardManager 故事板管理类
查看>>
Windows Azure Cloud Service (29) 在Windows Azure发送邮件(下)
查看>>
CS61A Efficiency 笔记
查看>>
ArcGIS Server Javascript 多图对比功能
查看>>
c#实现把异常写入日志示例(异常日志)
查看>>
函数的进阶
查看>>
对百度杀毒软件的评价
查看>>
微信上传素材返回 '{"errcode":41005,"errmsg":"media data missing"}',php5.6返回
查看>>
七七四十九劫,九九八十一难
查看>>
.net 获取CPU频率 内存 磁盘大小,域名 端口 虚拟目录等
查看>>
div或者p标签单行和多行超出显示省略号
查看>>
Elasticsearch 滚动重启 必读
查看>>
mysql explain执行计划详解
查看>>
windows下面安装Python和pip终极教程
查看>>
Hadoop基本概念
查看>>
java.util.zip压缩打包文件总结一:压缩文件及文件下面的文件夹
查看>>