边距学习

90 阅读1分钟

边距的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    *{margin: 0;padding:0 ;}
/*     /* div{width: 300px; */
    /*     height: 300px; */
    /*     border-top-width: 2 */
    /*     background-color: a */
    /*     border-top-color: b */
    /*     border-top: solid; */
 */
    
    div
    /*div不设置宽和高,默认浏览器的宽高  */
    [class="1"]{width: 200px;
        height: 200px;
        background-color: blue;
border-top: 20px;
border-top-width: 90px;
border-top-style: solid;
border-top-color: cornsilk;

border-right-width: 90px;
border-right-style: solid;
border-right-color: crimson;

border-bottom-width: 90px;
border-bottom-style: solid;
border-bottom-color: yellow;

border-left-width: 90px;
border-left-style: solid;
border-left-color: transparent
/* transparent透明色 */
/* border-top-style上边框样式 */
/* border-rigth-style右边框样式 */
/*  border-bottom-style下边框样式*/
/* border-left-style左边框样式 */
/* border-style设置四个边框样式,复合属性 */
/* border-color复合属性 */
/* border-top 也是一个复合性设置,上边线大小 颜色 样式*/
/*none无边眶 */
/* solid实线边框id */
/* dashed虚线边框 */
/* double双线边框 */
/*hidde与none相同,应用于表解决边框冲突  */
/*  像素px,百分比%(因为盒子本身宽度是0,所以百分比不起作用)
/*  */
/*  */
border:100px;solid实线 transparent
    }
</style>
</head>
<body>
   <div class="1">
      13
   </div> 
</body>
</html>