盒子模型

头像
shasha
    阅读 14 分钟
    1

    1. 盒子简介

    • CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。
    • 为什么要想象成盒子呢？因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于是摆放盒子了。
    • 我们只需要将相应的盒子摆放到网页中的相应位置即可完成网页的布局。

    2. 盒子模型

    一个盒子我们会分为几个部分：

    • 内容区(content)
    • 内边距(padding)
    • 边框(border)
    • 外边距(margin)

      image.png

    3. 边框 border

    使用width,height是分别设置的盒子内容区的宽度和高度，而不是盒子的整个大小。盒子可见框的大小由内容区，内边距，边框共同决定。
    要为一个元素设置边框必须指定三个样式：

    • border-width 边框的宽度
    • border-color 边框颜色
    • border-style 边框样式

    border-width 指定四个边框的宽度

    • 如果在boder-width 指定了四个值，则四个值分别设置给上 右 下 左，按照顺时针的方向设置的。
    • 如果指定三个值，则三个值分别设置给上 左右 下。
    • 如果指定两个值，则两个值分别设置给上下 左右。
    • 如果指定一个值，则四边全都是该值。
    border-width: 10px 20px 30px 40px;
    • 除了border-width, CSS中还提供了四个border-xxx-width.专门用来设置定边的宽度。 xxx的值可能是： top right bottom left

    border-color 设置边框的颜色

    • 和宽度一样，color也提供了四个方向的样式，分别指定颜色。border-xxx-color
    border-color: red yellow orange blue;

    border-style 边框的样式

    • none 默认值，没有边框
    • solid 实线
    • dotted 点状边框
    • dashed 虚线
    • double 双线
    • boder-xxx-style 四个样式
    border-style: solid dotted dashed double;

    border边框的简写

    大部分的浏览器中，边框的宽度和颜色都有默认值，而边框的样式默认值为none。

    • 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色。
    • 没有顺序要求。
    • border 一经指定就是同时指定了四个边，不能分别指定
    border: red solid 10px;
    • border-top border-right border-bottom border-left 可以单独设置四个边的样式
    .box1{
border-top: red solid 10px;
border-bottom: red solid 10px;
border-left: red solid 10px;
}
.box2{
border: red solid 10px;
border-right: none;/*右边框被去除*/
}

    box1和box2的效果相同，只是box2的写法稍微更简单一些。
    子元素默认在父元素的内容区

    4. 内边距padding

    内边距，指盒子的内容区与盒子边框之间的距离。

    • padding-top
    • padding-right
    • padding-bottom
    • padding-left
    • 内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距。
    • 盒子的大小由内容区，内边距和边框共同决定。
    • 盒子的可见框宽度 = boeder-left-width (左边框宽度) + padding-left (左内边距宽度) + width (内容区宽度) + padding-right (右内边距宽度) + border-right-width (右边框宽度)
    • 盒子的可见框高度 = boeder-top-width (左边框宽度) + padding-top (左内边距宽度) + height (内容区高度) + padding-bottom (右内边距宽度) + border-bottom-width (右边框宽度)
    • 使用padding可以同时设置四个边框的样式，规则同border-width。
    padding: 100px 200px;
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1 {
            width: 100px;
            height: 100px;
            background-color: #bfa;
            padding-top: 100px;/* 上内边距大小*/
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2">abc</div>
</div>
</body>
</html>

    结果：注意： 子元素默认都在父元素的内容区。
    image.png

    5. 外边距margin

    外边距指的是当前盒子与其他盒子之间的距离。它不会影响可见框的大小，而是会影响到盒子的位置。

    • 盒子有四个方向的外边距：

      • margin-top
      • margin-right
      • margin-bottom
      • margin-left
    • 由于页面中的元素都是靠左靠上摆放的， 所以当我们设置上和左边距时，会导致盒子自身的位置发生改变。而如果是设置右和下边距会改变其他盒子的位置。
    • 外边距也可以指定一个负值。如果外边距设置的是负值，则元素会向反方向移动。

    • margin 还可以设置为auto，auto一般只设置给水平方向的margin。

      • 垂直方向外边距如果设置为auto，则外边距默认为0.
      • 如果只指定左边距或者只指定右边距的margin为auto，则会将外边距设置为最大值。
      • 如果将left 和right 同时设置为auto,则会将两侧的外边距设置为相同的值。就可以使元素自动在父元素中居中。所以我们经常将左右外边距设置为auto，使子元素在父元素中水平居中。
    • 外边距同样可以使用简写属性margin，可以同时设置四个方向的外边距，规则和padding一样。
    margin: 0 auto;/* 上下为0,左右auto,可实现居中*/

    垂直外边距的重叠问题

    在网页中，相邻的， 垂直方向的外边距，则会发生外边距的重叠。
    特点1： 兄弟元素之间的相邻外边距会取最大值而不是取和。
    举例1如下：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            /* 为上边的元素设置一个下边距*/
            margin-bottom: 100px;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: green;
            /* 为下边的元素设置一个上边距*/
            margin-top: 100px;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

    结果：box1和box2的外边距相邻且在垂直方向重叠，则取外边距最大值100px。
    image.png
    如果改变相邻的关系，则不会产生重叠。
    举例2：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            /* 为上边的元素设置一个下边距*/
            margin-bottom: 100px;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: green;
            /* 为下边的元素设置一个上边距*/
            margin-top: 100px;
        }
    </style>
