css盒模型

最新推荐文章于 2024-09-27 10:45:57 发布
最新推荐文章于 2024-09-27 10:45:57 发布
阅读量272 收藏
点赞数 2
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45929209/article/details/121615341
版权

css盒模型

Margin & padding

  • margin
  • padding
  • border
    提示：非块元素，部分参数无效
关于这三种的使用方法都差不都，所以演示一种类型的定义方法：

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
			}
			.box {
				width: 200px;
				height: 50px;
				border: 1px solid #000;
				
				/*margin: 10px;上右下左均为50px*/
				/*margin: 10px 20px;上下为10px 左右为20px*/
				/*margin: 10px 20px 30px;上为10px 左右为20px 下为30px*/
				/*margin: 10px 20px 30px 40px;上为10px 右为20px 下为30px 左为30px*/
				
				margin-top: 10px;
				margin-right: 20px;
				margin-bottom: 30px;
				margin-left: 40px;	/*效果与上面最后一行定义方法一致*/
	
			}
		</style>
	</head>
	<body>
		<div class="box">
			外边距的定义方法
		</div>
	</body>
</html>

外边距

  • 外边距的定义方法

四种不同元素的外边距

  • 内联元素的外边距
内联元素的外边距是会产生塌陷，从下面的演示来体验叭~

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
			}
			.box {
				width: 200px;
				height: 50px;
				border: 1px solid #000;
				
				/*margin: 10px;上右下左均为50px*/
				/*margin: 10px 20px;上下为10px 左右为20px*/
				/*margin: 10px 20px 30px;上为10px 左右为20px 下为30px*/
				/*margin: 10px 20px 30px 40px;上为10px 右为20px 下为30px 左为30px*/
				
				margin-top: 10px;
				margin-right: 20px;
				margin-bottom: 30px;
				margin-left: 40px;	/*效果与上面最后一行定义方法一致*/
	
			}
		</style>
	</head>
	<body>
		<div class="box">
			外边距的定义方法
		</div>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				font-size: 15px;
			}
			.boxNumber {
				width: 400px;
				height: 20px;
				border: 10px solid #0F0;
			}
			
			.box{
				margin: 50px;
				border: 20px solid #F00;
				
			}
		</style>
	</head>
	<body>
		<div class="boxNumber">
			上边的元素
		</div>
		<div>
			左部文本
			<span class="box">内联元素的文字</span>
			右部文本
		</div>
		<div class="boxNumber">
			下边的元素
		</div>
	</body>
</html>

由上代码演示之后，在使用margin时，他们在上下部分是不好用的，不过左右部分还是是可以使用的。

  • 块元素的外边距
一旦产生块元素，会出现以下几点：

1.他的margin、padding都会体现出来
2.他不会再像之前那样，跟左右部不会处于同一行，而是另起一行，因为块元素会将内边距、外边距都打开。
代码如下（示例）：

.box{
				display: block;
				margin: 50px;
				border: 20px solid #F00;
				
			}

根据上面的内联元素使用的代码，修改一小部分就好，所以只给出部分代码啦
由于上面解释块元素的特点可知，会出现上面代码运行之后的结果

  • 浮动元素的外边距
    如果一个元素被设置为浮动，就像当时于他被从文本流中摘出来（从盒子中拿出来，不再属于文本流），然后文本流自身排列，不再管浮动元素的排列。并且浮动元素的第二个特点就是，一旦被设置被浮动元素之后，浮动元素的大小不会再影响父元素的大小。

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		
			body{
				font-size: 15px;
			}
			
			.box{
				float:left;
				display: block;
				margin: 50px;
				border: 20px solid #F00;	
			}
		</style>
	</head>
	<body>
		<div>
			左部文本
			<span class="box">内联元素的文字</span>
			右部文本
		</div>
	</body>
</html>

由于上面解释浮动元素的特点可知，会出现上面代码运行之后的结果

  • 绝对定位的外边距
    提示：只是定位的一种

一个元素处于absolute状态的时候，他跟浮动的差不多，都是脱离原来文档的状态。
如果对于一个使用了absolute元素，一般不使用margin，除非定位的时候不使用top，left等其他的属性。

代码如下（示例）：

.box{
				display: block;
				position: absolute;
				top:50px;
				left: 50px;
				/*margin: 50px;*/
				border: 20px solid #F00;
			}

提示：
本文介绍了css盒模型的基础内容，内容简单，记录学习过程

  • 内边距
