盒子模型（框模型） 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>盒子模型</title>
        <style type="text/css">
            .box{
                width: 100px;
                height: 100px;
                /*            
                            边框，是盒子的边界，出了边框就是盒子外部的
                            边框相关的三个样式
                                border-color边框的颜色
                                border-style边框的样式
                                border-width边框的宽度
                            
                            边框会影响到盒子的可见框大小
                */
            
                /*            border-width表示边框的宽度
                                可以通过该属性分别指定边框四个方向的宽度
                                border-width: 10px 20px 30px 40px;
                                    如果我们指定了四个宽度，则会分别设置上右下左四个方向的边框的宽度
                                 border-width: 10px 20px 30px;
                                    三个值：上 左右 下
                                border-width: 10px 20px;
                                    两个值：上下 左右
                                border-width: 10px;
                                    一个值：上下左右
                            
                */
                border-width: 3px;
                /* border-color的规则和border-width一样*/
                border-color: red;
                /*            
                            border-style指定边框的样式
                                solid实线
                                dotted点状虚线
                                dashed虚线
                                double双线
                */
                border-style: solid;
            }
        </style>
    </head>
    <body>
        <!-- 
            盒子模型（框模型box model）
                浏览器在渲染页面时，它会将页面中的每一个元素都想象成一个矩形的盒子
                每一个盒子从内到外都有以下几个部分组成
                    内容区（content）
                        内容区决定了这个盒子能装多少东西（子元素）
                    内边距（padding）
                        内容区和边框之间的距离
                    边框（border）
                        盒子边框
                    外边距（margin）
                        盒子距离其他盒子的距离
         -->
         <div class="box"></div>
    </body>
</html>

 

posted @ 2022-05-08 22:32  氯丙嗪  阅读(27)  评论(0)    收藏  举报