</head>
<body>
<div class="box1"></div>
a
<div class="box2"></div>
</body>
</html>

    结果： 外边距已被a 隔开，不相邻，则没有了外边距重叠问题。
    image.png
    特点2：父子元素之间的垂直外边距相邻了，则子元素的外边距会设置给父元素。
    举例3：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box3 {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }

        .box4 {
            width: 100px;
            height: 100px;
            background-color: green;
            /* 为子元素设置外边距*/
            margin-top: 100px;
        }
    </style>
</head>
<body>
<div class="box3">
    <div class="box4"></div>
</div>
</body>
</html>

    结果： 子元素与父元素的外边距垂直相邻，则子元素的外边距也会设置给父元素。
    image.png

    • 若想达到只有子元素box3有上边框的效果，可以做以下改动。

    方法一： 改变相邻关系：
    为box3设置一个上边框1px(或者设置外边距)，将height 设置为199px(因为margin和padding影响了可见框的大小)。为box4设置外边距100px。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box3 {
            width: 200px;
            height: 199px;
            background-color: yellow;
            /* 为box3设置一个上边框*/
            border-top: 1px red solid;
            /* padding-top: 1px; */
        }

        .box4 {
            width: 100px;
            height: 100px;
            background-color: green;
            /* 为子元素设置外边距*/
            margin-top: 100px;
        }
    </style>
</head>
<body>
<div class="box3">
    <div class="box4"></div>
</div>
</body>
</html>

    结果：
    image.png

    方法2：box3设置padding-top，将height设置为100px。box4不用设置外边距。

       <style type="text/css">
        .box3 {
            width: 200px;
            height: 100px;
            background-color: yellow;
            padding-top: 100px;
        }
        .box4 {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>

    结果：
    image.png

    6.浏览器的默认样式

    • 浏览器为很多元素设置了一些默认的margin和padding, 以达到一个比较好的显示效果。
    • 而它的这些默认样式，正常情况下我们是不需要的。所以我们往往在编写样式之前需要将浏览器中的默认margin和padding都去掉。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
}
    </style>
</head>
<body>
<ul>
    <li>无序列表</li>
