CSS-5：盒子模型

坚持就完事了2025-11-19 15:31

一.网页布局

网页布局的本质：每个网页都由许许多多的盒子组成

网页布局的过程：

先准备好相关的网页元素，网页元素基本都是盒子Box
利用CSS设置好盒子样式，然后摆放到相应位置（要用到浮动和定位，后面的学习内容）
往盒子里装内容（文字，图片等）

第1步和第3步比较简单，比较难的是第2步

所以网页布局的核心就是利用CSS来摆放位置

二.盒子模型的组成部分

所谓盒子模型，就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的盒子

CSS盒子模型本质上是一个盒子，封装HTML周围的元素，它包括边框、外边距、内边距以及实际内容

1.盒子模型的组成

border：盒子的边框

content：盒子里面装的内容

padding：内边距，用于控制边框和内容的距离

margin：外边距，用于控制一个盒子和另外一个盒子之间的距离

2.边框border

border可以设置元素的边框

border的属性：

border-width：设置边框的宽度（边框的粗细），单位px
border-style：设置边框的样式，值为solid表示实线，值为dashed样式为虚线（dashed有虚线的意思，还有猛冲的意思），值为dotted样式为点线边框。其他属性可以自查
border-color：设置边框的颜色

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型之边框</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            border-width: 5px;
            border-style: solid;
        }
    </style>
</head>

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

</html>

效果：

若改为：

html 复制代码

border-style:dashed;

则效果为：

3.边框的复合写法

html 复制代码

border: 边框粗细 边框样式 边框颜色

注：参数之间没有顺序

4.边框可以分开来写，可以设置不同位置边框的属性

html 复制代码

border-top:xxx属性值;
border-bottom:xxx属性值;
border-left:xxx属性值;  /*左边框*/
border-right:xxx属性值;