（学习笔记）css---盒子模型

最新推荐文章于 2024-05-28 16:25:01 发布

weixin_57516815

最新推荐文章于 2024-05-28 16:25:01 发布

阅读量89

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_57516815/article/details/117659234

版权

1、盒子的组成：

1.1border--边框

1.1.1边框属性：

border-width
border-style :solid实线、dotted圆点虚线、dashed一般的虚线（这三种常用）
border-color

1.1.2边框复合写法：

border:1px solid red;

层叠性

div｛border:1px solid red; border-top:1px solid pink;}

最后显示的是上边框是粉色，其余的是红色。

1.1.3表格细线边框

border-collapse:collapse;意思是相邻边框合并一起。

1.1.4边框会影响盒子实际大小

div｛

width:200px;

height:200px;

border:10px solid red;

}

这个时候整个盒子的宽变成220px,高变成220px.

如果要让实际整体边+盒子都是宽高是200px，这个时候就要将width和height改成180px.

1.2padding--内边距（内容距离边框的距离）

1.2.1padding的属性和简写：

1.2.2padding影响盒子大小

原理跟border影响盒子大小是一样的。

案例：

    <style>
        .nav {
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            /* 注意line-height与height的区别 这里如果写的是height而不是line-height下面的 
            .nav a里的height不起作用，导致文字无法垂直居中*/
            line-height: 41px;
            background-color: #fcfcfc;
            font-size: 14px;
        }

        .nav a {
            color: #4c4c4c;
            text-decoration: none;
            height: 41px;
            display: inline-block;
            padding: 0 20px;
        }

        .nav a:hover {
            color: #ff8500;
            background-color: rgb(209, 205, 205);
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">新浪微博</a>
        <a href="#">新浪微博个人页</a>
        <a href="#">新浪</a>
        <a href="#">新浪微博</a>
        <a href="#">三人行
    </div>

</body>

padding不会撑开盒子的情况：

当它自己没有定义width/height时，它不会超过它的父元素盒子。如果当它自己定义了width/height那么就会超过父元素的盒子。

1.3margin---外边距（盒子之间的距离）

1.3.1一般的用法跟padding一样。

1.3.2典型用法---块级盒子水平居中

垂直居中：父元素line-height 子元素height的大小一样。

水平居中：

盒子必须有width;margin左右值：auto.

    <style>
        div {
            height: 100px;
            width: 100px;
            margin: 0 auto;
            background-color: red;
        }
    </style>
</head>

<body>
    <div></div>
</body>

以上这种水平居中的方式适用于块级元素，对行内块和行内元素不起作用。

对于内块和行内元素的水平居中，直接给它们的父元素加上：text-align：center；就可以了。

1.3.3外边距合并-嵌套块元素塌陷