盒子模型

最新推荐文章于 2025-07-03 11:04:06 发布

原创最新推荐文章于 2025-07-03 11:04:06 发布 · 269 阅读

0 ·

CC 4.0 BY-SA版权

本文深入解析CSS盒子模型的组成部分，包括边框、内容、内边距和外边距的作用，以及它们如何影响元素的尺寸。同时，文章提供了设置表格、导航栏样式和调整元素位置的具体代码实例。

盒子模型组成

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

在这里插入图片描述

边框：width

    <style>
        div {
            width: 300px;
            height: 200px;
            //边框颜色
            border-color: pink;
            //边框粗细
            border-width: 5px;
            //虚线
            border-style: dotted;
            //简写
            border：1px pink solid;//无顺序
            //只要上边框 left左 right 右
            border-top：5px solid pink;
            //只要下边框
            border-bottom:
        }
    </style>

表格

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 700px;
            height: 600px;
        }
        th {
            height: 100px;
            width: 100px;
        }
        table,td,th{
            border: 1px solid black;
            /* 合并边框 */
            border-collapse: collapse;
            /* 居中 */
            text-align: center;
        }
    </style>
</head>
<body>
    <table align="center" cellspacing="0x">
       <thead>
       <tr>
           <th>排名</th>
           <th>关键词</th>
           <th>趋势</th>
           <th>进入搜索</th>
           <th>最近七日</th>
           <th>相关连接</th>
       </tr>
      </thead>
      <tbody>
       <tr>
           <td>1</td>
           <td>规程</td>
           <td><img src="imge/大头娃娃1.gif" width=100 ></td>
           <td>456</td>
           <td>123</td>
           <td><a href="#">贴吧</a></td>
       </tr>
        <tr>
            <td>1</td>
            <td>规程</td>
            <td><img src="imge/大头娃娃1.gif" width=100 ></td>
            <td>456</td>
            <td>123</td>
            <td><a href="#">贴吧</a></td>
        </tr>
        <tr>
            <td>1</td>
            <td>规程</td>
            <td><img src="imge/大头娃娃1.gif" width=100 ></td>
            <td>456</td>
            <td>123</td>
            <td><a href="#">贴吧</a></td>
        </tr>
       <tr>
        <td>1</td>
        <td>规程</td>
        <td><img src="imge/大头娃娃1.gif" width=100 ></td>
        <td>456</td>
        <td>123</td>
        <td><a href="#">贴吧</a></td>
       </tr>
    </tbody>
    </table>
</body>
</html>

padding：内边距

文字与盒子边框的距离

        div {
            /* 上下左右都是5px */
            padding: 5px;
            /* 上下5px 左右10px */
            padding: 5px 10px;
            /* 上5px 左右10px 下20px */
            padding: 5px 10px 20px;
            /* 上上右下左,顺时针 */
            padding: 5px 10px 20px 30px;
        }

重点：内边距会加大盒子大小
所以盒子宽和高需要减去padding的距离乘2
用padding保证与作用盒子距离相等。

导航栏
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav {
            height: 41px;
            border-top: 3px solid orange;
            border-bottom: 1px solid black;
            background-color: white;
            /* 行高等于高垂直居中 */
            line-height: 41px;
        }
        .nav a{
            /* a是行内元素 必须转化为行内块元素 既有高度 可以一行多个 */
            font-size: 14px;
            color: grey;
            /* 上下0像素 左右20像素 */
            padding: 0 20px;
            text-emphasis: none;
            display: inline-block;
        }
        /* 伪类选择器 */
        .nav a:hover {
            background-color: orange;
            color:white;
        }
    </style>
</head>
<body>
    <div class="nav">
         <a href="#">新浪导航</a>
         <a href="#">手机新浪网</a>
         <a href="#">移动端</a>
         <a href="#">微博</a>
    </div>
</body>
</html>

如果没设置width或者height大小，padding-weight或者height不会加大盒子大小

margin: 外边距

盒子间的距离。

        .two{
            /* 上下左右都是30px */
            margin: 30px;
            /* 上5px 左右30px  */
            margin: 5px 30px;
            /* 上5px 左右10px 下30px */
            margin: 5px 10px 30px;
            /* 顺时针上下左右 */
            margin: 5px 10px 20px 30px;
            /* 上下没外边距，左右auto，居中 */
            margin: 0 auto;
            /* 让行内块元素居中，把父亲加这个语句 */
            text-align: center;
        }

父盒子里子盒子如何下移？
父亲加一个边框

.father {
//加一个1px透明边框
 border：1px solid transparent
//加一个1px内边距
  padding：1px
//加这句话，不会撑大盒子
   overflow: hidden
}

清楚内外边距，让abcd左对齐

用通配符选择器

在这里插入图片描述

    <style>
      * {
          margin: 0;//清楚内边框
          padding: 0;//清楚外边框
      }
    </style>