【前端基础】1 - 5 盒子模型

§1-5 盒子模型与实践经验

目录

1-5.1 盒子模型简介

所有的 HTML 的元素都可看作是一个个的盒子，盒子模型（box model）常用于在 CSS 中设计和布局。

盒子模型允许我们灵活地控制元素周围之间边框的间距，以及在盒子中放置内容。

下图为盒子模型的示意图：

image

盒子模型共有 5 层，分别为：

  • 外边距（margin）：元素最外层的边框，透明，一些 HTML 元素具有默认的外边距；
  • 边界（border）：围绕在外边距内，内边距外的边框；
  • 内边距（padding）：内容周围的区域，透明；
  • 内容（content）：盒子内容，显示文本和图像。

上述部分在 CSS 中都有对应属性以设置元素布局。整个元素的大小应当考虑整个盒子模型中的所有部分。

通常来说，我们会使用 <div> 内容划分元素结合 class 属性在 CSS 中进行布局设计，该元素是一个块元素，不具有特殊含义，适用范围广。这种用法十分灵活，结合 CSS 中的 display 声明，可实现更为灵活的布局。

1-5.2 调整内容

调整元素的宽高实际上实在调整元素内容区域的宽度和高度。

div {
    width: 300px;
    height: 50px;
}

这里调整了 <div> 元素的内容区域的宽高，但是内容区域大小并不等同于整个元素在页面中的所占大小，还应当考虑其其他部分的大小。

1-5.3 调整内边距

内边距的简写形式为：

/* 按顺时针方向 */

/* 四周所有边 */
padding 10px;

/* 上下 左右 */
padding 8px 10px;

/* 上 左右 下 */
padding 5px 10px 8px;

/* 上 右 左 下 */
padding 5px 14px 10px 8px;

也可以使用具体形式更改具体某一方向上的内边距：

padding-top 5px;	/* 上内边距 */
padding-bottom 5px;	/* 下内边距 */
padding-left 5px;	/* 左内边距 */
padding-right 5px;	/* 右内边距 */

调整内边距时要时刻注意元素的尺寸。在 CSS 盒子模型中，对元素的 height 和 width 调整只会应用到元素的内容区，但若这个元素有任何的 border 或 padding，绘制时，盒子的宽度和高度就会加上所设置的边框的外边距。这会使得调整元素的尺寸时要时刻注意元素的宽高、边界和内边距。往往会在调整元素内边距时意外撑开元素尺寸。这时，可以使用 box-sizing 调整表现。

box-sizing 具有两个值：

  • content-box：默认值。元素内容区宽度与设置相同，任何边框和内边距宽度都会加到最后绘制出来的元素宽度中；
  • border-box：所设置的边框和内边距的值包含在宽高内。

若不想要再调整尺寸是意外撑开元素，使用 border-box 是极好的选择。

1-5.4 调整边界

边界的简写形式为：

border: 宽度 类型 颜色

同样地，它也有对应的具体形式：

border-width 1px;	/* 边界宽度 */
border-style solid;	/* 边界样式 */
border-color gray;	/* 边界颜色 */

边界样式有以下几种（摘自菜鸟教程）：

none: 默认无边框

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

groove: 定义3D沟槽边框。效果取决于边框的颜色值

ridge: 定义3D脊边框。效果取决于边框的颜色值

inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

outset: 定义一个3D突出边框。 效果取决于边框的颜色值

此外，还可定义圆角边框：

/* 按顺时针顺序 */
/* 所有角 */
border-radius: 15px;

/* 左上右下 右上左下 */
border-radius: 15px 30px;

/* 左上 右上左下 右下 */
border-radius: 15px 50px 30px;

/* 左上 右上 右下 左下 */
border-radius: 10px 20px 30px 40px;

配合圆角边框，就可以实现在不裁剪原图片的情况下实现圆角图片，无图片实现 CSS 画圆。使用 border-radius 实现。

  • 若要绘制圆形，将正方形盒子的圆角属性值设置为宽高的一半（50%）。
  • 若要绘制胶囊形，将长方形盒子的圆角属性值设置为高度的一半。

