博学谷 - CSS笔记09 - CSS盒子模型_边框1px红色实线css-CSDN博客

本文链接：https://blog.csdn.net/hecr_mingong/article/details/110904315

本文详细介绍了CSS中盒子模型的组成，包括边框(border)的宽度、样式和颜色设置，内边距(padding)的各个方向调整，以及外边距(margin)的运用，展示了如何通过这些属性实现元素的间距控制。同时，讲解了如何设置表格的细线边框以及外边距合并的问题，并提供了相应的解决方案。此外，还提到了清除内外边距以确保布局的一致性。

摘要由CSDN通过智能技术生成

1.盒子的组成

border 边框
content 内容
padding 内边距
margin 外边距

在这里插入图片描述

2.边框
语法:

border : border-width || border-style || border-color

属性	作用
border-width	边框粗细,单位是px
border-style	边框的样式 none没有边框 solid实线 dashed虚线 dotted点线
border-color	边框的颜色

demo:

        .c {
            height: 200px;
            width: 200px;
            /* 设置边框粗细为1px 样式是实线 颜色是红色 */
            border: 5px solid red;
        }

        .c1 {
            /* 将上边框的颜色设置成绿色 */
            border-top-color: green;
            margin: 20px;
        }

        .c2 {
            /* 将上边框改成虚线 */
            border-top-style: dashed;
            /* 将下边框改成点线 */
            border-bottom-style: dotted;
        }

    <div class="c c1"></div>
    <div class="c c2"></div>

效果:
在这里插入图片描述

3.表格的细线边框
将相邻的边框合并,语法:

border-collapse:collapse;

demo:

        table,
        th,
        td {
            /* 将边框粗细设置成1px 样式为实线 颜色为红色 */
            border: 1px solid red;
            /* 合并相邻的边框 */
            border-collapse: collapse;
        }

    <table>
        <thead>
            <th>标题1</th>
            <th>标题2</th>
            <th>标题3</th>
        </thead>
        <tbody>
            <tr>
                <td>内容1</td>
                <td>内容2</td>
                <td>内容3</td>
            </tr>
            <tr>
                <td>内容1</td>
                <td>内容2</td>
                <td>内容3</td>
            </tr>
            <tr>
                <td>内容1</td>
                <td>内容2</td>
                <td>内容3</td>
            </tr>
            <tr>
                <td>内容1</td>
                <td>内容2</td>
                <td>内容3</td>
            </tr>
            <tr>
                <td>内容1</td>
                <td>内容2</td>
                <td>内容3</td>
            </tr>
        </tbody>
    </table>

效果:
在这里插入图片描述
4.内边距

属性	作用
padding-top	上内边距
padding-right	右内边距
padding-bottom	下内边距
padding-left	左内边距

demo:

        /* 练习:利用内边距撑开盒子 */
        a {
            /* 文本装饰:没有下划线 */
            text-decoration: none;
            /* 字体颜色:黑色 */
            color: black;
        }

        ul li {
            /* 去掉li的小圆点 */
            list-style-type: none;
            /* 添加靠左浮动 */
            float: left;
            /* 1.设置上下左右的内边距都是10px */
            /* padding: 10px; */
            /* 2.设置上下的内边距是5px 左右的内边距是10px */
            /* padding: 5px 10px; */
            /* 3.设置上的内边距是5px 左右的内边距是10px 下的内边距是15px */
            /* padding: 5px 10px 15px; */
            /* 4.设置上的内边距是5px 右的内边距是10px 下的内边距是15px 左的内边距是20px*/
            padding: 5px 10px 15px 20px;
        }

    <div>
        <ul>
            <li><a href="#">a标签1</li>
            <li><a href="#">a标签2</li>
            <li><a href="#">a标签3</li>
            <li><a href="#">a标签4</li>
        </ul>
    </div>

效果:
在这里插入图片描述

5.外边距

属性	作用
margin-top	上外边距
margin-right	右外边距
margin-bottom	下外边距
margin-left	左外边距

demo:

        /* 练习:利用外边距撑开盒子 */
        a {
            text-decoration: none;
            color: #000;
        }

        ul li {
            list-style: none;
            /* 将块元素转换成行内块元素 */
            display: inline-block;
            /* 设置上右下左的外边距为px */
            margin: 10px;
        }

    <div>
        <ul>
            <li><a href="#">a标签1</a></li>
            <li><a href="#">a标签2</a></li>
            <li><a href="#">a标签3</a></li>
            <li><a href="#">a标签4</a></li>
        </ul>
    </div>

效果:
在这里插入图片描述

外边距典型应用:
外边距可以让会计盒子水平居中,但是必须满足两个条件:

盒子必须指定了宽度
盒子左右的外边距都设置为auto

demo:

        div {
            height: 200px;
            width: 200px;
            background-color: pink;
            /* 法1: 将块元素居中 */
            /* margin: 0 auto; */
            /* 法2: 将块元素居中*/
            /* margin: auto; */
            /* 法3: 将块元素居中*/
            margin-left: auto;
            margin-right: auto;
        }

    <div>居中</div>

效果:
在这里插入图片描述

6.外边距合并
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并

相邻块元素垂直外边距的合并

效果:

解决方案:
尽量只给一个盒子添加margin值
嵌套块元素垂直外边距的塌陷

效果:

解决方案:
为父元素定义上边框
```
border-top: 1px solid yellow;
```
为父元素定义上内边距
```
padding-top: 1px;
```
为父元素添加 overflow: hidden;
```
overflow: hidden;
```

7.清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距

        * {
            /* 清除内边距 */
            padding: 0;
            /* 清除外边距 */
            margin: 0;
        }

8.文章参考链接
a. https://www.boxuegu.com/
b. https://blog.csdn.net/hecr_mingong/article/details/107190128
c. https://blog.csdn.net/u014022865/article/details/54598699