</ul>
<p>我是一个p标签</p>
</body>
</html>

    默认的效果如下：
    image.png

    去掉默认margin 和padding后效果：

        <style type="text/css">
    *{
    /* 清除浏览器的默认样式*/
        margin: 0;
        padding: 0;
    }
    </style>

    image.png

    7. 内联元素的盒子模型

    (1) 内联元素不能设置width和height，设置了也不起作用

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        span{
            background-color: greenyellow;
            weight: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<span class="s1">我是元素span</span>
<span >我是元素span</span>
</body>
</html>

    结果：与未设置宽高的效果一样。
    image.png

    (2) 内联元素可以设置水平方向的内边距

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        span{
            background-color: greenyellow;
        }
        .s1{
            padding-left: 100px;
            padding-right: 100px;
        }
    </style>
</head>
<body>
<span class="s1">我是元素span</span>
<span >我是元素span</span>
</body>
</html>

    结果：
    image.png

    (3) 内联元素可以设置垂直方向内边距，但是不会影响页面的布局

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        span {
            background-color: greenyellow;
        }
        .s1{
            padding-top: 50px;
            padding-bottom: 50px;
        }

        .box1{
            width: 100px;
            height: 100px;
            /* 如果盒子不设置背景颜色，则默认为透明白色*/
            background-color: red;
        }
    </style>
</head>
<body>
<span class="s1">我是元素span</span>
<span>我是元素span</span>
<div class="box1"></div>
</body>
</html>

    结果： 并没有因为s1设置了下内边距而改变box1的位置。
    image.png

    (4) 内联元素可以设置边框，但是垂直的边框不会影响页面的布局

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        span {
            background-color: greenyellow;
        }
        .s1{
            border-bottom: 50px blue solid;
        }

        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<span class="s1">我是元素span</span>
<span>我是元素span</span>
<div class="box1"></div>
</body>
</html>

    结果：蓝色边框与box1部分重合，box1的位置并未改变。
    image.png

    (5) 内联元素支持水平外边距，水平方向的外边距不会重叠，而是求和

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        span {
            background-color: greenyellow;
        }
        .s1{
            margin-left: 100px;
            margin-right: 100px;
        }

        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<span class="s1">我是元素span</span>
<span>我是元素span</span>
<div class="box1"></div>
</body>
</html>

    结果：
    image.png

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        span {
            background-color: greenyellow;
        }
        .s1{
            margin-left: 100px;
            margin-right: 100px;
        }
        .s2{
            margin-left: 100px;
        }

        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<span class="s1">我是元素span</span>
<span class="s2">我是元素span</span>
<span>我是元素span</span>
<div class="box1"></div>
</body>
</html>

    结果：s1的右和s2的左各100px外边距。
    image.png

    (6) 内联元素不支持垂直外边距

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        span {
            background-color: greenyellow;
        }
        .s1{
            margin-top: 100px;
            margin-bottom: 100px;
        }

        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<span class="s1">我是元素span</span>
<span>我是元素span</span>
<div class="box1"></div>
</body>
</html>

    结果： 上下外边距并未起作用。
    image.png

    8. display样式 修改元素的类型

    可选值：

    • inline: 可以将一个元素作为内联元素显示
    • block: 可以将一个元素设置为块元素显示(块元素会独占一行显示)
    • inline-block: 将一个元素转换为行内块元素。可以使一个元素既有行内元素的特点，又有块元素的特点。既可以设置宽高，又不会独占一行。
    • none: 不显示元素，并且元素不会在页面中继续占有位置。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        a {
            background-color: #bfa;
            /* a为内联元素，内联元素设置宽高不起作用*/
            width: 200px;
            height: 100px;
            /* 使用display将a内联元素作为块元素显示*/
            display: block;
        }
    </style>
</head>
<body>
<a href="#">我是超链接</a>
<span>hello</span>
</body>
</html>

    结果：块元素有独占一行的特点。
    image.png

    9. visibility样式 设置元素的隐藏和显示状态

    可选值：

    • visible 默认值，元素默认会在页面显示
    • hidden 元素会隐藏而不显示。但是它的位置会依然保持。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box {
            background-color: #bfa;
            width: 100px;
            height: 100px;
            visibility: visible;
        }
    </style>
</head>
<body>
<div class="box"></div>
<span>hello</span>
</body>
</html>

    若使用 visibility: visible;结果如下：

    image.png

    若使用 visibility: hidden;;结果如下：

    image.png

    10. overflow

    子元素默认是存在于父元素的内容区中。理论上将子元素的最大值可以等于父元素内容区的大小。

    • 如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示。超出父元素的内容，我们称为溢出的内容。父元素默认是将溢出内容，在父元素外边显示。
    • 通过overflow可以设置父元素如何来处理溢出内容：

    • 可选值：

      • visible 默认值，不会对溢出内容做处理
      • hidden 溢出的内容，会被修剪，不会显示
      • scroll 会为父元素添加滚动条，通过拖动滚动条来查看完整内容。该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条
      • auto 会根据需求自动添加滚动条。需要水平就添加水平；需要垂直就添加垂直；都不需要就不加。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            overflow: visible;
        }
        .box2{
            width: 50px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>
</body>
</html>

    结果：
    image.png

    8. 文档流

    文档流在网页的最底层，它表示的是一个页面中的位置。我们所创建的元素默认都是处在文档流中。
    元素在文档流中的特点：

    • (1) 块元素(如div)

      • 块元素在文档流中会独占一行，块元素会自上向下排列
      • 块元素在文档流中默认宽度是父元素的100%
      • 块元素在文档流中的高度默认被内容撑开

    注意： 当元素的高度和宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度和高度，以适应内边距。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<div style="background-color: #bfa; padding-left: 100px">a</div>
</body>
</html>

    结果：
    image.png

    • (2) 内联元素(如span)

      • 内联元素在文档流中只占自身的大小，会默认从左向右排列。如果一行中不足于容纳所有的内联元素，则换到下一行，继续自左向右
      • 在文档流中，内联元素的宽度和高度默认都被内容撑开
      • 当元素的宽度值为 auto 时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距。
    css
    shasha
    28 声望7 粉丝
    « 上一篇
    CSS补充
    下一篇 »
    浮动

    引用和评论

    推荐阅读
    头像
    day34 gulp

    shasha阅读 1.2k

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.5k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 12阅读 1.6k

    头像
    CSS 实现带tooltip的slider

    XboxYan赞 6阅读 1.1k

    头像
    盘点CSS文本两端对齐的N种方式

    XboxYan赞 1阅读 1.4k

    0 条评论
    得票最新