Css查漏补缺02-盒模型

　　推荐一个特别棒的博主：https://home.cnblogs.com/u/Renyi-Fan，最近想利用暑假时间来查漏补缺一下大学三年的前后端知识，就选择了范老师的课程和博客，讲的特别细致，我博客里的有关查漏补缺的随笔里的部分内容均转载自范老师的博客，喜欢的同学可以移步范老师的博客或者他本人的学习网站观看课程。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style>
        .box1{
            width:300px;
            height:300px;
            background-color:blue;
            /*盒模型三元素*/
            border-style:solid;
            border-width:2px;
            border-color:black;
            /*或者*/
            border:solid 2px black;
            border:none;/*清空边框*/
        }
    </style>
</head>
<body>
<!--
不同部分的说明:
    Margin(外边距) -清除边框外的区域，外边距是透明的。
    Border(边框) -围绕在内边距和内容外的边框。
    Padding(内边距) -清除内容周围的区域，内边距是透明的。
    Content(内容) -盒子的内容，显示文本和图像。
-->
    <div class="box1">

    </div>
</body>
</html>

 

posted @ 2020-06-22 23:22  Tsui98'  阅读(137)  评论(0)  编辑  收藏  举报