关于css:day7-盒模型

37次阅读

共计 1013 个字符，预计需要花费 3 分钟才能阅读完成。

特点：
- 内容区的大小由 width 和 height 决定
- 内容区是文字，图片等的显示区域

值的设置：

padding: 10px; 一个值，设置周围

padding: 10px 20px; 两个值，高低左右

padding: 10px 20px 30px; 三个值，上左右下

padding: 10px 20px 30px 40px; 四个值，顺时针上右下左

特点：（四点）

padding 会撑大盒子。如果不想撑大，要在原来的宽高根底上减去对应方向的 padding 值
背景图和背景色能够在 padding 区域显示
padding 不能够设置正数

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>
        .box {
            width: 100px;
            height: 100px;
            margin: auto;
            background-color: pink;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class='box'> 盒子 </div>
</body>
</html>

后果：

margin 值的设置和 padding 值设置一样 margin/margin- 方向
单方向 margin- 方向（left/right/top/bottom）: 数值 +px
特点：（四点）
- margin 不会撑大盒子，然而会影响他人
- margin 区域不会显示背景图 / 背景色
- margin 能够设置正数，正数会让两个盒子重叠在一起
- margin 能够用来调整盒子和盒子之间的间隔
margin 的两个 bug
- （1）margin 的重叠
  - 给下面的元素增加下边距，给上面的元素增加上边距之后，会产生 margin 的重叠，且值取最大值。
    左右不会重叠，会相加。
- （2）margin 的传递 （当给元素的第一个子元素增加 margin-top 的时候，会谬误的加在父元素身上）
  - 解决办法：
    - 用 padding 设置
    - 给父元素加边框
    - 给父元素增加 overflow: hidden(溢出暗藏)
    - 给父元素或者该元素增加浮动