宽高自适应和窗口自适应（二级菜单问题解决）

自适应：元素的大小能够根据窗口或子元素自动调整

宽度自适应，常用于导航栏之类的

  <style>
        div{background-color: yellowgreen;
            width:auto;
            /* 宽度不写或者设为auto,就是宽度自适应 */
            padding: 100px;}
    </style>

宽度自适应和根据窗口进行调节，不会撑开滚动条，但是宽度设为百分之百设置边距会撑开滚动条

高度自适应，height:auto或者不写

如果内容太少，高度撑不开可以设置一个最小高度min-height(还有 max-height  min-width  max-width)

浮动元素的高度自适应

 

复制代码
 <style>
        .left,.right{
            width:100px;
            height:100px;
            float:left;
        }
        .left{background-color: aqua;}
        .right{background-color: brown;}
        .content{
            width:200px;
            height:200px;
            background-color: blueviolet;
        }
        .box{
            /*1. height:100px;如果浮动过多，换行就又会出现高度塌陷 */
            overflow: hidden
            ;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <!-- 2.<div style="clear:both"></div> 增加空标签，不利于代码可读性-->
    </div>
    <div class="content"></div>
复制代码

 

 

 

二级菜单问题解决

1.二级菜单把下面的内容顶下去（直接加overflow:hidden)

  使用给菜单绝对定位把菜单脱离文档流

具体操作：a.给子盒子加入absolute,并根据实际情况进行位置上的调整，给父盒子加入relative

　　　　　b.给需要隐藏的菜单加入display:none

　　　　　c.给菜单的标题加入  .父盒子名称 hover ul{display:block}

2.导航栏使用浮动使高度塌陷，下面的盒子会顶上来

具体操作：a.使用伪元素在盒子末尾加入内容 .box::after{content:""}，如果内容里有文本还需要加入visiblity:hidden(可视性：隐藏）

　　　　　b.在这个伪元素上加上清浮动（注意要加入display:block;否则清浮动不能生效）

复制代码
<style>
          /* 第一个字母 */
         div::first-letter {font-size: 30px;} 
         /* 第一行 */
         div::first-line{background-color: aqua;}
         /* 在文字前面加内容 */
         div::before{content:"aaaa";}
         /* 在文字最后加入内容 */
         div::after{content: "bbbb";}

    </style>
复制代码

窗口自适应，盒子根据窗口大小进行改变

 

html,body{height:100%}
.box{width:100%;height:100%}

 

posted @   故塔拉黑暗之神  阅读(84)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示