盒模型（div标签的组成）

div标签（一个干净的矩形）由四个部分组成：内容区（content），内边距（padding）,

边框（bording）,外边距（margin）.[由内到外组成]

内容区：content

div 标签写出来的时候是没有高度的，但是有宽度，宽度默认和父标签的宽度是一样的。

如果直接在body 标签里写一个 div 标签，那么 div 的父标签就是 body 标签。

这里所说的宽度不是肉眼看到的宽度，而是 width 属性设置的宽度

width/height

矩形的宽高对应CSS的两个属性width,height,值为数值，单位为px.

div的默认不填充颜色。

如果要给矩形添加背景颜色,可以使用CSS属性background-color(背景颜色)跟字体颜色相同，有

十六进制，rgb,rgba,英文单词形式的颜色。

百分百尺寸

设置块元素的宽高，除了 px 形式，还有 %形式。

<div class="father">
  <div class="son"></div>
</div>

.father {
  width: 200px;
  height: 80px;
  background-color: #5b6dcd;
}
.son {
  width: 60%;
  height: 20%;
  background-color: #fec03e;
}

注意:这里的 % 是相对于父元素的，也就是说，子元素的宽度是父元素的 60%( 200px*6%=120px )，子元素的高度的 20%（80px*20%=16px)，所以首先要确定父元素的尺寸是存在的.

内边距：padding

注意: padding 区域是包含在背景颜色区域内的，也就是说背景颜色包含了 padding 和 content

padding分开写

padding默认是给矩形四周添加相同的内边距，但是我们在实际应用当中会有四周内边距不同的情况，因此我们就要分别给矩形设置内边距，没有设置的内边距默认为0。

.box {
    padding: 20px;
}

等价于

.box {
    padding-top: 20px; /*上内边距*/
    padding-right: 20px; /*右内边距*/
    padding-bottom: 20px; /*下内边距*/
    padding-left: 20px; /*左内边距*/
}

 padding分为top,right,bottom,left即上下左右。

div{
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 30px;
}

简写可以为 

div{
    padding: 20px 30px 20px 10px;
}

且 

上下一样，左右一样

div{
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
}

可以表示为 

div{
    padding: 20px 30px;
}

但是前后顺序不可以改变，前为上下，后为左右 

但是如果

上下不一样，左右一样

div{
    padding-top: 30px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
}

div{
    padding: 30px 10px 20px;
}

其中30px表示上，100px表示右，20px表示下。 

即按照上右下左的顺序填写。

box-sizing

规定了如何计算一个元素的总宽度和高度，它有两个值 content-box ，border-box。

默认是content-box.

content-box尺寸计算

width = 内容的宽度
height = 内容的高度

border-box尺寸计算公式

width = border + padding + 内容的宽度
height = border + padding + 内容的高度

 box-sizing: border-box;

保证了border不会溢出父元素属性。 

边框：border

边框就是包裹在 padding 外面的一层线。

.box {
  /* 设置矩形大小 */
  width: 200px;
  height: 30px;
  /* 设置边框线 */
  border-width: 2px;
  border-color: grey;
  border-style: solid;
}

border-width：边框的粗细，单位是px

border-color :边框的颜色，颜色的表示方法与前面一致。

border-style :边框的线型，solid 为实线dashed 为虚线。

边框的简写

.box {
  border: 2px solid blue;
}

分别设置边框

.box {
  /* 添加顶部border */
  border-top: 1px solid black;
  /*添加右侧border*/
  border-right: 3px solid orange;
  /*添加底部border*/
  border-bottom: 5px dashed pink;
  /*添加左侧border*/
  border-left: 10px dashed purple;
}

 利用层叠性设置边框

.box {
  /*设置矩形的宽*/
  width: 300px;
  /*设置矩形的高*/
  height: 300px;
  /*设置矩形的背景颜色*/
  background-color: white;
  /*设置矩形的边框*/
  /*统一设置矩形的所有边框样式*/
  border: 2px solid black;
  /*重新设置一个下边框的样式来层叠掉统一设置的边框的样式*/
  border-bottom: 5px solid orange;
}

