css的盒子模型--布局

时间：2020-12-09 12:35:07 收藏：0 阅读：17

盒子模型

1.盒子被分为两类,可以通过box-sizing控制

IE模型的盒子 (标准盒子模型)content-box

.box1{
       width:500px;
       height: 500px;
       margin: 100px auto;
       border:2px solid #000000;
       padding:10px;
       /* 默认项 width,height不包括border和padding */
       box-sizing: content-box;
     }

技术图片

border-box盒子

.box1{
       width:500px;
       height: 500px;
       margin: 100px auto;
       border:2px solid #000000;
       padding:10px;
       /* width,height包括border和padding */
       box-sizing: content-box;
}

技术图片

2.width,height,padding,margin,border 百分比

2.1一般情况下

width,``height没有继承特性，使用%`，定义基于最近的有定义宽高包含块（父元素）宽度，高度的百分比宽度。（关于定义是这样的，仅限于父元素是具体的大小，比如下面的例子，

2.2举了父元素的宽度没有定值的情况）

例如父盒子div宽 100px,子盒子div宽 50%,即50px;

padding,margin没有继承特性，使用%,规定基于最近的有定义宽的父元素的宽度的百分比的填充。

border,关于border-width没有%

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=
  , initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .box1{
      width:500px;
      height:600px;
      padding:10px;
      margin:100px auto;
      background-color: #ccc;
  }
  .box2{
      width:80%;
      height:80%;
      /* 上右下左 */
      padding:10% 5% 8% 7%;
      margin:10% 5% 8% 7%;
      border:5% solid  #000000;
      border:2px solid  #585656;
      /* 最终
      width:400px;
      height:480px;
      padding:50px 25px 40px 35px;
      margin: 50px 25px 40px 35px;
       */
  }
  .box3{
      width:80%;
      height:80%;
      /* 上右下左 */
      padding:10% 5% 8% 7%;
      margin:10% 5% 8% 7%;
      border:2px solid  #642222;
        /* 最终
      width:320px;
      height:384px;
      padding:40px 20px 32px 28px
      margin: 40px 20px 32px 28px
       */
  }
</style>
<body>
  <div class="box1">
    <div class="box2">
      <div class="box3"></div>
    </div>
  </div>
</body>
</ht

如果元素有定位absolute这种情况下，百分比是相对于已定位了父元素，如果没有定位的父元素，只能找html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=
  , initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  html{
   width: 100%
  }
  .box1{
      width:500px;
      height:600px;
      padding:10px;
      margin:100px auto;
      background-color: #ccc;
  }
  .box2{
      position:relative;
      width:80%;
      height:80%;
      /* 上右下左 */
      padding:10% 5% 8% 7%;
      margin:10% 5% 8% 7%;
      border:5% solid  #000000;
      border:2px solid  #585656;
      /* 最终
      width:400px;
      height:480px;
      padding:50px 25px 40px 35px;
      margin: 50px 25px 40px 35px;
       */
  }
  .box3{
      position: absolute;
      width:1%;
      height:1%;
      /* 上右下左 */
      padding:10% 5% 8% 7%;
      margin:10% 5% 8% 7%;
      border:2px solid  #642222;
        /* 最终
      width:320px;
      height:384px;
      padding:40px 20px 32px 28px
      margin: 40px 20px 32px 28px
       */
  }
</style>
<body>
  <div class="box1">
    <div class="box2">
      <div class="box3"></div>
    </div>
  </div>
</body>
</html>

如果子元素是定位fixed,百分比相对于html

2.2 html和body的height:100%

html的height:100%获取得到浏览器的高度，而body的height:100%依赖html的高度，以此类推，body里面的子元素的height根据body的height,（除了上面定位的情况）

可以想象成一条高度依赖链，元素的高度百分比需要定值高度的父元素。

所以如果这条依赖链有一个a元素没有设置height或者height为auto(height:auto，是指根据块内内容自动调节高度。)，而a的子元素b{height:50%},因为b找不到一个被定义高度的父元素，所以认为b的height为0

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=<div></div>, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    *{
    margin:0px;
    padding:0px;
    }
    
    html,body{
    height:100%;
    }
    
    .box1{
        background:#ddd;
        /* height:50%; */
    }
    .box2{
        background:rgb(104, 53, 53);
        height:50%;
    }
    </style>
</head>
<body>
  <div class="box1">
    <div class="box2">
    </div>
  </div>
</body>
</html>

为什么宽度没有这样的特性，因为当元素（块级元素的特性）的width为auto，会占据所有的空间。而当元素（块内级元素的特性）的width为auto，width是由内部的子元素堆砌的时候，被设置为百分比的子元素会根据这个被堆砌的父元素。不像height一定需要父元素定值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,body{
      height: 100%;
    }
   .box1{
       /*默认值*/
      width:auto;
      bac/kground-color: red;
      height: 100%;
      display: inline-block;
      box-sizing: border-box;
      padding:50px
   }
   .box2{
    width:50%;
    background-color: yellow;
    height: 100%;
   }
   .box3{
     height:50px;
     width:500px;
   }
  </style>
</head>
<body>
    <div class="box1">
      <div class="box3"></div>
      <div class="box2"></div>
    </div>
</body>
</html>

3.块级元素和内联元素

3.1块级元素: 可以设置宽高，padding,margin;总是独占一整行。

设置为块级元素：display:block,或者有些元素默认为块级元素，p,h,ul,li,ol,dl,dt,dd

3.2行内元素：总是在一行内；不可以设置宽高，宽高都是根据里面的内容自适应，padding,margin这两个属性只能设置左右两个方向。

设置为行内元素：display:inline-block;或者有些元素默认为行内元素，比如a ,i , em,span

3.3 absolute或者fixed后，元素的性质同display:inline-block,即宽高可以由内部撑开，也可以设置。