极客学院----H5的相关笔记----css基础（三）_极客学院的css3笔记-CSDN博客

本文链接：https://blog.csdn.net/wypgany/article/details/59663838

一.css盒子模型---概述

盒子模型的内容范围包括：margin、border、padding、content部分组成。

二.css盒子模型---内边距

1.内边距处于内容外，边框内

2.内边距的属性：padding、padding-top...等四个

三.css盒子模型---边框

1.边框处于内边距外，外边距内

2.边框的样式：border-style:定义了10个不同的非继承样式，包括none

3.单边框的样式：border-top-style...等四个

4.边框的宽度：border-width

5.单边框的宽度：border-top-width...等四个

6.边框的颜色：border-color

7.单边框的颜色：border-top-color...等四个

以下是css3提供的边框：

8.圆角边框：border-radius

9.边框阴影：box-shadow

10.边框图片：border-image

四.css盒子模型---外边距

1.围绕在边框之外的就是外边距，默认为透明区域，接受任何长度单位、百分数值

2.外边距常用属性：

margin:设置所有边距

margin-top等四个：设置上下左右的边距

以上盒子模型的例子：

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css盒子模型</title>
    <link href="box.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
    <div id="bd">
        <div id="pd">
            <div id="content">我是内容区域</div>
        </div>
    </div>
</div>
</body>
</html>

css:

body{
    /* 不设置的话，最外边会有一定的距离 */
    margin: 0px;
}
#container{
    margin: 100px;
}
#bd{
    border-style: dotted;
}
#pd{
    padding: 10px;
}
#content{
    background-color: olivedrab;
    text-align: center;
    padding: 30px;
}

五.css盒子模型---外边距合并

1.两个盒子的外边距都是100px的情况下，则他们之间的边距就是100px

2.如果两个盒子的外边距不同，则按照大的边距来算

※(1)统一设置外边距和内边距，用通配符*，eg.*{margin:0px; padding: 0px;}

(2)margin:20px auto;是指上下20px,左右自适应