zoukankan      html  css  js  c++  java
  • CSSHTML实现高度宽度自适应

    首先说明 auto 和 100%是不一样的,100%是根据元素的像素有关的,auto是自动的。
    举个例子:给box下添加一个div高度是100%,这时候div高度为box高度300px,
    这时候如果给这个div设置padding,那么这个div的高度等于box的高度+padding的像素之和。

    再说一个知识点:
    正常文档流下,块级元素的宽度等于父元素的宽度,高度为内容撑开的高度;内联元素的高度宽度都是内容撑开的高度宽度;
    设置绝对定位/固定定位/浮动会脱离文档流;
    脱离文档流下,块级元素的宽度是内容撑开的元素,高度还是内容撑开的高度;
    给内联元素设置绝对定位/固定定位/浮动,内联元素就会有块元素的特点。

    <div class="box">
      <div class="header"></div>
      <div class="content">
        <div class="left"></div>
        <div class="main"></div>
      </div>
    </div>

    第一种使用: auto;overflow: hidden

    <style>
      *{margin: 0;padding: 0;}
      .box{300px;height:300px;position: relative;margin: 20px auto;}
      .header{height: 100px; 100%;background: #FF0000;}
      .content{position: absolute;top:100px;bottom: 0;background: yellow;height: auto; 100%;}
      .left{float: left;height: 100%; 100px;background: aqua;}
      .main{background: green;overflow: hidden; auto;;height: 100%;}

    </style>

    二种使用: 100%;padding;box-sizing: border-box;

    <style>

      *{margin: 0;padding: 0;}

      .box{300px;height:300px;position: relative;margin: 20px auto;}
      .header{height: 100px; 100%;background: #FF0000;}
      .content{position: absolute;top:100px;bottom: 0;background: yellow;height: auto; 100%;}
      .left{float: left;height: 100%; 100px;background: aqua;}
      /* .main{background: green; auto;height: 100%;padding-left: 100px;} */
      /* 这种情况,宽度是auto就会自己适应 */
      .main{background: green; 100%;height: 100%;padding-left: 100px;box-sizing: border-box;}
      /* 这个时候width是100%,是相对于父元素的宽度,padding-left属性就会是宽度多出100px,这时候就需要设置box-sizing: border-box;的作用是把padding往里加,不会改变宽度. */

    </style>

  • 相关阅读:
    控制HTML Input只能输入数字和小数点
    VS中的路径宏 vc++中OutDir、ProjectDir、SolutionDir各种路径
    C# ListView用法详解
    wordpress学习五: 通过wordpress_xmlrpc的python包远程操作wordpress
    用IDEA开发简单的Servlet
    在centOS中安装mongodb
    simhash-- 一种文档去重的算法
    一个java实现的简单的4则运算器
    搭建ZooKeeper
    java入门--4111:判断游戏胜者-Who Is the Winner
  • 原文地址:https://www.cnblogs.com/Isabella-CC/p/10085448.html
Copyright © 2011-2022 走看看