byte~
关注
CSS盒模型
weixin_47782618的博客
04-09 1407
1. 盒模型的概念 CSS盒模型本质上是一个盒子，封装着周围的HTML元素，它包括外边距margin，边框border，内边距padding和实际内容content。 把盒子模型看成一个快递，快递里面的物品就是content，快递里面的缓冲物就是padding，快递盒子就是border，两个快递间的距离就是margin。 2. 标准盒模型 根据W3C的规范，盒子实际内容content的宽度和高度等于我们设置的width和height，而盒子总宽度=width+padding+border+mar
boxmodel:CSS盒模型编辑器界面构建器输入试用
05-14
BoxModel-CSS盒子模型编辑器 BoxModel是一个jQuery插件，可帮助用户创建紧凑的表单输入，以编辑html表单中的box模型css。 它可以提交几个详细信息，例如单独的值以及可以在CSS块中使用的组合的优化单位。 它支持鼠标...
css盒子模型
2301_80840100的博客
06-22 2716
CSS盒子模型是网页布局的基础，它描述了元素在页面上的排列方式。Content(内容) - 盒子的内容，显示文本和图像。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Margin(外边距) - 清除边框外的区域，外边距是透明的。把盒子模型看成一个快递，快递里面的物品就是content，快递里面的缓冲物就是padding，快递盒子就是border，两个快递间的距离就是margin。
CSS盒子模型
微风洋洋的博客
02-08 1万+
CSS盒子模型在CSS中算是比较重要的部分了，他已经开始涉及到网页布局和设计了，对于这一块内容要引起重视，多加练习。
CSS 盒子模型
m0_52861684的博客
08-28 1514
CSS 盒子模型总结。
CSS盒子模型详解
weixin_46048542的博客
04-05 4万+
在使用CSS进行网页布局时，我们一定离不开的一个东西————盒子模型。盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。这里盒子与 中的盒子又有点不同，这里的盒子是二维的。 盒子的组成 一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三
CSS 盒模型
weixin_44805839的博客
07-08 816
CSS 盒模型详解
理解CSS盒子模型及其应用
WXLink的博客
09-10 1255
在CSS中，盒子模型可以被理解为每一个HTML元素都被看作一个方形的盒子。内容区（Content）：盒子的实际内容区域，可以是文字、图片或其他任何HTML元素。内边距（Padding）：内容区与边框之间的空间。内边距是透明的，会影响到盒子的整体大小。边框（Border）：围绕内容区和内边距的可视边界。边框的宽度和样式可以根据设计需求来调整。外边距（Margin）：边框外部的空间，用于盒子与其他盒子之间的距离。理解CSS盒子模型是成为前端开发者的基石之一。
CSS盒模型完整介绍
陈坚泓的博客
03-07 8415
CSS盒模型完整介绍盒模型的认识一、基本概念：标准模型+IE模型二、标准模型和IE模型的区别三、css如何设置获取这两种模型的宽和高四、javascript如何设置获取盒模型对应的宽和高五、外边距重叠六 、BFC推荐阅读 你越是认真生活，你的生活就会越美好——弗兰克·劳埃德·莱特 《人生果实》经典语录 盒模型的认识 文章主要有以下内容 基本概念：标准模型+IE模型。 包括margin,border,padding,content 标准模型和IE模型的区别 css如何设置获取这两种模型的宽和高 js如何
CSS盒模型概述
橘猫吃不胖的博客
10-18 1261
CSS盒模型概述 1 盒模型概述 1.1 标准盒模型 1.2 怪异盒模型 2 块级盒子和内联盒子 3 盒子模型的相关属性 3.1 边框属性border 3.2 内边距属性padding 3.2.1 padding百分比值 3.3 外边距属性margin 3.3.1 margin合并 3.3.2 margin: auto 3.4 背景属性background 3.5 阴影属性box-shadow 4 内联盒子 5 制作各种形状 5.1 三角形 5.2 宽高自适应的正方形 5.3 扇形 5.4 三条横杠 5.5
CSS盒子模型总结
热门推荐
码厩
09-27 6万+
在使用CSS进行网页布局时，我们一定离不开的一个东西————盒子模型。盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。这里盒子与 中的盒子又有点不同，这里的盒子是二维的。 盒子的组成 一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding...
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
CSS+盒模型,css盒模型面试题,HTML源码.zip
10-15
**CSS盒模型** 在网页设计中，CSS（层叠样式表）盒模型是理解布局的基础。它描述了HTML或XML元素如何占据空间并相互影响。盒模型由元素的内容区域、内边距（padding）、边框（border）以及外边距（margin）组成，...
Vue中集中常见的布局方式
张雨的博客
09-24 340
【代码】Vue中集中常见的布局方式。
CSS | 如何来避免 FOUC(无样式内容闪烁)现象的发生?
青春木鱼的博客
09-23 1187
‌FOUC（Flash of Unstyled Content）是指网页在加载过程中，由于CSS样式加载延迟或加载顺序不当，导致页面出现闪烁或呈现出未样式化的内容的现象。‌这种现象通常发生在HTML内容已经加载，但CSS样式表尚未加载或加载顺序不正确时，导致页面短暂地以无样式状态显示，随后样式表加载完成，页面才呈现出预期的样式。这种用户体验不佳的现象，即被称为FOUC。总之，FOUC 是一种常见的 Web 开发问题，可以采取内嵌样式表、预加载样式表、延迟加载样式表、使用样式表框架或者使用样式表链接的 med
vue 项目打包更新后，界面未刷新时js与css资源加载404，监听资源文件404后自动重新加载页面。
最新发布
xuelong的博客
09-27 169
希望可以监听到资源文件加载404时，刷新界面，解决打包后由于文件名的变化导致点击旧页面时 JS 和 CSS 文件出现 404 错误。使用方法下面方法来监听资源文件加载异常。
CSS元素显示样式
qyk666的博客
09-24 246
1.块元素 2.行内元素 3.行内块元素
CSS盒模型详解：内边距应用实例
"通过CSS盒模型实现元素样式控制的实例解析" 在CSS中，盒模型是理解元素布局和外观的关键概念。它将每个HTML元素视为一个矩形盒子，由内容区域、内边距、边框和外边距组成。盒模型决定了元素在页面上的空间占用，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值