前端之盒模型

盒模型

在 CSS 中，所有HTML元素都可以看作盒子，由内而外表示为——内容 内边距 边框 外边距。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

块级盒子 和 内联盒子

用display 属性的进行设置，比如 inline（内联盒子） 或者 block（块级盒子）。

块级盒子（Block box）

1. Block box会扩展并占据父容器的所有空间，所以在绝大数的情况下盒子会和父容器一样宽。
2. 每个盒子都会换行。
3. 可以使用width 和 height 属性指定盒子宽高。
4. 水平方向的内边距、外边距以及边框会被应用且会将其他元素推开。
   默认块级元素（block），例如：元素h1 p ul

内联盒子（Inline box）

1. 内联盒子不会产生换行。
2. width 和 height 属性将不起作用。
3. 垂直方向的内边距、外边距以及边框会被应用但是不会把其他内联盒子推开。
4. 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

默认内联元素（inline），例如：元素 a span em strong

弹性布局 flex

<style>
	display:flex;
</style>

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

样式一：

<style>
/* container
-------------------------------------------------- */

.container h2,
.container p,
.container ul {
    border: 2px solid black;
    padding: 0.5em;
}

.container ul li,
.container .block {
    border: 2px solid blue;
    padding: .5em;
    margin-right: .5em;
}


/* 将ul元素定义为弹性盒子，内部子元素会排成一列 */

.container ul {
    display: flex;
    list-style: none;
}

.container p .block {
    display: block;
}
</style>

    <div class="container">
        <h2>不同显示类型的例子1</h2>
        <p>I am a paragraph. A short one.</p>
        <ul>
            <li>Item One</li>
            <li>Item Two</li>
            <li>Item Three</li>
        </ul>
        <p>I am another paragraph. Some of the <span class="block">words</span> have been wrapped in a <span>span element</span>.</p>
    </div>

样式二：

<style>
/* .container2
-------------------------------------------------- */


/* 给每个元素一个边框 */

.container2 h2,
.container2 p,
.container2 ul {
    border: 2px solid blue;
    padding: .5em;
}

.container2 ul {
    margin-top: .2em;
    margin-bottom: .2em;
}

.container2 span {
    border: 2px solid blue;
}

.container2 ul li {
    list-style: none;
    border: 2px solid black;
    padding: .5em;
    margin-right: .5em;
}


/* 将ul设置为弹性盒子，且内部子元素排列在一行 */

.container2 ul {
    display: inline-flex;
}


/* 变为内联元素 */

.container2 .inline {
    display: inline;
}
</style>

  <div class="container2">
        <h2>不同显示类型的例子2</h2>

        <p>
            I am a paragraph. Some of the
            <span>words</span> have been wrapped in a
            <span>span element</span>.
        </p>
        <ul>
            <li>Item One</li>
            <li>Item Two</li>
            <li>Item Three</li>
        </ul>
        <p class="inline">I am a paragraph. A short one.</p>
        <p class="inline">I am another paragraph. Also a short one.</p>
    </div>

width 和 height是设置内容的尺寸。

网页实例

box-sizing: border-box;

box-sizing属性用于更改用于计算元素的宽度和高度默认的CSS盒子模型，可以使用此属性来模拟不正确支持CSS盒子模型规范的游览器行为。

前提： 每个HTML元素都是一个盒子

未使用box-sizing: border-box：
width 和 height 是指内容的尺寸

使用box-sizing: border-box后：
width 和 height 是指 内容+内边距+边框 的尺寸

此时：

<style>
.container3 .box {
    border: 5px solid rebeccapurple;
    background-color: lightgray;
    padding: 40px;
    margin: 40px;
    width: 300px;
    height: 150px;
}

.container3 .alternate {
    box-sizing: border-box;
}
</style>

    <div class="container3">
        <h2>不同显示类型的例子3</h2>
        <div class="box">I use the standard box model.</div>
        <div class="box alternate">I use the alternate box model.</div>
    </div>

改成：

<style>
.container3 .alternate {
    box-sizing: border-box;
    width: 390px;
    height: 240px;
}
</style>

将宽高重新设定
由于之前的内边距和边框分别是40px 5px
于是，将宽高都加上（40+5）* 2就可以了。

外边距 margin

用百分数作为内外边距的值时，都是根据元素水平宽度的百分比计算的。

<style>
    margin: -40px 30px 40px 4em;

    /* margin: -40px 30px 40px 4em; */
    margin-top: -40px;
    margin-right: 30px;
    margin-bottom: 40px;
    margin-left: 4em;
</style>

    <div class="container4">
        <h2>不同显示类型的例子4</h2>
        <div class="box">Change my margin.</div>
    </div>

外边距为负会导致盒元素向负的方向偏移。

网页实例

外边距折叠？

如果你有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。

两个盒子的外边距在竖直方向会进行计算。

<style>
.container5 .box1 {
    border: 1px solid black;
}

.container5 .one {
    margin-bottom: 50px;
}

.container5 .two {
    margin-top: -30px;
}
</style>

    <div class="container5">
        <h2>不同显示类型的例子5</h2>
        <div class="box1">
            <p class="one">I am paragraph one.</p>
            <p class="two">I am paragraph two.</p>
        </div>
    </div>

都正，不是相加，而是取最大值。

---

<style>
.container5 .two {
    margin-top: -30px;
}
</style>

一正一负，绝对值相减就是结果。

边框 border

网页实例

盒子模型和内联盒子

内联块（display: inline-block）

添加display: inline-block后，它是通过内边距推开其他元素。

<style>
/* container6
-------------------------------------------------- */

.container6 p span {
    margin: 20px;
    padding: 20px;
    width: 80px;
    height: 50px;
    background-color: lightblue;
    border: 2px solid blue;
}
</style>

    <div class="container6">
        <h2>不同显示类型的例子6</h2>
        <p>
            I am a paragraph and this is a <span>span</span> inside that paragraph. A span is an inline element and so does not respect width and height.
        </p>
    </div>

span内联盒子的外边距、内边距和边框是生效，但改变不了块内容与它的关系。

<style>
/* container6
-------------------------------------------------- */

.container6 p span {
    margin: 20px;
    padding: 20px;
    width: 80px;
    height: 50px;
    background-color: lightblue;
    border: 2px solid blue;
	display: inline-block;
}
</style>

添加display: inline-block后，它是通过内边距推开其他元素。

导航栏用 (display: inline-block)

<style>
/* .container7
-------------------------------------------------- */

/* 设置导航的背景 字体颜色 去掉链接下划线 设置链接内边距*/
.container7 nav .links-list a {
    background-color: rgb(179, 57, 81);
    color: #fff;
    text-decoration: none;
    padding: 1em 2em;
}

/* 去掉ul的默认样式（前面的黑点） */
.container7 ul {
    list-style: none;
}
/* 每个li都会通过内边距推开其他元素 */
.container7 ul li {
    display: inline-block;
}

/* 鼠标在链接上时的样式 */
.container7 nav .links-list a:hover {
    background-color: rgb(66, 28, 40);
    color: #fff;
}
</style>

    <div class="container7">
        <h2>不同显示类型的例子7</h2>
        <nav>
            <ul class="links-list">
                <li><a href="">Link one</a></li>
                <li><a href="">Link two</a></li>
                <li><a href="">Link three</a></li>
            </ul>
        </nav>
    </div>

网页实例