盒子模型-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;