HTML+CSS培训教案（十二）

最新推荐文章于 2021-06-29 03:29:48 发布

原创最新推荐文章于 2021-06-29 03:29:48 发布 · 303 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #CSS #教程

HTML/CSS 同时被 2 个专栏收录

17 篇文章

订阅专栏

HTML+CSS培训教案

16 篇文章

订阅专栏

本文深入讲解CSS盒子模型，包括内边距(padding)、边框(border)、外边距(margin)的概念与应用。通过实例代码展示如何设置这些属性，以及它们在网页布局中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

二十七、盒子

代码

<html>
    <head>
        <meta content="text/html;charset=utf-8">
        <title>盒子</title>
        <style>
        div{background:#CCC;border-color:#00F;}
        </style>
    </head>
    <body>
        <div>这是一个盒子</div>
    </body>
<html>

扩展

给div添加CSS样式：padding:20px;border-width:4px;margin:15px;border-color:#00F;border-style:solid;

答案：(1)padding：内边距，负责内容-边框的距离

(2)border：边框，负责边框的粗细

(3)margin：外边距，负责边框-盒子外缘的距离

(4)border-style：边框样式，值：solid（默认值）/dashed/dotted/double

二十八、边框

代码

<html>
    <head>
        <meta content="text/html;charset=utf-8">
        <title>盒子</title>
        <style>
        div{background:#CCC;border-color:#00F;border:4xp #0000FF solid;}
        </style>
    </head>
    <body>
        <div>这是一个盒子</div>
    </body>
<html>

知识点

border为简写形式：-width、-color、-style可调换

扩展

给div添加CSS样式：border-left:1px orange dashed

答案：(1)可使用-<方位>设置单独边框属性，且优先级更高

(2)方位：top right bottom left
（在扩展1基础上）给div添加CSS样式：border-left-color:red

答案：可使用border-<方位>-<属性>设置单独边框的单独属性
（在扩展2基础上）给div添加CSS样式：border-width，值先后试试“4px 8px”、“4px 8px 12px”、“4px 8px 12px 16px”

答案：border-width可传入1到4个值，分别代表

1：全部

2：上下    左右

3：上    左右    下

4：上    右    下    左

二十九、内/外边距

代码

<html>
    <head>
        <meta content="text/html;charset=utf-8">
        <title>盒子</title>
        <style>
        div{background:#CCC;border-color:#00F;padding:4px 8px;margin:8px 4px;}
        </style>
    </head>
    <body>
        <div>这是一个盒子</div>
    </body>
<html>