CSS盒子模型初解

最新推荐文章于 2024-10-06 15:38:21 发布
最新推荐文章于 2024-10-06 15:38:21 发布
阅读量503 收藏
点赞数
分类专栏： CSS 文章标签： css 盒子模型
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/icerain_520/article/details/76087122
版权

我们如果以面向对象的角度去考虑CSS提供的盒子模型，可以建立一个BOX对象进行表示：

public class Box{
	// 外边距：控制与父级元素的距离
	public Margin margin;
	// 边框：控制边框的样式
	public Border border;
	// 内边距：控制元素与边框之间的距离(又称之为填充)
	public Padding pad;
	// 元素内容：显示的文字内容
	public Content con;
}


如下图所示

盒子模型


CSS将每个元素都包在一个看不见的盒子中，这个盒子包括margin、border、padding以及content内容。marging决定盒子距离其父级元素的距离，boder决定盒子边框的样式，padding控制元素显示内容与框边的距离，content才是元素真正显示的部分。写一段测试代码如下： 

<html>
	<head>
		<title>CSS盒子模型</title>
		<style type="text/css">
			div{			
				/*设置元素部分的宽高*/	
    				width:100px;
    				height: 100px;

				/*设置边框*/
				border-style:solid;
				border-color: #22DDDD;
    				border-width:5px;

				/*设置该样式后，元素外框变大了*/
    				padding-left: 20px;
				padding-top: 50px;

				/*设置外边距*/
				margin-left:50px;
				margin-top: 50px;
			}
		</style>
	</head>

	<body>
		<div class="ele" style="background-color: #66ffff">
			元素内容
		</div>
	</body>
</html>

效果图如下：

效果图
盒子正如其名，想象一下我们收到的快递包裹，在买的物品<content>外面有一个盒子，盒子与物品直接有填充物<padding>防止物品损坏，盒子本身具有一定的厚度和高度<border>，而假设盒子被放在箱子(或任何容器，只要方便理解)中，箱子与盒子之间的距离就是外边距<margin>。


我们知道，在平面显示中，需要确定上下左右的距离才能进行定位，在CSS中，定位也是一样的操作，如果同样使用面向对象进行理解，可以有如下对象：

public class Margin{
	public String top;//上：表示为margin-top
	public String bottom;//下：表示为margin-bottom
	public String left;//左：表示为margin-left
	public String right;//右：表示为margin-right
}
外边距有上下左右四个属性，用来对元素进行定位以及分别设置不一样的样式，举个栗子： 
border-style:dotted solid double dashed
其代表的顺序是边框的上、右、下、左分别不同的样式设置。

CSS盒子模型标准分IE版和W3C版，一般都会选择W3C版作为显示标准，当然，如果不加以规定的话，在不同浏览器上显示效果可能有比较大的差异，浏览器的默认解析标准并不相同，所以一般会加上doctype 声明，告诉浏览器使用什么标准进行解析：

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

最后，希望本文能帮助到有需要的朋友

