首页 > 其他分享 >CSS 盒模型和 box-sizing 属性

CSS 盒模型和 box-sizing 属性

时间:2023-02-15 13:12:11浏览次数:39  
标签:box sizing 元素 边框 宽度 内边 border CSS

一、盒模型

CSS 的盒模型描述了一个HTML元素所占据的空间。盒模型由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成,如下图所示:

+---------------------------------------+
|              margin-top               |
|  +---------------------------------+  |
|  |            border-top           |  |
|  |  +---------------------------+  |  |
|  |  |          padding-top      |  |  |
|  |  |  +---------------------+  |  |  |
|  |  |  |        content      |  |  |  |
|  |  |  |                     |  |  |  |
|  |  |  |                     |  |  |  |
|  |  |  |                     |  |  |  |
|  |  |  |                     |  |  |  |
|  |  |  |                     |  |  |  |
|  |  |  +---------------------+  |  |  |
|  |  |         padding-bottom    |  |  |
|  |  +---------------------------+  |  |
|  |            border-bottom        |  |
|  +---------------------------------+  |
|              margin-bottom            |
+---------------------------------------+

其中,内容区域(content)指的是元素中实际包含的文本、图片或其他元素。内边距(padding)指的是内容区域和边框之间的空白区域,用于增加元素的内部空间或改变元素的外观。边框(border)指的是围绕内容和内边距的线条或样式,用于将元素与周围的元素或背景区分开来。外边距(margin)指的是元素与相邻元素之间的空白区域,用于控制元素之间的间距。

CSS 的盒模型在布局和样式设计中起着重要作用,可以通过设置盒模型的属性来控制元素的大小、位置和外观。常见的盒模型属性包括 width(宽度)、height(高度)、padding(内边距)、border(边框)、margin(外边距)等。

二、box-sizing 属性

在CSS中,盒模型的大小计算方式可以通过box-sizing属性来设置。box-sizing属性有两个值:

  • content-box(默认值):表示元素的宽度和高度仅包括内容区域,不包括内边距、边框和外边距。也就是说,元素的宽度和高度值只是内容的大小,不包括内边距、边框和外边距。

  • border-box:表示元素的宽度和高度包括内容区域、内边距和边框,但不包括外边距。也就是说,元素的宽度和高度值是包括内边距、边框和内容的总和,而不是仅仅内容的大小。

盒模型的大小计算方式不同,会直接影响到元素的布局和样式设计。因此,在进行CSS布局和样式设计时,需要根据实际需要选择合适的盒模型计算方式,并且注意元素的内边距、边框和外边距对元素的大小和位置产生的影响。

示例代码:

<div class="box1"></div>
<div class="box2"></div>
/* 使用 content-box 计算元素的宽度和高度 */
.box1 {
  box-sizing: content-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  margin: 10px;
  background: red;
}

/* 使用 border-box 计算元素的宽度和高度 */
.box2 {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  margin: 10px;
  background: green;
}

在上面的示例代码中,第一段代码使用 content-box 计算元素的宽度和高度,因此元素的实际宽度和高度是 122px(100 + 2 * 10 + 2 * 1),而外边距则为 10px。第二段代码使用 border-box 计算元素的宽度和高度,因此元素的实际宽度和高度是 100px,而外边距则为 10px。

实际效果如下:

1、box1:

  

2、box2:

 

标签:box,sizing,元素,边框,宽度,内边,border,CSS
From: https://www.cnblogs.com/yuzhihui/p/17122443.html

相关文章

  • css
    1、css简介CSS指层叠样式表(CascadingStyleSheets)。主要用来设置网页中元素的样式。如边框,颜色,位置等… CSS即可以现在HTML中,也可以写在元素的style属性里面,还可以写......
  • 让CSS flex布局最后一行列表左对齐的N种方法
    原文链接https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649091838&idx=1&sn=fa4e1ed1e02d2813633691220c60f52f&chksm=be5bc953892c4045b64fa5a804a1d3676f5894......
  • 一、前端基础HTMl、CSS
    一、CSS初识:1.1、内部样式表:<head><styletype="text/CSS">选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}</style></head>1.2、行内式(内......
  • 二、Html5和CSS3
    一、属性选择器:^='icon'、****$='data'、*='-'1.1、input标签中有value属性的控件input[value]{color:pink;}1.2、input标签中有value属性并且值等于“dd......
  • CSS简单选择器
    CSS选择器,先来学习简单选择器。CSS选择器是用来“寻找”或“选择”,你想要定义样式的HTML元素的。我们前面学习过一个最简单的选择器——比如,这个H1元素就是选择器,我们称之为......
  • CSS样式表的优先级
    前面,我们已经学完了内联样式、内部样式和外部样式。大家思考一个问题,如果三个样式表修饰同一个元素,哪一个优先起作用呢?(动画演示效果)带着这个问题,我们来做个实验。来到编辑器......
  • 教你如何使用CSS实现毛玻璃效果
    前言之前在逛一些网站的时候,就经常看见一些图片背景模糊的效果,这样的效果可以使得用户将更多的注意力放在清晰的地方上,可以不经意间引导用户。我就很好奇,这样的一种效果是怎......
  • HTML5+CSS3(六)-全面详解(学习总结---从入门到深化)
    目录​​CSS简介​​​​ CSS概念​​​​为什么需要CSS​​​​CSS和HTML之间的关系​​​​ 语法​​​​学习效果反馈​​​​ CSS的引入方式​​​​ 内联样式(行内......
  • 如何使用CSS
    如何使用CSSCSS是在HTML4开始使用的,是为了更好的渲染HTML元素而引入的.CSS可以通过以下方式添加到HTML中:内联样式-在HTML元素中使用"style" 属性内部样式表......
  • C# 延时关闭MessageBox
    ▲界面Helper类:usingSystem;usingSystem.Collections.Generic;usingSystem.Drawing;usingSystem.Linq;usingSystem.Runtime.InteropServices;usingSystem.......