CSS - 盒模型

The box model

CSS 盒模型是 Web 页面布局的基础，每个元素都被表示为一个矩形盒子，该盒子包含 content padding border margin 围绕在盒子的周围。

Box properties

width & height 设定内容盒子的宽和高。

padding 是指 border 和内容之间的四个方向的空间 padding-top padding-right padding-bottom padding-left

border 是指 paddint 和 margin 之间的四个方向的空间(边框)

border-top border-right border-bottom border-left

border-width border-style border-color

border-top-width border-top-style border-top-color ......

margin 是指 CSS 盒子的最外围的四个方向的空间 margin-top margin-right margin-bottom margin-left

Advanced box manipulation

Overflow 当给某个盒子的尺寸设定了绝对的值，但是盒子中的内容不适应该盒子的尺寸，在某些情况下，盒子中的内容会溢出到盒子外面。若要控制这种情况，就要使用 overflow 属性。该属性有以下常用的值：

• auto: 该盒子会出现滚动条，可以滚动看到溢出的内容。
• hidden: 隐藏溢出的内容。
• visible: 显示溢出的内容在外围(此值为默认行为)。

    <p class="autoscroll">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Mauris tempus turpis id ante mollis dignissim. Nam sed
        dolor non tortor lacinia lobortis id dapibus nunc. Praesent
        iaculis tincidunt augue. Integer efficitur sem eget risus
        cursus, ornare venenatis augue hendrerit. Praesent non elit
        metus. Morbi vel sodales ligula.
    </p>

    <p class="clipped">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Mauris tempus turpis id ante mollis dignissim. Nam sed
        dolor non tortor lacinia lobortis id dapibus nunc. Praesent
        iaculis tincidunt augue. Integer efficitur sem eget risus
        cursus, ornare venenatis augue hendrerit. Praesent non elit
        metus. Morbi vel sodales ligula.
    </p>

    <p class="default">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Mauris tempus turpis id ante mollis dignissim. Nam sed
        dolor non tortor lacinia lobortis id dapibus nunc. Praesent
        iaculis tincidunt augue. Integer efficitur sem eget risus
        cursus, ornare venenatis augue hendrerit. Praesent non elit
        metus. Morbi vel sodales ligula.
    </p>

p {
    width: 400px;
    height: 2.5em;
    padding: 1em 1em 1em 1em;
    border: 1px solid black;
}

.autoscroll {
    overflow: auto;
}

.clipped {
    overflow: hidden;
}

.default {
    overflow: visible;
}

Background clip

盒子的背景由颜色和图片组成(background-color background-image)，默认情况下，盒子的背景会蔓延至盒子边框的边缘，有些情况下这种模式会不美观，可以使用 background-clip 属性来修剪。

    <div class="default"></div>
    <div class="padding-box"></div>
    <div class="content-box"></div>

div {
    width: 60px;
    height: 60px;
    border: 20px solid rgba(0, 0, 0, 0.5);
    padding: 20px;
    margin: 20px 0;
    background-size: 140px;
    background-position: center;
    background-image: url('./images/ff-logo.png');
    background-color: gold;
}

.default {
    background-clip: border-box;
}

.padding-box {
    background-clip: padding-box;
}

.content-box {
    background-clip: content-box;
}

Outline

outline 看起来像是盒子的边框，但是其不是盒模型的一部分。其像是绘制在盒子上的边框，但其不会影响盒子的尺寸。(其绘制在盒子边框外，在盒子的 margin 之内)

Types of CSS boxes

block inline inline-block 这些值的设定由 display 属性设置

block box 的定义是堆放在其他盒子之上的盒子，并且其能设定 width & height，处于这种盒子之前或之后的内容都是另起一行显示。

inline box 的特性同 block box 是相反的，其随文档的文本流动方向顺序显示。对于 inline box 设置 width & height 是无效的，对于 inline box 设置 padding margin border 将会更新周围的文本的位置，但是不会影响到周围的 block box 的位置。

inline-block box 的特性介于 block box 和 inline box 之间。它随着周围的文本或其他内联元素(inline element)顺序显示，不会像 block box 那样，在它的前后创建换行符，但是它可以通过设定 width & height 来设置尺寸，并且像 block box 那样可以保持自身块的完整性。它不会像 inline box 那样被段落行切断。

    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <span class="inline">Mauris tempus turpis id ante mollis dignissim.</span>
        Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
    </p>

    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <span class="block">Mauris tempus turpis id ante mollis dignissim.</span>
        Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
    </p>

    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <span class="inline-block">Mauris tempus turpis id ante mollis dignissim.</span>
        Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
    </p>

p {
    padding: 1em;
    border: 1px solid black;
}

span {
    border: 1px solid green;
    /* That makes the box visible, regardless of its type */
    background-color: yellow;
}

.inline {
    display: inline;
    /*width or height: 50px; 无效的设定*/
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
    height: 50px;
}