重学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>

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

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

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

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>

如果把width和height设为0会发生什么？

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

#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%;
}

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>

中间没有内容的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>