绘制盒子阴影也是一种常见的设计，使用 box-shadow 实现：

box-shadow: x-偏移量 y-偏移量 模糊半径 扩散半径 阴影颜色;

1-5.5 调整外边距

调整外边距的简写形式为：

/* 按顺时针顺序 */
/* 四周所有边 */
margin 0;

/* 上下 左右 */
margin: 25px 50px;

/* 上 左右 下 */
margin: 25px 50px 75px;

/* 上 右 下 左 */
margin: 25px 50px 75px 100px;

它们也有对应的具体形式：

margin-top: 25px;	/* 上外边距 */
margin-bottom: 25px;	/* 下外边距 */
margin-left: 25px;	/* 左外边距 */
margin-right: 25px;	/* 右外边距 */

此外，还可以使用 auto 设置浏览器边距，这样做会依赖于浏览器。如 margin 0 auto 会使得水平方向的外边距由浏览器决定，在一些情况下会使得元素居中显示，且该声明可以与 text-align: center 混用。二者居中的参考对象有细微差异，前者基于块级元素的宽度。

合并现象：两个垂直排列的兄弟元素，其上下外边距会合并，取较大值。

塌陷现象：子元素设置的 margin 会应用到父级导致父子元素同时受到 margin 影响发生塌陷。

这种情况会导致想要子元素相对父元素下移时却意外导致父子元素同时下移而二者的相对位置不变，影响布局。考虑修改父元素的内边距以实现子元素在相对父元素下移的同时避免父子元素塌陷。

清除默认样式：一些元素会有默认的用户样式表，一般会视需要清除这些元素的默认样式。

1-5.6 元素显示模式

在 HTML 入门篇我们介绍过元素的等级，元素等级可由可由 CSS 的 display 修改，可修改为 block, inline 或 inline-block。三种显示模式的特点为：

  • 块级元素
    • 独占一行；
    • 宽度默认为父级的 100%；
    • 添加宽高属性生效；
  • 行内元素
    • 一行可显示多个；
    • 设置宽高属性不生效；
    • 宽高尺寸由内容撑开；
  • 行内块元素
    • 一行可显示多个；
    • 设置宽高属性生效；
    • 宽高尺寸也可由内容撑开；

1-5.7 <span> 行内元素

<span> 元素是用作短语内容的行内容器，无任何特殊语义，通常用于编组实现方便的 CSS 样式控制。<span> 是行内元素。

示例：在下列这段话中标红关键词。

<!-- HTML 文档 -->
<div class="hightlight">
    <p>
        使用 <span class="code">&lt;span&gt;</span> 标签以及 <span class="code">&lt;class&gt;</span> 属性可以编组元素，方便使用 CSS 美化。
    </p>
</div>

CSS 代码：

/* hightlight 部分样式 */
div.hightlight {
    font-family: 微软雅黑, sans-serif;
}

/* 编组 code 样式：采用博客园样式 */
div.hightlight span.code {
    background-color: #fbe5e1;
    border-radius: 3px;

    font-family: Consolas, "Courier New", monospace, sans-serif;
    font-size: 12px;
    color: #c0341d;
    line-height: 1.8px;

    margin: 0 3px;
    padding: 2px 5px;
}

1-5.8 <div> 与 class

<div> 标签与 class 属性结合的方法是一种常用的实践，这种做法允许我们灵活地进行页面设计。

<div> 元素本身并不具有特殊作用，只是作为一个内容划分元素，方便使用 CSS 美化，结合使用 class 方便定位。

<div> 元素默认是块元素。有时，在 CSS 中还会结合使用 display 声明修改元素的显示方式为内联元素（行内元素）或 flex 布局。

示例一：以 CSS 方式显示博客园图标（图片来自外部引用）

