zoukankan      html  css  js  c++  java
  • 宽高自适应

    一、宽高自适应

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

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

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

    (1)宽度自适应

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

    (2) 高度自适应

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

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

    min-height属性:最小高度;

    min-最小宽度

    max-height:最大高度

    max-最大宽度

    注: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;}

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

    +: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
  • 相关阅读:
    vim命令大全
    docer中运行crontab
    基于预加载的热区域数据的简单设计
    解析Health端点数据获取异常数据
    微服务链路调用耗时示例图
    Spring Cloud health节点通过注册中心扫描状态的简单实现
    转载:Service Mesh:重塑微服务市场--敖小剑
    Springboot统一参数验证方式
    Spirng boot 启动的时候进行监控检查不通过停止服务与自定义健康监控节点
    准备 Python3 和 Python 虚拟环境
  • 原文地址:https://www.cnblogs.com/fanlinqiang/p/7741256.html
Copyright © 2011-2022 走看看