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

    定义
    网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应。
    自适应的优点
    元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备、不同窗口和 不同分辨率下显示。

    宽度自适应

    元素宽度设置为100%。(块元素宽度默认为100%) 或者不设置宽度(width);(宽度是父元素的宽度)

    高度自适应

    1、自适应元素高度:height:auto;或者不设置;(是子元素撑开父元素的高度)
    2、元素高度自适应窗口高度 设置方法:html,body{height:100%;} 
        如果设置子元素的高度跟随父元素的高度变化而变化,那么父元素必须有高度。

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

    min-height属性:最小高度;(IE6浏览器不识别该属性)
        hack1:min-height:value;_height:value;
        hack2:min-height:value; height:auto!important;height:value;
    说明:height属性在IE6里就类似min-height作用。 min-height(最小高度) max-height(最大高度) max-height:200px; height:200px!important; min-width(最小宽度) max-width(最大宽度) 注:IE6及以下版本不识别该组属性。
     
    一页屏缺点
    1、上下移动一定是定位
    2、图片有时会变形
    3、默认情况下,一个块元素的宽是撑满父元素的
        但如果给了绝对定位和浮动,不设置宽为100%,改变元素的宽度就是内容的宽
    ​️我还很喜欢你、就像sin²x+cos²x始终如一
  • 相关阅读:
    接口中解决默认方法冲突
    继承中的访问域问题
    继承中的多态问题
    Java中方法的调用过程
    【JS】表格获取每一列方法
    【Git报错】 ! [rejected] master -> master (fetch first)
    【Vue】vue-cli配置proxyTable调用服务器接口
    layui监听多个radio事件
    【总结】display属性inline,block,inline-block
    【实例总结】fixed定位元素内部滚动显示
  • 原文地址:https://www.cnblogs.com/tis100204/p/10280812.html
Copyright © 2011-2022 走看看