Html学习之十五（盒模型）

　　Web页面中的每一个元素都是一个盒模型，CSS中使用盒模型来描述一个元素。CSS盒子模型又称框模型，它包含四个边界，分别是外边距边界(Margin)、边框边界(border)、内边距边界(padding)、内容边界(content)。

一、内容区域设定。

　　weight:　　宽度的设定

　　height:　　高度的设定

宽度和高度的设定可以是具体的数值（带单位），也可以是百分比设置。

二、内边距（padding）属性

　　padding复合属性：

　　　　padding-top 上内边距

　　　　padding-right 右内边距

　　　　padding-bottom 下内边距

　　　　padding-left 左内边距

内边距的设定：

1、盒子的内边距分为上右下左四个方向。

2、内边距的设定用来控制盒子中装载的内容到盒子边缘（边框）之间的距离。

3、盒子的内边距占据的是盒子里面的空间，最小是0，不允许出现负值。

二、外边距（margin）属性

　　margin复合属性：

　　　　margin-top 上外边距

　　　　margin-right 右外边距

　　　　margin-bottom 下外边距

　　　　margin-left 左外边距

外边距（margin）的设定：

1、盒子的外边距分为上右下左四个方向。

3、外边距的设定用来控制盒子外围四周的距离，不属于盒子本身的范畴。

3、外边距的主要用途是控制盒子的位置，所以可以出现负值。

三、边框（border）属性。

　　border复合属性：

　　　　1.边框按方向分类的拓展属性

　　　　　　border-top 上边框

　　　　　　border-right 右边框

　　　　　　border-bottom 下边框

　　　　　 border-left 左边框

　　　　2.边框按属性要素分类的拓展属性

　　　　　　border-width:　　边框宽度

　　　　　　border-style:　　边框样式

　　　　　　border-color:　　边框色彩

边框（border）的设定：

1、大部分元素对象在默认情况下是没有边框的。

2、要设定边框，必须同时设定三个要素：宽度、样式、色彩。

四、盒子的宽与高。

　　盒子的宽度=内容宽度+右左内边距+左右边框

　　盒子的高度=内容高度+上下内边距+上下边框

　　盒子占位宽度=盒子的宽度+左右外边距

　　盒子占位高度=盒子的高度+上下外边距

五、方向性复合属性值的缩写方法

　　具有方向性的复合属性可以在一个声明中设置所有方向的定义，该方向可以具有1-4个值。

　　　　1个值：　　四个方向

　　　　2个值：　　上下/右左

　　　　3个值：　　上/左右/下

　　　　4个值：　　上/右/下/左

六、实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子模型之边框</title>
        <style>
            .box1{
                height: 200px;
                width: 400px;
                border: 20px red solid;         /*border 盒子边框*/
                padding: 30px;
            }
            .box2{
                height: 198px;
                width: 398px;
                border: 1px rosybrown solid;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2"></div>
        </div>
    </body>
</html>

结果：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子模型应用</title>
        <style type="text/css">
            .box1{
                height: 300px;
                width: 647px;
                border: 25px solid;
                border-color: darkred black black darkred; 
                padding: 20px 40px;
                background-color: antiquewhite;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <div>
                <img src="../img/15-4.jpg"/>
            </div>
        </div>
    </body>
</html>

结果：

Html学习之十五（盒模型）

猜你喜欢