css盒子模型详解

&lt;body&gt;
    &lt;h1 style="padding: 10px;border: 5px solid blue; width: 10%;margin: 50px;background-color: aqua;"&gt;标题1&lt;/h1&gt;
    <h1 style="padding: 10px;border: 5px solid blue; width: 10%;margin: 50px;background-color: aqua;">标题2</h1>
</body>

网页显示如下：

二，盒子模型内容 context部分详解

1，内容 context部分的大小 如何确定？

通常由内容大小自动确定，也是默认的方法。例如<img>标签引入一张图像，那么图像盒子的内容 context部分的大小就是图片的像素大小。

2，如何 手动修改内容 context的大小？

使用 css属性width和height来确定长度和高度。假如不设置 width，一些块级元素会自动占一行，也就是100%的屏幕宽度。行内元素不受width和height属性的影响，只受元素内容的影响，由元素内容将内容部分的矩形撑开。width和height属性的单位有：px和%，px指的是像素，%指的是占html 整体容器的宽度的百分比。

示意图如下：

三，盒子模型内边距padding部分详解

1，什么是内边距p add ing？

元素内容距离盒子边框的距离就是内边距，他并不是上下左右的大小相等。css盒模型在元素基础上多了border和margin属性，目的是便于布局，让网页好看。p add ing属性是一个整体概念，统管上下左右四个方向，细致地分还有：p add ing-top，p add ing-left等，使用-隔开而不是下划线 _隔开。单位是：p x(使用频率最高)和%占比。

2，p a dd ing单边属性

如下图：

3，p a dd ing简写属性

4，p a dd ing注意事项

p a dd ing会撑大容器，也就是盒子。

四，盒子模型边框 border部分详解

1，边框 border 样式

    <p style="border-style: dotted;">么么哒</p>

网页显示如下：

2，边框border宽度

使用border–width 设置，单位是px。

<p style="border-width: 5px;">么么哒</p>

3，边框border 颜色

使用bo r de r–color 设置，需要在bo r de r–style 设置后才能生效，否则为空白。

4，边框bor de r单独各边属性

5，边框border属性简写

1，在border属性里面写，按顺序写且用空格隔开(最常用)

2，在border-style 里面写，按照属性个数决定影响到的方向(基本不用)

6，边框border的巧用

利用bord er属性实现下面网页部分。

<p style="border-left: 5px blue solid;padding-left: 10px;">国内图片</p>

7，border圆角 效果

使用属性border-radius 实现。

五，盒子模型外边距margin部分详解

1，m ar gin的作用

m ar gin的作用就是是盒子之间的保持间隙，让网页更加美观。m ar gin也是css属性，统管上下左右四个方法。但是还可以细致地分为 m ar gin-top等。m ar gin的取值有：auto，像素px，占比%。例如：m ar gin：0 auto 表示上下距离为0，左右距离自动选择(居中，将剩余部分平分)。

2，m ar gin各边属性

3，m argin简写属性

4，m argin需要注意的问题

主要是外边距合并问题，即垂直方向外边距相撞时，取较大值。也就是盒子上下放的时候，上面盒子的margin为100px，下面盒子的margin为50px，那么两个盒子之间的margin取100px。水平方向并没有这个问题存在。

5，使用margin属性实现下面的实例

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div-out {
            width: 1240px;
            background-color: crimson;
            margin: 0 auto;
        }
        
        .div-out>div {
            width: 303px;
            height: 375px;
            background-color: red;
            float: left;
            /*实现垂直方法布局转换为水平方向布局*/
            margin-top: 10px;
            margin-right: 9px;
        }
        
        .div-out>div:nth-child(4n)
        /* 当元素为4的倍数时生效样式*/
        
        {
            margin-right: 0;
        }
    </style>
</head>

<body>
    <div class="div-out">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>