CSS盒子模型的简介

一、概念

什么是盒子？现实中为了方便美观经常使用到一些盒子，如快递、生日礼物等。这些盒子通常使用一个简单地外壳包装。然而在CSS中的盒子比现实中的更为细致、严谨。

CSS中的盒子，和现实中作用大致是相同的，就是对元素进行包装，方便页面设计和布局。

二、CSS盒子的组成

那么它是由哪些部分组成？在css中我们将盒子由内到外依次分为：内容（Content）、内边距（Padding）、边框（Border）和外边距（Margin）组成。如图：

内容（Content）:盒子内的元素所占用的空间

内边距（Padding）：内容距离边框的距离，就如快递盒中塞的泡沫。

边框（Border）：盒子边框，如现实中的盒子外壳。

外边距（Margin）：盒子边框距离外界的距离。如两个盒子间的距离。

例    1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型示例</title>
    <style>
        .box01{
            float: left;
            height: 100px;
            width: 100px;
            background-color: pink;
            padding: 20px;
            border: 20px solid black;
            margin-right: 20px;
        }
        .content{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
        .box02{
            float: left;
            width: 180px;
            height: 180px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box01">
        <div class="content">内容区域</div>
    </div>
    <div class="box02"></div>
</body>
</html>

 

页面效果：

 

二、盒子属性

内边距    padding（如例1页面效果box01红色部分）

       语法格式;

　　　　1、 单方向设置

　　　　　　padding-top:  ;             顶部填充

                     padding-right: ;           右边填充

                     padding-bottom: ;       下边填充

                     padding-left: ;              左边填充

　　　　2、 复式设置

　　　　　　padding: ;                            最多添加四个值，使用空格隔开。

　　　　　　如：

        　　　　　　padding:40px;                            表示内边距四个面的值

        　　　　　　padding:40px 20px;                    表示内边距上下 左右的值

        　　　　　　padding:40px 20px 10px;            表示内边距上 左右 下的值

        　　　　　　padding:40px 20px 10px 5px;     表示内边距上 右 下 左的值

              注意事项：内边距占用盒子空间，设置内边距需要减去盒子宽高

   边框       border（如例1页面效果box01黑色部分）

              语法格式

                     1、border:1px solid red;      复式写法，元素四面加边框

　　　　　　　　值对象：边框宽度、边框样式、边框颜色

                     2.、broder-width:1px;  单独设置边框宽度

                            border-style:solid;    单独设置边框样式

　　　　　　　　　　属性值：solid（实线）dashed（虚线）dotted（点状线）double（双线）none（没有）

                       　  border-color:red;      单独设置边框颜色

　　　　　　3、 给单一方向设置边框

　　　　　　　　border-top            添加上边框

　　　　　　　　border-right         添加右边框

　　　　　　　　border-bottom     添加下边框

　　　　　　　　border-left            添加左边框

                     4.border的其他设置方法

                            border-width\border-style\border-color

                            这三个属性能单独拿出进行设置

                            这三个属性每个最多能接受四个属性值

                         Eg：

                            1个属性值            四周

                            2个属性值            上下       左右

                            3个属性值            上    左右       下

                            4个属性值            上    右    下    左（顺时针）

外边距 margin

       特点：

        1: margin长在元素之外的。

        2: margin控制的是 同级元素 之间的位置关系。

        3: margin不会对盒子本身的宽高造成影响。

        4: 给单一方向添加margin值：margin-left/right/bottom/top:; 

        margin的设置方法：

            margin:1个值      四周

            margin:2个值      上下   左右

            margin:3个值      上     左右    下

            margin:4个值      上右下左（顺时针）

 　　注意事项：

         1、margin可以设置负值。

         2、margin常出现的BUG:

            a：当父元素和第一个子元素都没有设置浮动的情况下，如果给第一个子元素添加margin-top  会错误的把margin-top加在父元素上面。

            b: 上下相邻两个元素之间的margin值，不会叠加，按照最大值去设置。

       margin:0 auto;  让当前元素在父元素里面左右居中。

 　　　　　　　　　　　　　　　　　　　　　　　　

 

 

 

             

posted @ 2020-03-30 12:26  zonse  阅读(224)  评论(0)    收藏  举报