盒子模型-CSS

/* 内边距 /
padding: 20px;
/ 边框 /
border: 20px solid black;
/ 外边距 */
margin: 50px;

/* 实线 /
/ border: 10px solid #000; /
/ 虚线 /
/ border: 10px dashed #000; /
/ 点线 */

        border: 10px dotted #000;

        /* 上下左右 */
        border-top: 10px solid #000;
        border-right: 10px solid gray;
        border-left: 12px dotted saddlebrown;
        border-bottom: 15px dashed burlywood;
  width: 200px;
  height: 200px;
  background-color: pink;
  /* 四值：上右下左，顺时针 */
  /* padding: 20px 30px 40px 70px; */
  /* 三值：上 左右 下 */
  /* padding: 10px 40px 80px; */

  /* 两值：上下 左右 */
  padding: 10px 30px;

/* 总之顺时针，没有的话看对面 */

版心居中
width: 1000px;
height: 200px;
background-color: pink;

  /* 外边距不会撑大盒子尺寸 */
  /* margin: 50px 40px; */

  /* margin: 50px; */

  margin: 0 auto;

清除默认样式
*{
margin: 0;
padding: 0;

    box-sizing: border-box;

}
/* 去掉列表的项目符号 */
li{
    list-style: none;
}

元素溢出
width: 200px;
height: 200px;
background-color: pink;
/* 隐藏 /
/ overflow: hidden; /
/ 滚动 /
/ overflow: scroll; /
/ 自动 */
overflow: auto;