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

    • 宽度自适应:

    默认宽度100%的元素
    ;单位为%

    最小宽度自适应:
    min-;

    最大宽度自适应:
    max-;

    • 高度自适应:

    不写height,让内容撑起
    height:50%; 前提==>html,body{height:100%;}

    最小高度自适应:
    min-height:;
    最大高度自适应
    max-height:;

    • 问题:

    父级没有设置高度,子级浮动,父级会产生高度塌陷
    解决方法:
    1、父级设置固定宽高                                                               ==>不灵活
    2、父级元素浮动                                                                         ==>会影响后续元素
    3、overflow:hidden;                                                                       ==>其他子元素溢出有影响(触发bfc区域)
    4、给浮动元素最后边加空标签(宽高为0),clear:both;         ==>多写标签,代码冗余
    5、after伪类(推荐)                      .nav:after{content:"";display:block;clear:both;}        (至少包含3项属性)

    .nav:after{

    content:".";

    display:block;

    0;

    height:0;

    clear:both;

    overflow:hidden; ==>隐藏"."

    visibility:hidden; ==>隐藏标签本身

    }

    • 关于隐藏

    display:none;       不显示标签,隐藏(不占位)
    visibility:hidden;   隐藏(占位)
    visibility:visible;    显示

    opacity:0~1;透明度       ==> color:rgba(255,255,255,0~1);颜色透明度

  • 相关阅读:
    oracle中rownum和rowid的区别和用法
    jsp中,对window对象的简单总结
    下拉列表框实现二级联动
    window.showModalDialog()的简单用法
    javascript中的正则表达式
    java实现树型结构样式
    几个数据库的驱动、连接
    Java桌面程序中设置一个软件的系统托盘
    【动态规划】求两字符串连续最大公共子串长度
    大整数相乘
  • 原文地址:https://www.cnblogs.com/strongerPian/p/12448416.html
Copyright © 2011-2022 走看看