CSS盒模型

程序员小淞
248 阅读4分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

前言：先定义一个div,宽度为100px,高度设置为200px：

.box-model{
    width:100px;
    height: 200px;
    background-color: white;
}

浏览器F12查看此元素，可以看到：

image.png

一个盒子，通常包括这四个区域，最里面的是内容区，由内而外分别是：padding内边距、border边框和margin外边距：

区域说明
内容区域代表盒子的实际内容部分，它是由width 宽度和 height 高度来确定的
内间距区域代表盒子与实际内容之间的空白区域，由padding属性设置
边框区域代表盒子的边框，是内间距区域和外边距区域的边界，由border属性设置
外边距区域代表盒子的边框与相邻的其他盒子边框之间的距离，由margin属性设置
盒子类型：

盒子类型由box-sizing属性进行设置，分为content-box(标准盒模型)和border-box(IE盒模型也叫怪异盒模型)

将上面div设置为标准模型，并设置padding、border和margin:

.box-model {
    box-sizing: content-box;
    width: 100px;
    height: 200px;
    background-color: white;
    padding: 10px;
    border: 5px solid ;
    margin: 10px;
}

此时打开F12看到：

image.png

image.png

此时css定义的width只包含content的宽度，总宽度为130，也就是100+（10+5）*2

此时css定义的height只包含content的高度，总高度变为230，也就是200+（10+5）*2

标准模型盒子的总宽高计算公式：

盒子宽度=内容宽度+左右内边距+左右边框的宽度

盒子高度=内容高度+上下内边距+上下边框的高度

将上面div设置为IE模型，并设置padding、border和margin:

.box-model {
    box-sizing: border-box;
    width: 100px;
    height: 200px;
    background-color: white;
    padding: 10px;
    border: 5px solid ;
    margin: 10px;
}

此时打开F12看到：

image.png

image.png

此时css定义的width包含content的宽度70+2倍内边距的宽度+2倍边框宽度，总宽度为100，也就是css定义的宽度

此时css定义的height包含content的高度170+2倍内边距高度+2倍边框高度，总高度变为200，也就是css定义的高度

总结：
  • content-box 标准盒子模型
    • 设置的width与height只包括content的宽和高，不包括内边距、边框外边距
    • 计算公式
      • 盒子实际宽度 = content内容宽度+ 2倍padding + 2倍border
      • 盒子实际高度 = content内容高度+ 2倍padding + 2倍border
      • 盒子设置宽度 = content内容宽度
      • 盒子设置高度 = content内容高度
  • border-box IE盒子模型
    • 设置的width与height包括content的宽和高、内边距和边框，但是不包含外边距
    • 计算公式
      • 盒子实际宽度 = content内容宽度+ 2倍padding + 2倍border
      • 盒子实际高度 = content内容高度+ 2倍padding + 2倍border
      • 盒子设置宽度 = content内容宽度+ 2倍padding + 2倍border
      • 盒子设置高度 = content内容高度+ 2倍padding + 2倍border
外边距和内边距
外边距 margin

margin设置元素的外边距（盒子与其他盒子之间的距离）

  • margin没有背景色，是透明状态
  • margin会在元素边框外设置外边距与其他元素保持距离，不会改变元素自身的宽度和高度
内边距 padding

padding定义元素边框与元素内容之间的空间（上下左右的内边距）

  • padding设置内边距后会增加元素自身的宽度和高度
  • 元素背景颜色会填充padding设置的区域
  • 如果块级元素没有设置宽度，再设置padding，此时块级元素宽度不变
  • 快级元素设置了宽度，再设置padding,就会撑大盒子
margin重叠

垂直方向，两个相邻块级元素，如果上面的元素margin-bottom,下面的元素有上边距margin-top,他们之间的距离不是margin-bottom和margin-top之和，而是取两个值中较大的那个，这种现象称为margin重叠

解决方案：

  • 只给一个元素设置margin
  • 父元素设置display:flex，flex-direction: column
margin塌陷

父子块级元素，如果父元素设置了margin-top，子元素同时也设置margin-top,当子元素的margin-top大于父元素的margin-top，父元素外边距就会被子元素影响覆盖，这种现象较margin塌陷，子元素的margin-top始终会作用于父元素身上

.box-out{
    width: 200px;
    height: 200px;
    margin-top: 10px;
    background-color: white;
    .box-in{
        width: 100px;
        height: 100px;
        margin-top: 20px;//比父元素外边距多10
        background-color: #31a8fa;
    }
}

image.png

解决方案：

  • 父元素上级元素设置display:flex;
  • 子元素设置display:inline-block;
  • 父元素设置overflow:hidden;
  • 子元素设置float:left;
avatar
文章
阅读
粉丝