叫我小青
关注
专栏目录
简述对css盒子模型的理解_css 盒子模型理解
weixin_32428571的博客
01-17 4172
盒子模型是html+css中最核心的基础知识，理解了这个重要的概念才能更好的排版，进行页面布局。下面是自己积累和总结的关于css盒子模型的知识^_^，希望对初学者有用。一、css盒子模型概念CSS css盒子模型 又称框模型 (Box Model) ，包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。如图：图中最内部的框是元素的实际内...
css盒子模型图解
09-25
### CSS盒子模型详解 #### 一、引言 CSS（层叠样式表）是Web设计中不可或缺的一部分，它用于控制HTML文档的布局和外观。在CSS中，元素的布局通过盒子模型来定义，该模型决定了元素如何占用空间以及与其他元素交互...
css盒子模型
2301_80840100的博客
06-22 2777
CSS盒子模型是网页布局的基础，它描述了元素在页面上的排列方式。Content(内容) - 盒子的内容，显示文本和图像。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Margin(外边距) - 清除边框外的区域，外边距是透明的。把盒子模型看成一个快递，快递里面的物品就是content，快递里面的缓冲物就是padding，快递盒子就是border，两个快递间的距离就是margin。
理解CSS盒子模型及其应用
WXLink的博客
09-10 1262
在CSS中，盒子模型可以被理解为每一个HTML元素都被看作一个方形的盒子。内容区（Content）：盒子的实际内容区域，可以是文字、图片或其他任何HTML元素。内边距（Padding）：内容区与边框之间的空间。内边距是透明的，会影响到盒子的整体大小。边框（Border）：围绕内容区和内边距的可视边界。边框的宽度和样式可以根据设计需求来调整。外边距（Margin）：边框外部的空间，用于盒子与其他盒子之间的距离。理解CSS盒子模型是成为前端开发者的基石之一。
深入理解 CSS 盒子模型
My_wife_QBL的博客
07-08 825
CSS 盒子模型是网页布局的核心概念，理解盒子模型的各个组成部分及其计算方式，对于进行精确的网页布局至关重要。通过设置widthheightpaddingborder和margin属性，可以控制元素的尺寸和位置。使用box-sizing属性可以选择不同的盒子模型，简化布局计算。在实际开发中，可能会遇到一些常见问题，如外边距重叠、盒子模型的兼容性问题和元素尺寸超出预期。通过合理使用 CSS 属性和技巧，可以有效解决这些问题，创建出美观、高效的网页布局。
前端开发面试题—CSS盒子模型
黛琳ghz的博客，期待你的关注。
09-05 1718
盒子模型是CSS中较为重要的核心概念之一，它是使用CSS控制页面元素外观和位置的基础。所有HTML元素可以看作是一个盒子（特别是块级元素），在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：内容(content)、内边距(padding)、边框(border)、外边距(margin)。盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。
CSS盒子模型
LiLi的博客
12-22 6489
CSS盒子模型（Box Model） 概念 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括： 外边距（margin），边框（border），内边距（padding），和实际内容（content） 1 Margin(外边距) - 清除边框外的区域，外边距是透明的 2 Border(边框) - 围绕在内边距和内容外的边框 3 Padding(内边距) - 清除内容周围的区域，内边距是透明的 4 Co
CSS 盒子模型（box model）
小楼一夜听春雨，深巷明朝卖杏花
03-01 2732
盒子虽然变大了但是内容在往中间挤，中间的内容还是在盒子的左上角，剩下的是内边距帮你填充的。如果把盒子模型看作是一个生活中的快递，那么内容部分等同于你买的实物，内边距等同于快递盒子中的泡沫，边框等同于快递盒子，外边距等同于两个快递盒子之间的距离。上下是一个值，左右是一个值。，它包括：外边距(margin)，边框(border)，内边距(padding)，和实际内容(content)。蓝色的是一个盒子，这是一个元素，这个元素包含内边距padding，边框和外边距。内容文字图片是实物，然后内边距，边框，外边距。
CSS 盒子模型
m0_52861684的博客
08-28 1521
CSS 盒子模型总结。
css相关内容:盒子模型
weixin_74384492的博客
08-06 922
在HTML学习中，我们了解到，每个标签的本质都是形成一个独立的空间，用于各种操作。各种标签形成的独立的空间就是盒子模型。简单来说，盒子模型就是各种标签的抽象化产物。我们可以针对盒子模型进行各种参数设置，达到样式优化的效果。
CSS盒子模型总结
热门推荐
码厩
09-27 6万+
在使用CSS进行网页布局时，我们一定离不开的一个东西————盒子模型。盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。这里盒子与 中的盒子又有点不同，这里的盒子是二维的。 盒子的组成 一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding...
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
css盒子模型 css margin 外边框合并
09-25
CSS盒子模型是Web开发中非常基础且核心的概念之一，它定义了元素框处理内容、内边距、边框和外边距的方式。了解和掌握CSS盒子模型，对于进行前端开发和网页布局至关重要。 首先，CSS盒子模型由四个部分组成：内容...
CSS画出三角形的做法
mingangel的博客
10-01 514
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
CSS 盒子属性
m0_74012211的博客
10-02 531
CSS 盒子属性
241006-Gradio中Chatbot通过CSS自适应调整高度
最新发布
专注机器学习之路
10-06 320
【代码】241006-Gradio中Chatbot通过CSS自适应调整高度。
CSS 中的@media print 是干什么用的？
读心悦
09-29 318
在这个查询块内，你可以设置各种样式，以确保打印输出的内容看起来整洁、专业，并且只包含必要的信息。例如，你可能还想隐藏某些不重要的元素，如广告、侧边栏或仅用于装饰的图片，同时增加标题和段落的字体大小，以及为页面添加页眉和页脚（但这次是在打印样式中自定义的，与网页上的不同）。这种做法通常很有用，因为网页的页眉和页脚可能包含导航链接、社交媒体图标、版权声明等对于在线浏览很有用的信息，但在打印版本中，这些信息可能并不必要，甚至可能占用宝贵的页面空间。元素都将被隐藏（即不显示在打印的页面上）。这是通过将这些元素的。
CSS中的font-variation-settings：探索字体的可变性
艾恩小灰灰的博客
09-30 556
可变字体允许字体文件包含一系列的设计轴（Design Axes），如宽度（Width）、倾斜度（Slant）、粗细（Weight）等。通过调整这些轴的值，可以实现从一种样式到另一种样式的平滑过渡，而无需加载多个独立的字体文件。为设计师提供了前所未有的灵活性，在保持页面加载性能的同时，能够创造出丰富多样的视觉效果。随着更多浏览器的支持和可变字体的普及，这一功能将在未来成为Web设计中的重要工具之一。
理解CSS盒子模型：维度、填充与边距
"理解CSS盒子模型对于前端开发至关重要。盒子模型定义了网页元素的布局方式，包括内容(content)、内边距(padding)、边框(border)和外边距(margin)四个部分。它决定了元素的实际占据空间，从而影响网页的整体布局。" ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值