css盒子模型-CSDN博客

本文链接：https://blog.csdn.net/2302_79590880/article/details/138036401

前言

欢迎来到我的博客

本文是我整理的关于css的盒子模型的相关的知识点。

文章辅助阅读

我会列举最常用，最重要的部分，但是如果有特殊小众的需要，需要自己查阅css中文手册。

手册下载链接：

css2.0中文手册绿色版_css2.0中文手册下载_css2.0中文手册PC版-华军软件园

盒子概念理解

有关于布局：

拿我们当前这个页面来讲，我们可以把他拆分出来。

我们可以看到，实际上这个页面是由一块一块的小部分组成的这一整个页面。

也就是说，我们开发这个页面，实际上就是用盒子封装好各个部件，然后把他们放到这个页面上形成的。

可以这么说，我们构造页面要先构造这个螺丝（盒子），然后再把这些零件组装起来形成产品。

盒子构造

盒子模型如下：

盒子由外边距，边框，内边距，内容组成。

他们依次的属性值为：

margin,border,content,padding。

盒子边框border

border的三个属性：

属性	作用
border-color	设置颜色
border-width	设置宽度（px单位）
border-style	设置边框样式

border-style可选属性

none（无边框），solid（实线），dotted(点线)，dashed(虚线)。

因为考虑到兼容性的问题，所以我们只会用这几个边框。

以上案例演示：

代码

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #a {
            border-color: palegreen;
            border-width: 2px;
            border-style: solid;
        }

        #b {
            border-color: palevioletred;
            border-width: 1px;
            border-style: dotted;
        }

        #c {
            border-color: paleturquoise;
            border-width: 3px;
            border-style: dashed;
        }
    </style>
</head>

<body>
    <div id="a">a</div>
    <div id="b">a</div>
    <div id="c">a</div>
</body>

案例结果

简略写法

代码

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #a {
            /* border-color: palegreen;
            border-width: 2px;
            border-style: solid; */
            border: 2px palegreen solid;
        }

        #b {
            /* border-color: palevioletred;
            border-width: 1px;
            border-style: dotted; */
            border: 1px palevioletred dotted;
        }

        #c {
            /* border-color: paleturquoise;
            border-width: 3px;
            border-style: dashed; */
            border: 3px paleturquoise dashed;
        }
    </style>
</head>

<body>
    <div id="a">a</div>
    <div id="b">a</div>
    <div id="c">a</div>

表格边框合并

语法：border-collapse: collapse;

我们可能遇到下面问题：

几个相同的边框在一起。

<style>
        table,
        td,
        tr {
            border: 2px palevioletred solid;
            /* border-collapse: collapse; */
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>
    </table>
</body>

当然即使取消了外间距也会因为距离太近而使得边框变粗。这时可以用

border-collapse: collapse;

加上后就很舒服了。

大小注意点

我们使用边框的话，会让这个盒子变大的。也就是说我们加上边框就会让div比原来设定的要大。

这个注意一下就可以。

内边距padding

我们如果不设置内边距，盒子内部的内容会紧紧地贴着边框。所以我们可以设置内边距，让内容在盒子内更加自然。

属性：

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

当然这么写比较麻烦，可以用一个属性代替。

属性：

只要记住上下最重要就可以，先看上下，再管左右。

案例演示

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: palegoldenrod;
            padding: 5px 10px 5px;
        }
    </style>
</head>

<body>
    <div>
        <p>hellohelo,i am a so cool man. nice to meet you!</p>
    </div>
</body>

样式如下：

padding改变尺寸问题

可以这么理解：padding是在我们div这样的盒子的基础上，向外添加一个内边距+边框+外边距。

所以我们设置内边距的话，实际上也是给这个盒子增大了尺寸。

外边距margin

描述：用来把一个个盒子分隔开，防止盒子都贴在一起。

属性

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

简写的话跟padding的形式一模一样。

外边距设置块元素居中效果

当然文字这类的行内元素我们能直接设置居中，但是像链接这样的肯定不能用文字的那些属性进行设置了。我们要设置块元素居中通常使用margin: 0 auto;

我的博客案例：

未设置这个时：

设置了之后：

美美的。

子元素外边距塌陷问题

问题产生场景：

我们在盒子里面装子盒子，子盒子会紧紧的贴着父盒子的上面。

我们想要让子盒子往下一点设置上边距。

但是实际的效果会变成父亲盒子直接下陷。

样式：

原来样式：

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: palegoldenrod;
        }

        #zi {
            width: 50px;
            height: 50px;
            background-color: palegreen;
        }
    </style>
</head>

<body>
    <div>
        <div id="zi"></div>
    </div>
</body>

我们想要让他变成的样子：

但实际上代码加上后：

        div {
            width: 200px;
            height: 200px;
            background-color: palegoldenrod;
            /* overflow: hidden; */
        }

        #zi {
            width: 50px;
            height: 50px;
            background-color: palegreen;
            margin-top: 20px;
        }

子盒子并没有下去，反而是父盒子顶上多了个外边距。这个情况就是塌陷现象。

解决这个现象有三种方法：

1.为父元素添加透明上边框

2.父元素添加内边距

3.添加overflow: hidden;(上面代码注释起来的，解开注释就可以了)

内边距清除

我们很多标签都是自带内外边距的。比如我们的文字是不会顶着浏览器的顶部。表格的内容不是紧挨着的。这些都是自带的内外边距。

我们有时候不喜欢这些边距，我们要清除他们。

暴力清除法：

    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <ul>
        <li>123</li>
        <li>456</li>
        <li>789</li>
    </ul>
</body>