css基础教程之尺寸与补白

老雷PHP全栈开发

发布于 2020-07-02 15:12:37

4570

发布于 2020-07-02 15:12:37

文章被收录于专栏：老雷PHP全栈开发

css基础教程之尺寸与补白

一、宽度

width 宽度

min-width 最小宽度

max-width 最大宽度

width：<length> | <percentage> | auto

.w{
  width:200px;
  width:10rem;
  width:20%;
  max-width:500px;
}

二、高度

height：<length> | <percentage> | auto

height 高度

min-height 最小高度

max-height 最大高度

.h{
  height:200px;
  height:20%;
}

三、外部白margin

外部白是对外的，两个盒子之间的距离

可拆分

margin-top

margin-right

margin-bottom

margin-left

margin：像素|百分比

.box{
  margin:10px;
  margin:20px 10px 5px 6px;
  margin-top:10px;
}

四、内补白 padding

内补白是对内的，一个盒子壳的厚度

可拆分

padding-top

padding-right

padding-bottom

padding-left

padding：像素|百分比

.box{
  padding:10px;
  padding:10% 10px 5px 6px;
  padding-top:10px;
}

五、box-sizing

设置或检索对象的盒模型组成模式

box-sizing：content-box | border-box

content-box 默认值，padding和border不被包含在定义的width和height之内，会被padding撑开

border-box padding和border被包含在定义的width和height之内。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>尺寸与补白</title>
    <style>
      .box1,.box2{
        width:200px;
        height:100px;
        border:1px solid #0F8E82;
        box-sizing: border-box;
      }
      .box1{    
        margin-bottom: 10px;      
      }
      .box2{
        padding: 10px;
      }
      .box3{
        min-width:200px;
        min-height:100px;
        max-width:400px;
        max-height:200px;
        border:1px solid #0F8E82;
        box-sizing: border-box;
        margin-top: 20px;
      }
</style>
  </head>
  <body>
    <div class="box1">老雷</div>
    <div class="box2">老雷</div>
    <div class="box3">老雷</div>
  </body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-12-03，如有侵权请联系 cloudcommunity@tencent.com 删除

border