css盒子模型（十二课）

五寸执念*

已于 2024-10-10 23:03:37 修改

阅读量358

点赞数 21

分类专栏：前端文章标签： css 前端 html

于 2024-10-10 23:02:40 首次发布

本文链接：https://blog.csdn.net/2302_76722613/article/details/142827685

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、组成部分

定义：把html页面中的布局元素看作是一个矩形盒子，也就是盛装内容的容器

封装html元素包括：边框border、外边距margin、内边距padding、实际内容content

1、边框-border

border可以设置元素的边框，边框有三部分组成：边框宽度、边框样式、边框颜色

语法规范：border：border-width || border-style || border-color

复合写法：border：三个属性对应的属性值（没有顺序）

属性	作用
border-width	定义边框粗细
border-style	定义边框样式
border-color	定义边框颜色

例子：

    <style>
        div {
            width: 70px;
            height: 70px;
            /* border-width: 5px;
            border-style: solid;
            border-color: aquamarine */
            border: 5px solid aquamarine;
        }
    </style>
<body>
    <div></div>
</body>

边框分开写法（四条边分别对应）：border-top、border-bottom、border-left、borer-right

例子：

    <style>
        div {
            height: 80px;
            width: 80px;
            border: 5px double pink;
            border-top: 2px solid red;
            border-bottom: 3px dashed blue;
            /* 就近原则，层叠性 */
        }
    </style>
<body>
    <div></div>
</body>

合并相邻的单元格的边框

语法规范：border-collapse: collapse;

    <style>
        table {
            width: 300px;
            height: 300px;
        }

        th {
            height: 35px;
        }

        table,
        th,
        td {
            border: 2px solid aqua;
            border-collapse: collapse;
            text-align: center;
            font-size: 15px;
        }
    </style>
<body>
    <table>
        <thead>
            <tr>
                <th>排名</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>地址</th>
                <th>爱好</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>小红</td>
                <td>2</td>
                <td>女</td>
                <td>北京</td>
                <td>睡觉</td>
            </tr>
            <tr>
                <td>2</td>
                <td>小蓝</td>
                <td>4</td>
                <td>女</td>
                <td>天津</td>
                <td>吃饭</td>
            </tr>
            <tr>
                <td>3</td>
                <td>小粉</td>
                <td>6</td>
                <td>男</td>
                <td>成都</td>
                <td>打豆豆</td>
            </tr>
            <tr>
                <td>4</td>
                <td>小黑</td>
                <td>1</td>
                <td>女</td>
                <td>西安</td>
                <td>乒乓球</td>
            </tr>
        </tbody>
    </table>
</body>

2、内边距-padding

padding用于设置内边距，即内容与盒子边框之间的距离

种类：四种分别对应上内边距（padding-top）、下内边距（padding-bottom）、左内边距（padding-left）、右内边距（padding-right）

复合写法
属性的个数	表达意思
padding：5px；	上下左右都是5px内边距
padding：5px；10px；	上下是5px内边距，左右是10px内边距
padding：5px；10px；20px；	上是5px内边距，左右是10px内边距，下是20px内边距
padding：5px；10px；20px；30px；	上是5px内边距，右是10px内边距，下是20px内边距，左是30px内边距（顺时针）

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            color: chocolate;
            padding-top: 20px;
            padding-left: 20px;
            padding-right: 30px;
        }
    </style>
<body>
    <div>我是一只大肥羊我是一只大肥羊我是一只大肥羊我是一只大肥羊我是一只大肥羊我是一只大肥羊我是一只大肥羊我是一只大肥羊</div>
</body>

综合案例

一般如果先定义了一个盒子大小，再设置内边距文字与盒子之间的距离，便会把盒子的尺寸给撑大，所有为了保持盒子整体大小不变，盒子的大小便可以修改为原尺寸减去内边距

    <style>
        .nav {
            height: 41px;
            border-top: 3px solid sandybrown;
            border-bottom: 1px solid black;
            line-height: 41px;
        }

        .nav a {
            /* a需要转化为行内块元素，才可以设置高度 */
            height: 41px;
            display: inline-block;
            font-size: 14px;
            color: rgb(52, 52, 48);
            text-decoration: none;
            padding: 0 20px;

        }

        .nav a:hover {
            background-color: darkgray;
            color: coral;

        }
    </style>
<body>
    <div class="nav">
        <a href="#">客户端</a>
        <a href="#">电脑端</a>
        <a href="#">新浪导航</a>
        <a href="#">微博</a>
        <a href="#">手机新浪网</a>
    </div>
</body>

特例：当盒子本身没有指定width/height属性，则此时padding不会撑开盒子

例如：当你没有设置盒子宽度时，盒子大小会默认为浏览器的宽度，此时你设置padding值不会改变盒子的宽度，但是你如果设置了盒子width：100%；再设置padding值则会改变盒子大小。

例如：p标签是div标签的子级，但你只对div设置了width和height属性，此时p标签尽管会继承div的属性，但是你没有给p本身指定width和height值，所以此时你对p标签设置padding值也不会改变p的盒子大小

3、外边距-margin

margin用于设置外边距，即控制盒子与盒子之间的距离

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

复合写法：属性的个数写法、表达意思同 padding

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: rgb(168, 212, 72);
        }

        /* .one {
            margin-bottom: 20px;
        } */
        .two {
            margin-top: 20px;
        }
    </style>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>