前端学习之基础篇——盒模型

最新推荐文章于 2026-05-12 20:54:48 发布

原创最新推荐文章于 2026-05-12 20:54:48 发布 · 349 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #html #html5 #css3 #前端

前端学习篇同时被 2 个专栏收录

8 篇文章

订阅专栏

基础篇

7 篇文章

订阅专栏

本文详细介绍了CSS盒模型的概念及其组成部分：内容(content)、内边距(padding)、边框(border)及外边距(margin)，并提供了如何使用这些元素进行布局的实际案例。

前端学习之基础篇——盒模型

一、简介

概念、内容 content、内边距 padding、边框 border、外边距 margin

二、盒模型

1、概念

css盒模型本质是一个盒子，封装周围的html标签

2、内容 content

width: 设置宽度
height: 设置高度

3、内边距（填充区域）padding

单边内边距：padding-top padding-bottom padding-left padding-right
简写 :

一个值：表示四个方向的内边距值。
两个值：分别表示上下，左右的内边距值
三个值：分别表示上，左右，下的内边距值
四个值：分别表示上，右，下，左的内边距值

<head>
    <style>
        .box1{
            /* 
                width和height,默认规定内容区域大小
                内容区域放置所有文字或者子标签
             */
             width: 200px;
             height: 200px;
             background-color: salmon;

             /* 
                内边距 padding
                内边距规定内容到边框的距离
                一个值：四个边内边距
                两个值：上下、左右
                三个值：上、左右、下
                四个值：上、右、下、左
                设置单边内边距
                padding 方向（left左 right右 top上 bottom下）
              */
              /* padding:20px 30px 40px 50px; */
              padding-top: 20px;
        }
        .box2{
            width: 30%;
            height: 40%;
            background-color: sienna;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

4、边框 border

border-width
border-style

none 定义无边框
dotted 定义点状边框
dashed 定义虚线边框
solid 定义实现边框
double 定义双线。双线的高度等于border-width的值

border-color
border-radius

圆角属性
border-radius: 10px 20px 30px 40px (圆 50%)

<head>
    <style>
        .box1{
            width: 300px;
            height: 300px;
            background-color: indigo;
            /* 
                圆角属性
             */
             /* border-radius:30px */
             /* border-radius:10px 20px 30px 40px; */
             /* 
                如果设置为50%，会变成一个圆形，椭圆还是正圆根据宽高来控制
              */
              border-radius: 50%;
        }
        /* 半圆 */
        .box2{
            width: 400px;
            height: 200px;
            background-color: lawngreen;
            border-radius: 200px 200px 0 0;
        }
        /* 四分之一圆 */
        .box3{
            width: 300px;
            height: 300px;
            background-color: lightcoral;
            border-radius: 100% 0 0 0;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

5、外边距 margin

单边外边距： margin-top margin-bottom margin-left margin-right
简写与内边距相同

外边距

<head>
    <style>
        *{
            /* 去掉所有标签自带边距 */
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: rosybrown;
            /* 
                外边距可以设置负值
             */
             /* margin: 20px;*/
             margin-left: -30px;
        }
    </style>
</head>
<body>
    <div class="box">
        hello world
    </div>
</body>

外边距实现盒子居中

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

            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin: 0 auto;
            margin: 30px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="wrap1">
        <div class="box1"></div>
    </div>
</body>

外边距塌陷问题

<head>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .wrap{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            /* 
                外边距塌陷问题：
                    解决：
                        1、给父标签加边框或者内边距
                        2、父标签加overflow:hidden;（溢出隐藏）
             */
             /* border: 1px solid #000; */
             /* padding:1px; */
            overflow: hidden;
        }
        .box1{
            width: 50%;
            height: 50%;
            background-color: slateblue;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box1"></div>
    </div>
</body>

6、盒子居中

<head>
    <style>
        .wrap{
            width: 300px;
            height: 300px;
            background-color: cornflowerblue;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: cyan;
            margin: 0 auto;
        }
        .wrap2{
            width: 300px;
            height: 300px;
            background-color: darkblue;
            /* 水平居中 */
            text-align: center;
            /* 垂直居中 */
            line-height: 300px;
        }
        .box2{
            background-color: darkgoldenrod;
        }
        .wrap3{
            width: 300px;
            height: 300px;
            background-color: darksalmon;
            /* text-align: center;
            line-height: 300px; */
        }
        img{
            width: 100px;
            height: 100px;
            /* vertical-align: middle; */
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <!-- 块级居中 margin:0 auto; -->
     <div class="wrap">
        <div class="box1"></div>
     </div>
     <!-- 行内居中：行内标签具有文字的对齐属性 -->
     <div class="wrap2">
         <span class="box2">hello world</span>
     </div>
     <!-- 
        行内块居中：
            1.父标签加text-align:center;
            2.先display:block转换为块级，在加margin:0 auto;
      -->
      <div class="wrap3">
          <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1282406071,187117223&fm=26&gp=0.jpg" alt="">
      </div>
</body>