css-day06

最新推荐文章于 2024-08-21 09:40:48 发布

xiaoruia

最新推荐文章于 2024-08-21 09:40:48 发布

阅读量83

点赞数

分类专栏：我的前端学习记录文章标签： css css3 html

本文链接：https://blog.csdn.net/xiaoruia/article/details/125495332

版权

我的前端学习记录专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细讲解了HTML/CSS中的盒子模型，包括内容区、内边距、边框和外边距，以及如何通过实例理解它们的作用，如居中、布局控制和BFC机制。实例演示了如何使用padding调整盒子尺寸，margin控制间距，以及`margin: 0 auto`实现水平居中。

摘要由CSDN通过智能技术生成

day06

盒子模型

盒子模型分为四个部分

内容部分：主要放盒子里面的文字等内容
内边距：
- padding：上->右->下->左
- padding是盒子里面内容与边框的距离
- padding值可以将盒子撑大，改变其原本的宽高
边框
外边距：
- margin：上->右->下->左
- margin是盒子与盒子直接的距离
- margin值不会改变原本盒子的大小
- margin：0 auto：
  - 将盒子根据父盒子的宽度水平居中，上边距为0（可以改变）
  - 只能让独占一行的元素居中，浮动的盒子也不行
- 如果两个盒子一个设置了下边距，一个设置了上边距，不会叠加而是取最大值
- overflow:hidden ：当子盒子要与父盒子有外边距时，为了防止父盒子抢占子盒子的margin值，则用overflow：hidden禁止父盒子抢占（触发了BFC机制）

重点：

padding可以改变盒子自身的大小，margin只会改变盒子与盒子之间的距离
auto只能时独占一行的原则实现居中

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 960px;
            height: 300px;
            margin: 10px auto;
            background-color: pink;
        }
        .box li {
            float: left;
            width: 210px;
            height: 300px;
            margin-right: 40px;
            list-style: none;
            background-color: springgreen;
        }
        .box .last {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
</body>
</html>