<!-- HTML 文档 -->
<!--  -->
<div class="cnblog">
    <img src="https://ts1.cn.mm.bing.net/th/id/R-C.d402583a8cbb1edea14c73853b380be3?rik=SSoiLt%2fHNZL%2big&riu=http%3a%2f%2fhao.jc170.com%2fzb_users%2fupload%2f2020%2f09%2f202009141600049155132708.png&ehk=r0KD%2fERDZR%2bZlxxUZZTkMUyBqWazVM%2bMNFI0C1DkAgU%3d&risl=&pid=ImgRaw&r=0"
    alt="博客园" title="博客园，开发者的网上乐园" class="icon"
     height="128px" width="128px">

    <div class="name">
        <h2 class="title">博客园</h2>
        <p class="slogan">
            开发者的网上乐园
        </p>

        <p class="site">
            cnblogs.com
        </p>
    </div>
</div>

CSS 代码：

/* 初始化 */
body, h2, p {
    padding: 0;
    margin: 0;
}

/* 主体背景色 */
body {
    background-color: #FAFAFA;
}

/* 调整整个分块元素的宽度和外边距 */
div.cnblog {
    width: 300px;
    margin: 0 auto;
}

/* 调整文字部分 */
div.name {
    display: inline-block;	/* 将整个分块调整为内联元素 */
    text-align: center;
    padding-left: 25px;
}

/* 网址标题 */
.title {
    color: #e33e06;
    font-size: 2.8em;
    font-weight: bolder;
}

/* Slogan */
.slogan {
    color: #2f2f2f;
}

/* 网址 */
.site {
    color: #8c8c8c;
    font-size: 1.35rem;
}

/* 图片文字居中 */
.icon, .name {
    vertical-align: middle;
}

示例二：使用 display 的 flex 布局实现无序列表导航栏

<!-- HTML 文档 -->
<div class="nav">
    <h2 class="links">友情链接</h2>

    <ul>
        <li>
            <a href="https://www.baidu.com" target="_blank">百度</a>
        </li>
        <li>
            <a href="https://www.bing.com" target="_blank">必应</a>
        </li>
        <li>
            <a href="https://www.google.com" target="_blank">谷歌</a>
        </li>
        <li>
            <a href="https://www.cnblogs.com" target="_blank">博客园</a>
        </li>
        <li>
            <a href="https://www.runoob.com" target="_blank">菜鸟教程</a>
        </li>
        <li>
            <a href="https://www.wikipedia.org" target="_blank">维基百科</a>
        </li>
        <li>
            <a href="https://www.github.com" target="_blank">Github</a>
        </li>
    </ul>
</div>

CSS 代码：

/* 友情链接居中显示 */
.nav {
    width: 490px;
    margin: 5px auto;
}

/* 无序表行内显示 */
.nav, .nav > ul {
    display: flex;
}

/* 调整列表项间距 */
.nav > ul {
    padding-left: 15px;
    margin: 0;
}

/* 更改列表项标志 */
.nav li {
    list-style-type: none;
    padding-left: 7px;
    padding-top: 6.5px;
}

/* 取消链接下划线 */
.nav li>a {
    text-decoration-line: none;
}

1-5.9 元素溢出

有时，子元素的内容过多，超出了其所在父级元素的显示范围，这时就会发生溢出现象。这时应当处理元素溢出的显示方式，由 overflow 控制。

overflow 有三个值：hidden（默认，隐藏溢出部分）、scroll（无论是否溢出都显示滚动条）、auto（自动显示或隐藏滚动条）。

1-5.10 经验分享

来自 [@遇见狂神说](遇见狂神说的个人空间-遇见狂神说个人主页-哔哩哔哩视频 (bilibili.com))：https://www.bilibili.com/video/BV1YJ411a7dy

这些部分是前端开发的基础，拥有前端开发基础就能够写出一个相对美观的页面。但是这样做实际上就是从零开始纯手写全部前端代码，费时费力，效率低。后期，我们会使用一些前端开发中常用的框架和中间件，提高开发效率。

开发者需要保持良好的创造力和想象力，这些能力在工作中很受用。

个人练习项目可以使用别人提供好的模板，在模板上进行修改，这样可以提高开发效率。

posted @ 2024-03-09 20:35  Zebt  阅读(6)  评论(0)  编辑  收藏  举报