HTML + CSS 连载 | 19 - 盒子模型的尺寸

Riemann Hypothesis

已于 2023-10-23 22:13:53 修改

阅读量131

点赞数

分类专栏： HTML2CSS 文章标签： css html css3

于 2023-10-23 22:13:34 首次发布

本文链接：https://blog.csdn.net/JingnanJia/article/details/134000445

版权

HTML2CSS 专栏收录该内容

64 篇文章 4 订阅

订阅专栏

html+css.jpeg

一、盒子属性在行内非替换元素中的特殊性

盒子模型的一些属性如 内容宽度 width、高度 height、上外边距 margin-top、和 下外边距 margin-bottom 对于行内非替换元素如 span\a\strong\i 来说是不生效的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .content {
      background-color: #f00;
      color: white;

      /*以下这些属性对于行内非替换元素都不会生效*/
      width: 300px;
      height: 300px;
      margin-top: 20px;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <span class="content">
    我是span
  </span>
</body>
</html>

在浏览器中打开 HTML 页面，可以看到设置的 width\height 等属性并没有生效。

但是 padding 是生效的；

    .content {
      background-color: #f00;
      color: white;

      /*以下这些属性对于行内非替换元素都不会生效*/
      width: 300px;
      height: 300px;
      margin-top: 20px;
      margin-bottom: 20px;
      /*padding 是生效的*/
      padding: 20px 20px;
    }

打开 HTML 页面，效果如下：

对于行内非替换元素，padding 在上下是不占据空间的，也就说是在下面加一个元素，不会再 padding 外面出现，而是直接在内容下面出现，上面由于不占空间，所以直接被内容给占据了。

    .content {
      background-color: #f00;
      color: white;

      /*以下这些属性对于行内非替换元素都不会生效*/
      width: 300px;
      height: 300px;
      margin-top: 20px;
      margin-bottom: 20px;
      /*padding 是生效的*/
      /*特殊：上下会被撑起来，但是不会占据空间*/
      padding: 20px 20px;

      /*边框：border*/
      border: 50px solid orange;
    }

border 属性是生效的；

行内级元素往往和其他元素在一行内显示，如果针对某个一部分设置 maring 会导致一整段上下不协调，不美观，基于这些原因考虑，上下不生效。

二、盒子模型-盒子尺寸 box-sizing

box-sizing 是用来设置盒子模型中的宽高的行为，包含两个属性值，分别是：

content-box：padding、border 都布置在 width、height 外边
border-box：padding、border 都布置在 width、height 里面

content-box 中元素实际占用的宽度和高度如下图：

border-box 中元素实际占用的宽度和高度如下图所示：

新建一个 HTML 页面，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      /*不包含padding、border*/
      box-sizing: content-box;

      width: 100px;
      height: 100px;
      background-color: #f00;

      padding: 30px;
      border: 10px solid orange;
    }

    .box2 {
      /*包含padding、border*/
      box-sizing: border-box;
      width: 100px;
      height: 100px;
      background-color: #0f0;

      padding: 30px;
      border: 10px solid purple;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
</html>

在 HTML 页面中打开该 HTML 页面，效果如下：

三、案例-实现两个按钮

需求：实现下面两个按钮

这两个按钮都是可以点击的，可以通过两个 a 元素来实现，设置边框和圆角来实现。

第一步：搭建 HTML 框架

创建一个 HTML 页面，使用 a 元素来搭建这两个按钮，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
</head>
<body>
  <div class="container">
    <a href="">新人福利</a>
    <a href="">Plus会员</a>
  </div>
</body>
</html>

在浏览器中打开该 HTML 页面，效果如下：

第二步：对 a 元素的样式进行重置

a 元素本身包含了一些样式，我们需要通过新建 reset.css 文件，在该文件中重置 a 元素的样式，具体 CSS 代码如下：

/*filename: reset.css*/
/*a元素的样式重置*/
a {
  text-decoration: none;
  color: #333;
  font-size: 12px;
}

在 HTML 页面中引入重置的样式；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
</head>
<body>
  <div class="container">
    <a href="">新人福利</a>
    <a href="">Plus会员</a>
  </div>
</body>
</html>

在浏览器中打开 HTML 页面，效果如下：

第三步：设置按钮的内容属性和宽高背景颜色

接下来设置第一个按钮的样式，先给第一个按钮添加一个 class 属性并修改元素属性为 inline-block 类型，这样就可以设置宽高了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <style>
    .gift {
      /*修改元素属性为 inline-block，设置宽和高*/
      display: inline-block;

      width: 70px;
      height: 25px;
      /*设置背景颜色*/
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="container">
    <a class="gift" href="">新人福利</a>
    <a href="">Plus会员</a>
  </div>
</body>
</html>

打开浏览器，页面效果如下：

接着我们还需要对 a 元素中字体的颜色进行设置，将字体颜色修改为白色，并设置水平和垂直居中，具体 CSS 代码如下：

    .gift {
      /*修改元素属性为 inline-block，设置宽和高*/
      display: inline-block;

      width: 70px;
      height: 25px;
      /*设置背景颜色*/
      background-color: red;
      /*设置字体颜色为白色*/
      color: #fff;
      /*设置水平和处置居中，垂直居中只需要line-height等于height即可，
      水平居中可以设置 text-align 为 center*/
      line-height: 25px;
      text-align: center;
    }

在浏览器中打开 HTML 页面，效果如下：

原样式中还带有一定的圆角，可以通过 border-radius 来设置；具体代码如下：

    .gift {
      /*修改元素属性为 inline-block，设置宽和高*/
      display: inline-block;

      width: 70px;
      height: 25px;
      /*设置背景颜色*/
      background-color: red;
      color: #fff;
      /*设置水平和处置居中，垂直居中只需要line-height等于height即可，
      水平居中可以设置 text-align 为 center*/
      line-height: 25px;
      text-align: center;

      /*设置圆角*/
      border-radius: 13px;
    }

在浏览器中打开 HTML 页面，效果如下：

第四步：设置第二个按钮的样式

第二个按钮的样式和第一个按钮的样式基本一致，先给两个按钮都增加一个相同的 btn 属性，并将 CSS 选择器也改为 .btn。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <style>
    .btn {
      /*修改元素属性为 inline-block，设置宽和高*/
      display: inline-block;

      width: 70px;
      height: 25px;
      /*设置背景颜色*/
      background-color: red;
      color: #fff;
      /*设置水平和处置居中，垂直居中只需要line-height等于height即可，
      水平居中可以设置 text-align 为 center*/
      line-height: 25px;
      text-align: center;

      /*设置圆角*/
      border-radius: 13px;
    }
  </style>
</head>
<body>
  <div class="container">
    <a class="btn gift" href="">新人福利</a>
    <a class="btn member" href="">Plus会员</a>
  </div>
</body>
</html>

在浏览器中打开 HTML 页面，效果如下：

这两个按钮的背景颜色和字体颜色是不同的，我们可以单独给他们设置背景颜色，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <style>
    .btn {
      /*修改元素属性为 inline-block，设置宽和高*/
      display: inline-block;

      width: 70px;
      height: 25px;
      /*设置水平和处置居中，垂直居中只需要line-height等于height即可，
      水平居中可以设置 text-align 为 center*/
      line-height: 25px;
      text-align: center;

      /*设置圆角*/
      border-radius: 13px;
    }

    .gift {
      background-color: red;
      color: #fff
    }

    .member {
      background-color: #363634;
      color: #e5d790;
    }
  </style>
</head>
<body>
  <div class="container">
    <a class="btn gift" href="">新人福利</a>
    <a class="btn member" href="">Plus会员</a>
  </div>
</body>
</html>

在浏览器中打开 HTML 页面，效果如下：

第五步：设置 hover 时的状态

当鼠标放到按钮上的时候，按钮的背景颜色会加深，设置 hover 时的状态可以通过伪类 .btn:hover 来实现，具体 CSS 代码如下：

.btn:hover {
  background-color: #c81623;
  color: #fff;
}

在浏览器中打开 HTML 页面，效果如下：

至此完全实现了需求中的样式。

Riemann Hypothesis

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML + CSS 连载 | 19 - 盒子模型的尺寸

行内级元素往往和其他元素在一行内显示，如果针对某个一部分设置 maring 会导致一整段上下不协调，不美观，基于这些原因考虑，上下不生效。外面出现，而是直接在内容下面出现，上面由于不占空间，所以直接被内容给占据了。第二个按钮的样式和第一个按钮的样式基本一致，先给两个按钮都增加一个相同的。在上下是不占据空间的，也就说是在下面加一个元素，不会再。接下来设置第一个按钮的样式，先给第一个按钮添加一个。当鼠标放到按钮上的时候，按钮的背景颜色会加深，设置。在浏览器中打开 HTML 页面，可以看到设置的。
复制链接

扫一扫