自学前端-盒子相关属性（嵌套块级元素塌陷、设置阴影、清除浮动）

1.面对嵌套块级元素塌陷的问题，例如div1在里面有一个div2，给div2设置一个外边距100px，使父盒子不动。而子盒子往下移动100像素；而实际效果却是，子盒子还是贴在父盒子边缘，大盒子整体往下移动了100px，这就是元素塌陷（子盒子添加margin属性会出现的问题），可以给父元素添加一个透明边框，或者父元素定义内边距， 可以使用第三种，给父元素添加overflow：hidden（推荐） 

2.清除内外边距，使用通配符清除内外边距。*{}

3.添加盒子阴影box-shadow ,依次代表：水平参数、垂直参数、模糊距离、阴影尺寸，影子颜色,内外阴影（改为内阴影属性值insert）

4.合并相邻的边框，可以使边框变淡  border-collapse: collapse;

/* 这是css第一行固定代码，使用通配符清除内外边距 */
* {
  margin: 0;
  padding: 0;
}
/* 行内元素尽量只设置左右内外边距，上下不设。一定要设置就转换为块级元素 */
.box2 {
  height: 40px;
  background-color: #00ffff;
  border-top: 3px solid #ff7f00;
  border-bottom: 2px solid #ffbd4c;
  /* 外边距：垂直外边距合并，尽量只设置一个margin。
  面对嵌套块级元素塌陷的问题（子盒子添加margin属性会出现的问题），可以给父元素添加一个透明边框，
  或者父元素定义内边距，
  可以使用第三种，添加overflow：hidden（推荐） */
  /* 控制外边距 */
  margin-bottom: 10px;
  /*可以使行内元素行内块元素居中： text-align: center;*/
  text-align: center;
  font-size: 0px;
}
.box2 a {
  font-size: 18px;
  color: #000;
  text-decoration: none;
  /* 在使用inline-block时候，行内块之间会产生一个4px的间隙，
  这是HTML结构的问题，可以使用父元素字号为0的方法来清除 */
  display: inline-block;
  height: 40px;
  padding: 0px 20px;
  background-color: #fff;
}
.box2 a:hover {
  color: #ff7f00;
  background-color: #0000ff;
}

.box1 {
  width: 500px;
  height: 500px;

  /* 设置圆角矩形，可以设置不同的圆角，border-radius:1px 2px 3px 4px;分别为左上，右上，右下，左下
  当为两个数值时则为对角，也可以分开定义border-top-left-radius, */
  /* 添加盒子阴影text-shadow ,依次代表：水平参数、垂直参数、模糊距离、影子颜色, */
  text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);

  border-radius: 50%;
  /* 添加盒子阴影box-shadow ,依次代表：水平参数、垂直参数、模糊距离、阴影尺寸，影子颜色,内外阴影（改为内阴影属性值insert）*/
  box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.3);

  /* 设置盒子的居中效果，前提是盒子设置了宽度，对于行内块元素无效 */
  margin: 0 auto;
  background-color: #ffbd4c;
  /* 内边距padding和边框border都会影响盒子的实际大小，制作导航栏盒子的时候可以不设置盒子的宽度，直接设置内边距，
  这样可以使盒子宽度随文字数量变化而变化 */
  /* padding:一个值代表四个边；两个值代表（5/10）（上下边/左右边）；三个值（5/10/15）（上/左右/下）。
  四个值（5/10/15/20）（上/右/下/左） */

  /* 定义边框的粗细 */
  /* border-width: 5px; */
  /* 定义边框颜色background-color: ; */
  /* border-color: #000000; */
  /* 定义边框线为实线solid;定义边框线为虚线dashed；定义点状 dotted*/
  /* border-style: dotted; */
  /* 推荐复合写法：border:5px dotted #ff0000 没有顺序要求*/
  /* border: 5px dotted #ff0000; */
  /* 就近原则，下面会将上面覆盖 */
  border: 5px solid #0000ff;
  border-top: 5px solid #ff0000;
  /* 边框分别定义 */
  /* border-top: ;border-bottom: ;border-right: ;border-left: ; */
  padding: 50px;
}

.table1 {
  width: 200px;
  height: 200px;
  background-color: #ff7f00;
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
}
.table1,
td {
  border: 2px solid #8b00ff;
  /* 合并相邻的边框，可以使边框变淡 */
  border-collapse: collapse;
}

5.清除浮动

清除浮动，由于在标准流的父盒子很多情况下不会给高度，

子盒子浮动不占有位置，将会影响后面的排版。

所以才需要清除浮动。在清除浮动可以使用overflow：hidden/auto/scroll