盒子模型-CSS

发布时间 2023-09-28 20:43:06作者: monstor335

/* 内边距 /
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;