HTML + CSS 连载 | 14 - CSS 盒子模型及内边距

Riemann Hypothesis

于 2023-10-23 22:10:28 发布

阅读量165

点赞数

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

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

版权

HTML2CSS 专栏收录该内容

64 篇文章 5 订阅

订阅专栏

html+css.jpeg

一、CSS 盒子模型

HTML 中的每一个元素都可以看做是一个盒子，这个盒子具备以下四个属性：

内容（content）：元素的内容 width/height
内边距（padding）：内容和元素之间的间距
边框（border）：元素自己的边框
外边框（margin）：元素和其他元素之间的间距

因为每个盒子有四个边，所有 margin、padding、border 都包括 top、right、bottom、left 四个边。

在浏览器的开发者工具中也会显示元素的盒子模型：

二、盒子模型的内容-宽度和高度

HTML 元素中设置内容是通过宽度和高度设置的，对于行内非替换元素来说，设置宽度和高度是无效的，HTML 元素宽度的默认值或者初始值是 auto，即宽度是由浏览器来决定的。

<!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>
    .box {
      background-color: #f00;
      /*auto 表示宽度交给浏览器来决定*/
      width: auto;
    }
  </style>
</head>
<body>
  <div class="box">我是box</div>
</body>
</html>

在浏览器中的显示效果如下：

除了宽高之外，我们还可以设置如下属性：

min-width：最小宽度，无论内容多少，宽度都大于或者等于 min-width
max-width：最小宽度，无论内容多少，宽度都小于或者等于 max-width

min-width 和 max-width 属性的优先级要高于 width。

下面这两个属性不常用：

min-height：最小宽度，无论内容多少，宽度都大于或者等于 min-height
max-height：最小宽度，无论内容多少，宽度都小于或者等于 max-height

<!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>
    .home {
      height: 2000px;
      background-color: #f00;

      /*最大的宽度 750px*/
      max-width: 750px;
      /*最小的宽度 600px*/
      min-width: 600px;
      /*块级元素居中设置*/
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div class="home"></div>
</body>
</html>

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

三、盒子模型的内边距-padding

padding 属性用于设置盒子的内边距，通常用于设置变边框和内容之间的间距；padding包括四个方向，所以有如下四个取值：

padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距

padding 也可以单独作为一个缩写属性，表示四个方向的内边距值，缩写属性从零点钟方向开始，顺时针转动，分别表示上右下左。

padding 并非必须是四个值，也可以有其他值。

<!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>
    .box {
      /*给盒子设置一个红色的边框， padding就是内容到边框之间的间距*/
      border: 1px solid rebeccapurple;
      /*设置为 inline-block类型，既可以设置高度宽度又独占一行*/
      /**/ 
      display: inline-block;
      /*设置边距*/
      padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 30px;
      padding-left: 40px;
      /*缩写属性*/
      /* padding: 10px 20px 30px 40px; */
    }
  </style>
</head>
<body>
  <div class="box">我是box</div>
</body>
</html>

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

可以从浏览器的盒子模型中看到设置的上下左右内边距的值。

padding 属性的其他值的情况：

`padding`值的个数	`padding` 的例子	代表的含义
4	padding: 10px 20px 30px 40px	top: 10px; right: 20px; bottom: 30px; left: 40px;
3	padding: 10px 20px 30px	缺少 left，left 使用 right 的值
2	padding: 10px 20px	缺少 left，使用 right 的值，缺少 bottom，使用 top 的值
1	padding: 10px	top/right/bottom/left 都是用 10px

Riemann Hypothesis

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML + CSS 连载 | 14 - CSS 盒子模型及内边距

HTML 元素中设置内容是通过宽度和高度设置的，对于行内非替换元素来说，设置宽度和高度是无效的，HTML 元素宽度的默认值或者初始值是 auto，即宽度是由浏览器来决定的。也可以单独作为一个缩写属性，表示四个方向的内边距值，缩写属性从零点钟方向开始，顺时针转动，分别表示上右下左。min-width 和 max-width 属性的优先级要高于 width。属性用于设置盒子的内边距，通常用于设置变边框和内容之间的间距；可以从浏览器的盒子模型中看到设置的上下左右内边距的值。并非必须是四个值，也可以有其他值。
复制链接

扫一扫

专栏目录