CSS学习系列(二) --- padding,border,margin

·  阅读 62
CSS学习系列(二) --- padding,border,margin

重学css系列

上一章# CSS学习系列(一) --- 盒模型

0. 写在前面

上一篇说到了盒模型是什么,由哪几部分构成,由内到外分别是content,padding,border,和影响盒外的margin。

1. Padding

说实话,padding真的没有什么好说的,如果大家有补充,请在评论区告诉我,我也没有想到会出什么样的面试题。具体的属性,列在下方。

  • padding的值:百分比|数字px ,但是不能为负
  • 当padding值为百分比时,坐标系是包裹他的元素的宽度,强调一下是宽度

关于第二点看一个例子,创建了一个容器元素没有指定宽高,默认会铺满body,然后里面又个div,padding-left 和padding-top 指定了一个百分比为10%,此时容器的大小是274*89

<style>
  .container{
    margin: 30px 30px;
    border: 2px solid #000;
    padding: 20px;
  }
  .padding1{
    height: 60px;
    width: 60px;
    padding-left: 10%;
    padding-top: 10%;
    border: 1px solid green;
  }
</style>
 <div class="container">
    <div class="padding1">padding demo</div>
  </div>

复制代码

image.png

当我们把子元素的渲染方式改为border-box会发生什么?

image.png

因为渲染方式变了,css里设置的width=contentWidth+paddingWidth+border,所以真正的contentWidth就变成了60-2-27,不够盛放两行文字,就被挤了出去

如果把padding-left和padding-top 值变大,超过盒子的大小时,padding就会占据整个盒子,内容为0,被挤出盒子外,padding-left 和 padding-top 的大小就是盒子的宽度和高度。

image.png

2.Border

2.1 参数

border: 1px solid red是以下三个属性的简写

2.1.1 border-width

  • 固定值
/* 当给定一个宽度时,该宽度作用于选定元素的所有边框 */
border-width: 5px;
/* 当给定两个宽度时,该宽度分别依次作用于选定元素的横边与纵边 */
border-width: 2px 1.5em;
/* 当给定三个宽度时,该宽度分别依次作用于选定元素的上横边、纵边、下横边 */
border-width: 1px 2em 1.5cm;
/* 当给定四个宽度时,该宽度分别依次作用于选定元素的上横边、右纵边、下横边、左纵边 (即按顺时针依次作用) *
border-width: 1px 2em 0 4rem;
/** 摘自MDN https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-width */
复制代码
  • 可以传入全局关键字 inherit(继承),initial(初始值),unset(不设置)
  • 作用于width的关键字 thin(细框线) medium(中框线) thick(粗框线)

2.1.2 border-style & border-color

属性含义
none不指定style的默认参数,边框会隐藏,优先级最低
hidden隐藏边框,优先级比none高
solid一条实线
关于这里的更多内容请到 MDN查看
color 就是css里定义的color,根据指定的width的固定值的个数

2.2 实例

在上面的例子中加入一个新的div,class设为border,构成了一个正方形的框,上下左右边框为1px的红色实线

<style>
.border{
    width: 100px;
    height: 100px;
    background-color: rgb(165, 185, 238);
    border: 10px solid red;
  }
</style>
<div class="border">borderDemo</div>
复制代码

image.png

如果把widthheight设为0会发生什么?

image.png

内容被挤出,然后边框构成一个正方形(敲黑板了,面试问你怎么画一个正方形,这是不是就会了!)。去掉文字和背景

#border1{
    width: 0px;
    height: 0px;
    border: 100px solid transparent;
    border-bottom: 100px solid red;
}
#border2{
    width: 80px;
    height: 0px;
    border: 60px solid transparent;
    border-bottom: 50px solid red;
}
#border3{
    width: 0px;
    height: 0px;
    border: 100px solid transparent;
    border-bottom: 100px solid red;
    border-radius: 50%;
}

复制代码

image.png

3.Margin

取值备注
固定值可正可负
百分比坐标系相对的是包裹他的元素,百分比取宽度作为外边距
auto让浏览器取一个合适的外边距,当设为 0 auto时水平居中,上下无外边距

3.1 固定值

3.1.1 当为正值时

  • 相邻元素上下会发生重叠,取大值。
  • 当元素没有内容时,会被覆盖
<style>
    .container{
      margin: 30px 30px;
      border: 2px solid #000;
      padding: 20px;
    }
    .margin1{
      margin-top: 10px;
      margin-bottom: 15px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="margin1">1</div>
    <div class="margin1"></div>
    <div class="margin1"></div>
    <div class="margin1">2</div>
  </div>
</body>
复制代码

image.png

中间没有内容的div会覆盖,有内容的相邻div上下会重叠,由于margin-bottom大于margin-top,所以取的是margin-bottom的15px。

3.1.2 当为负值时

  • margin-top 为负,当前元素会上移
  • margin-left 为负,当前元素右移
  • margin-right 为负, 后面的元素右移
  • margin-bottom 为负,后面的上移

在容器里创建5个正方形,来展示


 <style>
    .container{
      border: 2px solid #000;
      margin: 270px 50px;
      display: flex;
     flex-flow: row wrap;
    }
    .box{
      width: 100px;
      height: 100px;
    }
    .baseBorder{
      border: 2px solid #40a9ff;
    }
    .activeBorder{
      border: 2px solid #ff4d4f;
    }
   
    .margin{
      /* TODO */
    }
  </style>
  
  <div class="container">
    <div class="box baseBorder">对照组</div>
    <div class="box baseBorder">对照组</div>
    <div class="box activeBorder margin" ></div>
    <div class="box baseBorder">对照组</div>
    <div class="box baseBorder">对照组</div>
  </div>

复制代码
  • default;

image.png

  • margin-top: -104px;

image.png

  • margin-left: -114px;

image.png

  • margin-right: -114px;

image.png

  • margin-bottom: -104px;

image.png

3.2 百分比

.margin{
    margin-top: 50%;
}
复制代码

image.png

3.3 Auto

.margin{
    margin: 0 auto;
}
复制代码

image.png

分类:
前端
标签:
分类:
前端
标签: