CSS从入门到精通——盒模型

Flec-hazo

于 2024-06-14 00:41:59 发布

阅读量833

点赞数 30

文章标签： css 前端 html 学习

本文链接：https://blog.csdn.net/m0_73614626/article/details/139667288

版权

透视盒模型：居中的的盒子页面

任务描述

本关任务：在本关中，我们将学习如何使用CSS中重要的基础之一盒模型。本关任务完成之后的效果图(index.html)如下：

基础实例

在本关中，我们使用如下HTML实例，进行讲解：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <link rel="stylesheet" href="./CSS/style.css">
</head>
<body>
    <h1>盒模型</h1>
    <div id="box1">盒子一宽度为200px，内间距为25px，外间距为20px、边框为25px。</div>
</body>
</html>

其中style.css文件初始内容为：

* {
    margin: 0;
    padding: 0;
}
#box1 {
    background-color: whitesmoke;
}

显示效果如下：

内容区域 (Content Area)

内容区域包含盒子的内容，显示文本和图像。一般使用width和height指定大小。

例如，指定box元素内容宽度：

#box1 {
    background-color: whitesmoke;
    width: 200px;
}

显示效果如下：

内边距(Padding)

内边距(Padding) 是指内容周围的区域，内边距默认是透明的。如果内容区域设置了背景、颜色或者图片，这些样式将同样延伸应用到内边距上。

可以使用padding-top, padding-right, padding-bottom, padding-left，分别指定内容区域的上边、右边、下边和左边的内边距。

例如，指定box元素内边距：

#box1 {
    background-color: whitesmoke;
    width: 200px;
    padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 15px;
    padding-left: 10px;
}

显示效果如下：

为书写简洁，也可以使用padding简写内边距。内边距简写时指定的顺序为顺时针。如果四个边边距相同，只需要指定一个值。

例如，上面的例子可以简写为：

#box1 {
    background-color: whitesmoke;
    width: 200px;
    padding: 20px 10px 15px 10px;
}

其中 20px 10px 15px 10px 依据顺时针方向，分别对应为上、右、下和左内边距。

边框(Border)

边框(Border)是围绕在内边距和内容外的边框。使用border属性指定样式。其指定方式与我们在上一节表格样式中讲解相同，所以在此不再赘述。

例如，指定box元素边框：

#box1 {
    background-color: whitesmoke;
    width: 200px;
    padding: 20px 10px 15px 10px;
    border: 25px dotted yellowgreen;
}

显示效果如下：

外边距(Margin)

外边距(Margin) 是指边框外的区域，外边距默认也是透明的。

可以使用 margin-top, margin-right, margin-bottom, margin-left分别指定外边距区域的上边、右边、下边和左边的内边距。同样的，属性顺序为顺时针。

例如，指定box元素外边距：

#box1 {
    background-color: whitesmoke;
    width: 200px;
    padding: 20px 10px 15px 10px;
    border: 25px dotted yellowgreen;
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
}

显示效果如下：

同样的，也可以使用简写属性 margin。同内边距一样，外边距简写时指定的顺序为顺时针。如果四个边边距相同，只需要指定一个值。

例如，上面的例子可以简写为：

#box1 {
    background-color: whitesmoke;
    width: 200px;
    padding: 20px 10px 15px 10px;
    border: 25px dotted yellowgreen;
    margin: 20px;    /*外边框四个边同时设置为20px*/
}

任务要求

学会了基本表格样式修改，现在让我们来实践一下吧。请在右侧的编辑框中修改style.css文件，完成index.html中元素样式。要求如下：

设置box2元素，宽度为350px；
使用简写内边距的方式设置box2的内边距为25px;
设置box2元素边框为20px粗的黄绿色yellowgreen实线(注：直接使用单词指定颜色)；
设置box2元素的外边距的下边距为10px；
使用简写内边距的方式设置body元素的内边距为20px。

* {
    margin: 0;
    padding: 0;
}

body {
    /* ********** BEGIN ***********/
    padding:20px;
    /* ********** END *************/
    border: 10px solid lightsalmon;
}

h1 {
    text-align: center;
}

#box2 {
    /* ********** BEGIN ***********/
    width:350px;
    padding:25px;
    border:20px solid yellowgreen;
    margin-bottom:10px;
    /* ********** END *************/
}

确定盒模型元素大小

任务要求

修改bix-sizing中width和height属性，使得box-sizing类的元素内容大小与content-sizing的内容大小相同。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒模型——确定元素大小</title>
    <style type="text/css">
        .content-box { 
            width: 160px;
            height: 80px;
            padding: 20px;
            border: 8px solid red;
            background: yellow;
            box-sizing: content-box; 
             /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
             Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
             Content box width: 160px
             Content box height: 80px */
        }
        .border-box { 
            /***************** BEGIN *****************/
            width: 216px;
            height: 136px;
            padding: 20px;
            border: 8px solid red;
            background: yellow;
            box-sizing: content-box; 
            /***************** END *****************/
            padding: 20px;
            border: 8px solid red;
            background: yellow;
             box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="content-box">Content box</div>
    <br>
    <div class="border-box">Border box</div>
</body>
</html>