无边框

.box {
  border-bottom: none;
}

圆角

.box {
  border-radius: 12px;
}

圆角的分开设置

 左上角，右上角，右下角左下角

.box {
  width: 200px;
  height: 200px;
  background-color: violet;
  border-top-left-radius: 5px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 15px;
}

阴影 

.box {
  width: 200px;
  height: 200px;
  border: 1px solid #c4c4c4;
  /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
}

外边距：margin

外边距尤是矩形和矩形之间的距离.

同样的外边距分为上下左右

margin-top;

margin-right;;

margin-bottom;

margin-left;

水平距离

如果仅设置了一个区域的外边距，另一个未设置，则未设置的外边距默认为0px.

垂直距离

 如果有两个盒子，首先，只给其中一个盒子设置margin-bottom,两个盒子之间的垂直距离就是第一个盒子的margin-bottom; 然后，给第二个盒子设置一个margin-top，但是值小于第一个盒子的margin-bottom的值，得到两个盒子之间的垂直距离，是取两个margin的最大值;最后，将下方盒子的margin-top设置为50px，大于第一个盒子的margin-bottom，两盒子之间的垂直距离变成了50px。

盒子左右居中

margin还有一个作用就是使盒子可以在父盒子中左右居中，但是有一个前提，就是必须有宽度。

显示（display）

display:block;

1.块元素性质—独占一行。

例如：h  div等标签就是一个块级状元素。

而span行内元素则不会独占一行。

2.块元素性质二—可以设置宽，高

但行内元素无法设置宽，高，即使设置了宽，高也无法生效。

行内元素转化为块元素

<span class="demo"> 这是一个span标签 </span>

.demo {
  /*将span标签转换成块元素*/
  display: block;
  width: 300px;
  height: 100px;
  background-color: #fff2cc;
}

块元素转化为内元素

<div class="demo">这是一个span标签</div>

.demo {
  /*将div标签转换成行内元素*/
  display: inline;
  /* 转换成行内元素以后，宽、高的设置就会失效，即使我们仍然设置了它们 */
  width: 300px;
  height: 100px;
  /* 背景颜色也不会是300*100范围，而是文字有多少面积，背景颜色就又多少面积 */
  background-color: #fff2cc;
}

dispaly:none

none 就是无的意思，也就是说，当给标签设置了这个属性值，标签就会消失，在网页布局中最常用的就是用 none 、block 来控制元素的显示和隐藏。

详细探索display:inline/inline-block

inline

1.行内元素不能设置宽和高

2.行内元素可以设置padding

3.行内元素可以设置左右margin但不能设置上下margin

inline-block

从名字可以看出，inline-block 既具有 block 的性质，还具有inline 的性质，可以简单的理解为， inline-block 就是一个可以在同一行显示的块元素。

inline-block中的空白折叠

在html中回车会被当做一个文字，所以有时会产生空白。

1.去除回车

<!-- 将div标签写在一行 -->
<div class="box1"></div><div class="box2"></div>

2.给父元素添加word-spacing属性

word-spacing 就是单词和单词之间的距离，这里将这个距离写成负值就可以了，这个值要尽量小，我们一般写小于-20px 的值。

<div class="father">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

.father {
  word-spacing: -50px;
}

.box1 {
  width: 200px;
  height: 50px;
  display: inline-block;
  background-color: #fff2cc;
}

.box2 {
  width: 200px;
  height: 50px;
  display: inline-block;
  background-color: #b0e3e6;
}

3. 给父元素设置 font-size: 0px;

从第二点我们了解到，回车可以当作是一个文字，那么如果将文字大小设置为 0，空隙自然就会消失。

具体做法如下：

<div class="father">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

.father {
  font-size: 0px;
}

.box1 {
  width: 200px;
  height: 50px;
  display: inline-block;
  background-color: #fff2cc;
}

.box2 {
  width: 200px;
  height: 50px;
  display: inline-block;
  background-color: #b0e3e6;
}